Guide du programme Secure Remote Commerce

Utilisez Secure Remote Commerce (SRC) afin d’effectuer des paiements en ligne de façon sécurisée, en tirant parti de l’expertise du secteur des paiements internationaux pour protéger les informations de paiement des utilisateurs. Les utilisateurs peuvent ajouter des cartes Visa, Mastercard, American Express et Discover pour activer la fonction Click to Pay. SRC prend en charge toutes les marques du réseau participantes.

Intégrer le bouton Secure Remote Commerce

Pour commencer, générez votre ID Checkout Masterpass dans le Dashboard et configurez les URL de rappel de votre environnement de test et du mode production. Mastercard propose SRC en guise de mise à jour de son service Masterpass.

Pour utiliser SRC sur votre site Web, ajoutez la balise de script suivante dans votre document HTML :

<script type="text/javascript" src="https://sandbox.src.mastercard.com/srci/integration/merchant.js?locale=en_us&checkoutid={checkoutId}"></script>

Pour afficher le bouton Masterpass avec du texte noir, utilisez l’image suivante :

<img id="mpbutton" src="https://src.mastercard.com/assets/img/acc/global/src_mark_hor_blk.svg?locale=en_us&paymentmethod={acceptedCardBrands}&checkoutid={checkoutId}"/>

Pour afficher le bouton Masterpass avec du texte blanc, utilisez l’image suivante :

<img id="mpbutton" src="https://src.mastercard.com/assets/img/acc/global/src_mark_hor_blk.svg?locale=en_us&paymentmethod={acceptedCardBrands}&checkoutid={checkoutId}"/>

Joignez un gestionnaire de clics à l’image et utilisez-le pour invoquer la fonction masterpass.checkout avec les paramètres souhaités :

const button = document.getElementById('mpbutton');

button.addEventListener('click', (ev) =>
  masterpass.checkout({
    checkoutId: '{{MASTERPASS_CHECKOUT_ID}}',
    allowedCardTypes: ['master', 'amex', 'visa'],
    amount: '10.00',
    currency: 'USD',
    cartId: '{{UNIQUE_ID}}',
    callbackUrl: '{{CALLBACK_URL}}'
  }));

La fonction masterpass.checkout requiert les paramètres suivants :

Pour plus d’informations sur la fonction masterpass.checkout et les paramètres acceptés, consultez la documentation Mastercard.

Finaliser le paiement

Lorsque l’utilisateur clique sur le bouton Masterpass sur votre page de paiement, il est redirigé vers le site Web Masterpass où il peut sélectionner un moyen de paiement existant dans son compte, ou bien en saisir un nouveau. Lorsque l’utilisateur finalise le processus, Masterpass le redirige vers l’URL de rappel que vous avez configurée lors de l’activation de Masterpass, ou vers l’URL de rappel indiquée lorsque vous avez invoqué la fonction masterpass.checkout. Il ajoute un paramètre de requête URL oauth_verifier que votre application peut utiliser pour finaliser la transaction.

Dans le gestionnaire d’itinéraire pour la destination de redirection, extrayez le paramètre de requête URL et utilisez-le pour confirmer le PaymentIntent que vous avez créé en début de tunnel de paiement. Consultez la section Accepter un paiement pour en savoir plus sur la gestion de votre tunnel de paiement avec Payment Intents.

L’exemple de code suivant explique comment confirmer un PaymentIntent avec SRC dans Node.js dans le cadre Express :

app.get('/callback', async (req, res) => {
  // retrieve the PaymentIntent ID created at the beginning of the checkout flow.
  const payment_intent_id = '{{PAYMENT_INTENT_ID}}';

  const payment_intent = await stripe.paymentIntents.confirm(payment_intent_id, {
    amount: 1000,
    currency: 'usd',
    payment_method_data: {
      type: 'card',
      card: {
        masterpass: {
          cart_id: '{{UNIQUE_ID}}',
          transaction_id: req.query.oauth_verifier,
        },
      },
    },
  });

  res.send('<h1>Charge succeeded</h1>');
});

Tester Secure Remote Commerce

Pour tester votre intégration SRC par rapport au bac à sable Mastercard, créez un nouveau compte utilisateur SRC au cours du processus de paiement sur votre site Web. Configurez le compte pour utiliser l’une des cartes test mentionnées dans la documentation Masterpass. Finalisez le processus de paiement comme d’habitude, en sélectionnant la carte test comme moyen de paiement. Si tout fonctionne correctement, Mastercard vous redirige vers votre application, qui crée le paiement comme convenu.

L’intégration SRC ne fonctionne correctement que sur les pages http ou https. Le traitement à partir du système de fichiers n’est pas pris en charge, même lors des tests.