Guide du programme Secure Remote Commerce

Acceptez les paiements via Secure Remote Commerce dans votre intégration Stripe existante.

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.

Note

Avant l’implémentation, veuillez vous référer aux exigences d’implémentation. En utilisant Secure Remote Commerce via Stripe, vous acceptez les règles de fonctionnement. Mastercard propose le service SRC via sa plateforme Masterpass.

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>

Paramètre	Description
`locale`	Le pays (et la langue) de l’entreprise. `en_US` est la seule valeur valide, car SRC est uniquement disponible pour les entreprises américaines.
`checkoutid`	ID Checkout de Mastercard, copié à partir de la section Masterpass du Dashboard.

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}"/>

Paramètre	Description
`locale`	Le pays (et la langue) de l’entreprise. `en_US` est la seule valeur valide, car SRC est uniquement disponible pour les entreprises américaines.
`paymentmethod`	Liste des marques de carte bancaire acceptées, séparée par des virgules (par exemple : “master,amex,visa,diners,discover,jcb,maestro”).
`checkoutid`	ID Checkout de Mastercard, copié à partir de la section Masterpass du Dashboard

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 :

Paramètre	Description
`checkoutId`	ID Checkout pour votre projet Masterpass, copié à partir du Dashboard
`allowedCardTypes`	Liste de prestataires de services de paiement compatibles avec Masterpass que vous voulez prendre en charge
`amount`	Montant de la transaction, exprimé au format décimal
`currency`	Devise à utiliser pour la transaction
`cartId`	Chaîne unique que vous générez pour identifier l’achat
`callbackUrl`	Vous pouvez utiliser ce paramètre facultatif pour remplacer l’URL de rappel par défaut configurée lors de l’activation du Masterpass

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.