• Directives d'intégration
• Modes de paiement
• Option SRC (Secure Remote Commerce)

Option SRC (Secure Remote Commerce)

L'option Secure Remote Commerce (SRC) est une option de paiement en ligne intelligente et sans mot de passe qui offre une expérience de paiement rapide et facile aux payeurs. L'option SRC propose un bouton de paiement unique (également appelé « Click to Pay ») et un flux de paiement standardisé pour tous les systèmes de cartes participants, notamment Mastercard, Visa, American Express, Discover et autres. L'option SRC est basée sur la spécification SRC d'EMVCo et remplace Masterpass, Visa Checkout et Amex Express Checkout.

Un payeur peut créer un profil SRC en utilisant son adresse électronique. Lors du paiement, le payeur doit alors indiquer cette adresse électronique et suivre une étape de vérification supplémentaire avec un code à usage unique. Il peut également choisir l'option « Se souvenir de moi » pour ignorer ultérieurement la vérification lorsqu'il utilisera le même navigateur.

Dans son profil SRC, le payeur peut stocker plusieurs cartes de crédit, de débit ou prépayées, les adresses de facturation associées et plusieurs adresses d'expédition. Les détails des cartes sont stockés en toute sécurité et une sécurité supplémentaire est proposée via la segmentation en jetons de réseau.

L'option SRC permet à votre payeur de sélectionner les détails de paiement à utiliser pour le paiement ; cependant, le paiement lui-même est traité à l'aide de l'acquéreur configuré pour votre profil de commerçant sur la passerelle.

L'option SRC est prise en charge sur la page de paiement de la passerelle (Hosted Checkout) ou via un SDK JavaScript, si vous utilisez votre propre page de paiement.

Avantages clésCopied to Clipboard

L'option SRC offre les avantages suivants :

• Option de paiement rapide et simple à utiliser pour vos payeurs avec un risque réduit d'abandon de paiement
• Taux d'approbation des autorisations plus élevés si vous utilisez les jetons de réseau
• Diminution des fraudes de payeurs
• Échange sécurisé des données de paiement, notamment les détails de la carte, les détails de l'adresse de facturation et d'expédition.

Conditions préalablesCopied to Clipboard

Si vous souhaitez proposer l'option SRC comme option de paiement à vos payeurs :

• Contactez votre your payment service provider pour vous assurer que l'option SRC est disponible pour vous.
• Dans le menu Admin, dans Merchant Administration, cliquez sur Configuration SRC et suivez les instructions pour intégrer et activer l'option SRC pour votre profil de commerçant. Vous devez disposer du privilège requis pour mettre à jour votre configuration SRC.

SRC comme option de paiement dans Hosted CheckoutCopied to Clipboard

Si vous utilisez la page de paiement de la passerelle (Hosted Checkout), l'option SRC sera automatiquement proposée comme option de paiement à vos payeurs si vous avez activé l'option SRC pour votre profil de commerçant et que vous utilisez DirectAPI version 57 ou une version ultérieure lors de la soumission de la demande Create Checkout Session (Créer une session de paiement) pour initier l'interaction Hosted Checkout.

Bien que le profil SRC de votre payeur lui-même puisse contenir des cartes pour tous les systèmes de cartes pris en charge, pour une transaction donnée, votre payeur ne peut utiliser l'option SRC que pour les cartes pour lesquelles :

• le système de cartes a été activé pour l'option SRC sur votre profil de commerçant et
• votre profil de commerçant est configuré pour traiter les cartes avec ce système et la devise de transaction.

Adresse d'expédition : les payeurs ne pourront pas sélectionner une adresse d'expédition au cours de l'interaction SRC, car la collecte d'adresses d'expédition n'est actuellement pas prise en charge via Hosted Checkout.

Adresse de facturation : une adresse de facturation sera toujours collectée au cours de l'interaction SRC.

Authentification 3-D Secure : si vous êtes configuré pour l'authentification 3-D Secure (3DS), Hosted Checkout effectuera automatiquement l'authentification 3DS après l'interaction SRC.

<html>
    <head>
      <script src="https://ap-gateway.mastercard.com/static/srci/1.2.0/srci.min.js"
        data-error="errorCallback"
        data-cancel="cancelCallback"></script>
      <script type="text/javascript">
        function errorCallback(error) {
          console.log(JSON.stringify(error));
        }
        function cancelCallback() {
          console.log('Payment cancelled');
        }
   
        Checkout.configure({
          merchant: "<gateway_merchant_ID>",
          session: {
            id: "<session_ID>",
          },
          customer: {
            email: "<payer_email_address>"
          },
          order: {
            amount: "60",
            currency: "USD",
            description: "High level description of the goods contained in the order",
            id: "<your_unique_order_ID>",
          },
          interaction: {
            country: "USA",
            locale: "en_US",
            operation: "AUTHORIZE",
            merchant: {
              name: "<merchant_name>",
              url: "<website_URL>",
              address: {
                line1: "200 Sample St",
                line2: "1234 Example Town"
              }
            }
          }
        });
      </script>
    </head>
    <body>
      ...
      <input
        type="button"
        value="Pay with Lightbox"
        onclick="Checkout.showLightbox();"
      />
      <input
        type="button"
        value="Pay with Payment Page"
        onclick="Checkout.showPaymentPage();"
      />
      ...
    </body>
  </html>

Option SRC comme option de paiement sur votre page de paiementCopied to Clipboard

Si vous utilisez votre propre page de paiement et souhaitez proposer l'option SRC comme option de paiement à vos payeurs, utilisez le SDK JavaScript SRCI (srci.js) fourni par la passerelle.

Il s'agit d'une intégration JavaScript côté client qui vous permet d'initier l'interaction SRC directement à partir du navigateur du payeur ; elle garantit également que les détails de paiement sélectionnés par le payeur au cours de l'interaction SRC sont directement soumis du navigateur du payeur à la passerelle.

Pour utiliser le SDK JavaScript SRCI, suivez les étapes ci-dessous.

Étape 1 : Créer une session

Créez une session en soumettant une demande Create Session (Créer une session) à partir de votre application côté serveur. La réponse retourne un ID de session que vous devez utiliser dans les étapes suivantes pour référencer cette session.

Étape 2 : Mettre à jour de la session à jour avec le montant et la devise de la commande

Mettez à jour la session avec le montant et la devise de la commande en soumettant une demande Update Session (Mettre à jour la session) à partir de votre application côté serveur. Cette étape est requise pour pouvoir ultérieurement rechercher la disponibilité de l'option SRC pour les paiements dans cette devise.

   
 {
   "order":{
      "amount":100.00,
      "currency":"USD"
   }
}

Étape 3 : Inclure le SDK JavaScript SRCI sur la page de paiement

Incluez le SDK JavaScript SRCI (srci.js) fourni par la passerelle dans votre page de paiement en ajoutant un élément script dans l'élément head. Cela place un objet SRCi dans l'espace de noms de la fenêtre.

<script type="text/javascript" src="https://ap-gateway.mastercard.com/static/srci/1.2.0/srci.min.js"></script>

Étape 4 : Configuration de l'interaction SRC

Lors du chargement de votre page de paiement, initiez l'interaction SRC en appelant la méthode SRCi.configure().

<html>
    <head>
        <script type="text/javascript" src="https://ap-gateway.mastercard.com/static/srci/1.2.0/srci.min.js"></script>
        <script type="text/javascript">
          var callback = function (response) {
            if(response.result === "SUCCESS") {
              console.log("Response from SDK: %s", response.restApiResponse);
            } else if(response.result === "ERROR") {
              console.log("An error occurred");
            }
          } 
 
          SRCi.configure(
            "<your_gateway_merchant_ID>",
            "<your_merchant_name>",
            "<your_merchant_URL>",
            "<your_session_ID>", 
            { wsVersion: 57 },
            callback     
          );
        </script>
    </head>
    <body>
     ...
    </body>
</html>

Détails du commerçant

Le champ merchantId est requis afin que la passerelle puisse correctement déterminer vos options de paiement.

Les champs merchantName et merchantUrl sont soumis au serveur SRC. Ces détails peuvent être affichés au payeur au cours de l'interaction SRC.

Indiquez votre nom commercial, c'est-à-dire le nom connu par votre payeur et l'URL de votre site Web que le payeur utilise.

Version

Définissez cette valeur sur 57. Il s'agit de la version que vous avez utilisée lors de la soumission de la demande Create Session (Créer une session).

Rappel

Utilisez le paramètre callback pour définir les actions à appeler une fois SRCi.configure() terminé. Par exemple, vous souhaiterez peut-être vous connecter si la méthode a réussi :

var srciConfigCallback = function (resp) {
	var response = resp.restApiResponse;
	if (response.result === "ERROR") {
		console.error("SRC could not successfully be configured");
	} else if (response.result === "SUCCESS") {
		console.log("SRC was successfully configured");
	}
}

  

L'appel SRCi.configure() peut retourner les réponses d'erreur suivantes :

Lorsqu'une erreur est retournée, ne passez pas à l'étape suivante. Proposez au payeur un autre mode de paiement.

Configuration avancée

Le SDK extrait les détails de la configuration de votre profil de commerçant pour l'option SRC (notamment, par exemple, la liste de tous les systèmes pour lesquels l'option SRC est disponible) à l'aide de l'opération Payment Options Inquiry (Demande d'options de paiement). Cependant, si vous avez déjà soumis une demande Payment Options Inquiry (Demande d'options de paiement) au cours de la session du payeur, vous pouvez transmettre ces détails en ajoutant l'élément configuration à la demande.

Dans ce cas, le SDK n'exécute pas à nouveau la demande Payment Options Inquiry (Demande d'options de paiement) Le paramètre wsVersion indique la version DirectAPI que vous avez utilisée pour soumettre la demande Payment Options Inquiry (Demande d'options de paiement).

<html>
    <head>
        <script type="text/javascript" src="https://ap-gateway.mastercard.com/static/srci/1.2.0/srci.min.js"></script>
            // Response from the Payment Options Inquiry call. This value to SRCi.configure() is optional. If it is not passed in, a call will be made from the SDK to the API to retrieve it.
          var paymentOptionsInquiryResponse = {
            merchant: "<gateway_merchant_ID>",
            paymentTypes: {
              card: {
                cardTypes: [{
                  cardType: "MASTERCARD",
                  schemeTokenTypes: "CRYPTOGRAM_3DSECURE"
                }, {
                  cardType: "VISA",
                  schemeTokenTypes: "CRYPTOGRAM_3DSECURE"
                }, {
                  cardType: "AMEX",
                  schemeTokenTypes: "DYNAMIC_CSC_AND_EXPIRY"
                }],
                walletProviders: [{
                  secureRemoteCommerce: {
                    defaultPayerCountry: "USA",
                    shippingAddressCountries : "USA,CAN"
                    scheme: [{
                      dpaId: "<DPA_ID>", // As configured for this scheme on your merchant profile.
                      name: "MASTERCARD"
                    }, {
                      dpaId: "<DPA_ID>", // As configured for this scheme on your merchant profile.
                      name: "VISA"
                    }, {
                      name: "AMERICAN_EXPRESS"
                    }]
                  },
                  walletProvider: "SECURE_REMOTE_COMMERCE"
                }]
              }
            },
            result: "SUCCESS"
          }
 
          SRCi.configure({
              "<gateway_merchant_ID>",
               "<merchant_name>",
               "<merchant_URL>",
               "<session_ID>",
               configuration: {
                 wsVersion: 57,
                 paymentOptions: paymentOptionsInquiryResponse
               }, 
               callback: function (response) {
                 if(response.result === "SUCCESS") {
                   console.log("Response from SDK: %s", response.restApiResponse);
                 } else if(response.result === "ERROR") {
                   console.log("An error occurred");
                 }
               }      
            });
        </script>
    </head>
    <body>
     ...
    </body>
</html>

Exemple de réponse SRCi.configure()

Un appel SRCi.configure() réussi est illustré ci-dessous.

{
    result: "SUCCESS"
    restApiResponse: <Payments Options Inquiry response>
   }  

La réponse contient la réponse Payments Options Inquiry (Demande d'options de paiement) dans le champ restApiResponse, qui est à titre d'information uniquement. Cependant, vous souhaiterez peut-être utiliser ces informations plus tard au cours de la session du payeur plutôt que d'utiliser la demande PAYMENT_OPTIONS_INQUIRY (Demande d'options de paiement) pour les récupérer.

Un appel SRCi.configure() ayant échoué est illustré ci-dessous.

{
    result: "ERROR"
    cause: <cause>
    explanation: <explanation>
   }  

Dans ce cas, demandez au payeur de sélectionner une autre option de paiement.

Étape 5 : Afficher l'option SRC comme option de paiement

Si SRCi.configure() a réussi, affichez l'option SRC comme option de paiement sur votre page de paiement. Pour les exigences en matière de marque, voir Directives d'interface utilisateur SRC.

Utilisez les détails de configuration SRC retournés dans la réponse Payment Options Inquiry (Demande d'options de paiement) pour déterminer les logos de système à afficher sur le bouton. Pour chaque système pris en charge, la réponse Payment Options Inquiry (Demande d'options de paiement) contient le nom du système dans le champ paymentTypes.card.walletProviders[n].secureRemoteCommerce.scheme[n].name.

Étape 6 : Lancer l'interface utilisateur SRC

Lorsque le payeur sélectionne l'option SRC comme option de paiement, lancez l'interface utilisateur SRC en appelant la méthode SRCi.launchUI().

var payloadCallback = function (correlationId, scheme) {
      console.log("Payload callback complete with correlation id %s and scheme %s", correlationId, scheme);
    };
     
    var errorCallback = function (error) {
      console.log("Error callback triggered with error: %s", error);
    };
     
    var cancelCallback = function () {
      console.log("Cancel callback triggered");
    };
     
    SRCi.launchUI({
        orderAmount: "100.00",
        orderCurrency: "USD"
      },
      payloadCallback,
      errorCallback,
      cancelCallback
    );

Outre les champs obligatoires, vous pouvez également renseigner un certain nombre de champs facultatifs :

SRCi.launchUI(
   {
      "orderAmount":"60"
	  "orderCurrency":"USD",
      "customerEmail":"<payer_email_address>",
      "collectShippingAddress":true,
      "interactionCountry":"CAN"
      "interactionLocale":"fr"
   }
);    

Collecte des adresses électroniques des payeurs

L'adresse électronique du payeur sera toujours collectée au cours de l'interaction SRC. Si vous connaissez déjà l'adresse électronique du payeur, ajoutez le champ customerEmail à la méthode SRCi.launchUI() pour permettre au payeur d'ignorer la saisie de son adresse électronique au cours de l'interaction SRC.

Collecte des adresses de facturation

Une adresse de facturation sera toujours collectée au cours de l'interaction SRC.

Collecte des adresses d'expédition

Par défaut, l'option SRC ne collectera pas l'adresse d'expédition du payeur. Si vous souhaitez que l'option SRC collecte l'adresse d'expédition du payeur, ajoutez le champ collectShippingAddress:true à la méthode SRCi.launchUI().

Par défaut, le payeur peut sélectionner n'importe quel pays pour l'adresse d'expédition. Pour restreindre la liste des pays vers lesquels vous expédiez des marchandises, vous devez configurer votre profil de commerçant pour l'option SRC via Merchant Administration avec une liste des pays autorisés ou une liste des pays exclus. Lorsque vous avez défini des restrictions, le payeur ne pourra sélectionner qu'un pays d'adresse d'expédition autorisé.

Vous ne pouvez pas remplacer les pays d'adresse d'expédition pris en charge pour une demande spécifique.

Pays d'interaction

Le pays de l'interaction détermine le contenu spécifique au pays présenté au payeur au cours de l'interaction SRC, comme par exemple, les Conditions générales. La valeur que vous avez configurée par rapport à votre profil de commerçant sur la passerelle est utilisée par défaut. Ajoutez le champ interactionCountry à la méthode SRCi.launchUI(), si vous souhaitez remplacer cette valeur pour cette interaction.

Paramètres régionaux d'interaction

Les paramètres régionaux d'interaction déterminent la langue utilisée au cours de l'interaction SRC. Par défaut, la langue configurée dans le navigateur du payeur est utilisée. Si la langue du payeur ne peut pas être déterminée ou n'est pas prise en charge, en_US est utilisé. Si vous souhaitez remplacer cette valeur, ajoutez le champ interactionLocale à la méthode SRCi.launchUI(). Actuellement, les langues prises en charge sont l'anglais (Royaume-Uni) (en_UK), l'espagnol (Espagne) (es_ES), le français (Canada) (fr_CA), le portugais (Brésil) (pt_BR) et le chinois (Hong Kong) (zh_HK).

Rappel

Vous devez définir les actions à appeler une fois SRCi.launchUI() terminé comme suit :

Étape 7 : Mettre à jour de la session avec les détails de paiement SRC

Une fois que votre payeur a terminé avec succès l'interaction SRC, vous devez demander à la passerelle de récupérer les détails de paiement pour l'interaction SRC et de les stocker dans la session.

Soumettez une demande Update Session From Wallet (Mettre à jour la session à partir du portefeuille) avec :

• l'ID de session dans l'URL de la demande, et
• le champ correlationId et le système retournés dans l'appel payloadCallback.

{
   "apiOperation":"UPDATE_SESSION_FROM_WALLET",
   "order":{
      "walletProvider":"SECURE_REMOTE_COMMERCE"
   },
   "wallet":{
      "secureRemoteCommerce":{
         "srcCorrelationId":"<correlationId_provided_in_payloadCallback>",
         "scheme":"<scheme_provided_in_payloadCallback>"
      }
   }
}    

Si la session a été mise à jour avec succès avec les détails de paiement à partir de l'interaction SRC, vous pouvez continuer. Si la session n'a pas été mise à jour avec succès, demandez à votre payeur de sélectionner une autre option de paiement.

Étape 8 : Exécuter une authentification 3-D Secure (facultative)

Si vous souhaitez authentifier le payeur, effectuez une authentification 3-D Secure en utilisant la session. Voir Mise en œuvre d'une intégration 3DS à l'aide de l'API JavaScript 3DS pour plus de détails.

Étape 9 : Effectuer une opération de paiement

Si la session a été mise à jour avec succès avec les détails de paiement à partir de l'interaction SRC (et l'authentification 3-D Secure, effectuée à l'étape 8), utilisez la session pour soumettre le paiement pour traitement à partir de votre application côté serveur. Par exemple, vous pouvez soumettre une demande Authorize (Autoriser). Les détails de paiement stockés dans la session à partir de l'interaction SRC sont utilisés pour traiter le paiement. Vous pouvez utiliser la session pour un certain nombre d'opérations d'API ; voir Utiliser une session pour plus d'informations.

          
{
   "session":{
      "id":"<session_ID>"
   }   "..."
}

<html>
    <head>
        <script type="text/javascript" src="https://ap-gateway.mastercard.com/static/srci/1.2.0/srci.min.js"></script>
         
        <script type="text/javascript">
            var configured = false;
 
            //SRCi global object is initialized by srci script
            SRCi.configure(
                "<gateway_merchant_ID>",
                "<merchant_name>",
                "<merchant_URL>",
                "<session_ID>", 
                { wsVersion: 57 },
              function (response) {
                if(response.result === "SUCCESS") {
                  configured = true;
                  console.log("Response from SDK: %s", response.restApiResponse);
                } else if(response.result === "ERROR") {
                  console.log("An error occurred");
                }
              }      
            );
 
            var payloadCallback = function (correlationId, scheme) {
              console.log("Payload callback complete with correlation id %s and scheme %s", correlationId, scheme);
              enablePayButton();
            };
  
            var errorCallback = function (error) {
              console.log("Error callback triggered with error %s",  error);
              enablePayButton();
            };
  
            var cancelCallback = function () {
              console.log("Cancel callback triggered");
              enablePayButton();
            };
  
            function enablePayButton() {
              document.getElementById("payButton").disabled = false;
            }
 
            function disablePayButton() {
              document.getElementById("payButton").disabled = true;
            }
 
            function pay() {
              if (configured) {
                // ensure only one payment window is launched
                disablePayButton();
 
                SRCi.launchUI({
                    orderAmount: "100.00",
                    orderCurrency: "USD"
                  },
                  payloadCallback,
                  errorCallback,
                  cancelCallback
                );
              } else {
                console.error("SRCi is not configured");
              }
            }
            </script>
    </head>
    <body>
        <button id="payButton" type="button" onclick="pay();">Pay</button>
    </body>
</html>    

Détails du paiement SRCCopied to Clipboard

Cette rubrique décrit les détails de paiement retournés pour les interactions SRC.

Type de détails de paiement retournés pour les interactions SRC

L'option SRC prend en charge le renvoi de différents types de détails de paiement pour traitement. Les détails de paiement retournés par le système SRC dépendent du type demandé par la passerelle, de votre configuration dans le système SRC et du système de cartes. L'option SRC retourne généralement un jeton de réseau, une expiration de jeton et un cryptogramme complet (lorsque pris en charge par le système de cartes).

Cependant, lorsque la passerelle n'est pas en mesure d'envoyer un jeton de réseau avec un cryptogramme complet à votre acquéreur, l'option SRC doit à la place indiquer un jeton de réseau, une expiration de jeton et un cryptogramme visuel (CSC) dynamique. La passerelle s'assurera automatiquement que le type de détail de paiement correct est demandé.

Si une carte ne prend pas en charge la segmentation en jetons de réseau (par exemple, lorsque l'émetteur ne participe pas à ce service), l'option SRC retourne les détails de la carte (numéro et expiration de la carte) au lieu des détails du jeton de réseau (jeton de réseau, expiration du jeton et cryptogramme ou cryptogramme visuel dynamique).

Si vous êtes commerçant américain et avez indiqué que vous souhaitez faire usage de vos droits en vertu de l'amendement Durbin, l'option SRC indique les détails de la carte (numéro et expiration de la carte) pour les cartes de débit.

Détails du paiement SRC dans la réponse de la transaction de l'API

Les détails de paiement sélectionnés par le payeur au cours de l'interaction SRC sont stockés dans la session et retournés dans la réponse de la transaction pour les demandes d'API effectuées à l'aide de la session. Lorsque l'option SRC indique les détails du jeton de réseau, ces détails et les détails de la carte (masqués) sont indiqués.

En fonction du type de détails de paiement retournés par le système SRC, vous recevez les détails suivants dans la réponse de l'API.

Détails du payeur

Le nom et le numéro de téléphone du payeur sont indiqués dans la réponse de la transaction dans le groupe de paramètres customer.

L'adresse électronique du payeur est indiquée dans la réponse de la transaction dans le champ customer.email, si vous avez défini consumerEmailAddressRequested sur true.

Détails de l'adresse de facturation

Les détails de l'adresse de facturation associés à la carte sont indiqués dans la réponse de la transaction dans le groupe de paramètres billing.address.

Détails de l'adresse d'expédition

Si vous avez défini collectShippingAddress sur true, les détails de l'adresse d'expédition sont indiqués dans la réponse de transaction dans le groupe de paramètres shipping.address.

Transactions initiées par le commerçantCopied to Clipboard

Vous ne devez pas proposer l'option SRC comme option de paiement à vos payeurs si vous souhaitez utiliser ultérieurement ces informations de paiement pour initier des paiements en série, tels que des paiements récurrents ou échelonnés. Cela sera pris en charge dans une prochaine version.

Test de votre intégrationCopied to Clipboard

Lorsque vous avez terminé votre intégration avec la passerelle pour l'option SRC, vous pouvez la tester en utilisant votre profil de commerçant de test (votre identifiant de commerçant préfixé par TEST). Lors de l'utilisation du profil de commerçant de test, la passerelle propose un simulateur pour l'interaction SRC. Le simulateur SRC utilise un ensemble de détails de paiement prédéfinis qui ne peuvent pas être modifiés. En fonction des détails de paiement prédéfinis, vous pouvez déclencher et tester différents scénarios, comme décrit ci-dessous.

La deuxième colonne des tableaux ci-dessous indique les 4 derniers chiffres du FPAN sélectionnés par le payeur au cours de l'interaction SRC. Pour déclencher un scénario, sélectionnez le FPAN correspondant sur le simulateur au cours de l'interaction SRC du payeur.

Test de SRC avec l'authentification 3-D SecureCopied to Clipboard

Si votre profil de commerçant est activé pour l'authentification 3-D Secure EMV (3DS2), vous pouvez utiliser les détails de test de l'option SRC ci-dessous pour déclencher un flux sans friction ou un flux d'authentification.