# Guide du programme Secure Remote Commerce

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

Utilisez [Secure Remote Commerce (SRC)](https://www.mastercard.us/en-us/merchants/grow-your-business/find-solutions-by-need/improve-checkout/secure-digital-checkout.html) 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.

> Avant l’implémentation, veuillez vous référer aux [exigences d’implémentation](https://developer.mastercard.com/page/masterpass-requirements-and-best-practices). En utilisant Secure Remote Commerce via Stripe, vous acceptez les [règles de fonctionnement](https://masterpass.com/assets/pdf/masterpassoperatingrules.pdf). Mastercard propose le service SRC via sa plateforme Masterpass.

## Intégrer le bouton Secure Remote Commerce

> Mastercard a rendu Masterpass obsolète. Par conséquent, il n’est pas possible de générer de nouveaux identifiants Masterpass Checkout dans le Dashboard. Nous travaillons à la réactivation de l’onboarding Secure Remote Commerce.

Si vous utilisez [Visa Checkout](https://docs.stripe.com/visa-checkout.md) ou [Masterpass](https://docs.stripe.com/masterpass.md) pour accepter les paiements, nous vous recommandons de migrer ces intégrations vers SRC. Vous bénéficierez ainsi d’une expérience de paiement unifiée prenant en charge de nombreuses marques de cartes bancaires.

Pour commencer, générez votre **ID Checkout** Masterpass dans le [Dashboard](https://dashboard.stripe.com/account/payments/settings) 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 :

#### Bac à sable

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

#### Mode production

```html
<script type="text/javascript" src="https://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](https://dashboard.stripe.com/account/payments/settings).      |

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

```html
<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&nbsp;:

```html
<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&nbsp;: “master,amex,visa,diners,discover,jcb,maestro”).    |
| `checkoutid`    | ID Checkout de Mastercard, copié à partir de la section Masterpass du [Dashboard](https://dashboard.stripe.com/account/payments/settings).      |

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

```javascript
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&nbsp;:

| Paramètre          | Description                                                                                                                      |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| `checkoutId`       | ID Checkout pour votre projet Masterpass, copié à partir du [Dashboard](https://dashboard.stripe.com/account/payments/settings). |
| `allowedCardTypes` | Liste de prestataires de services de paiement compatibles avec Masterpass que vous voulez prendre en charge.                     |
| `amount`           | Le 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`      | Utilisez ce paramètre facultatif pour remplacer l’URL `callbackUrl` 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](https://developer.mastercard.com/documentation/masterpass-merchant-integration-v7/7#standard-checkout1).

## 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](https://docs.stripe.com/api/payment_intents/confirm.md) le [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) que vous avez créé en début de tunnel de paiement. Consultez la section [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md) pour en savoir plus sur la gestion de votre tunnel de paiement avec Payment Intents.

L’exemple de code suivant explique comment *confirmer* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects) un PaymentIntent avec SRC dans Node.js dans le cadre Express&nbsp;:

```javascript
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](https://developer.mastercard.com/masterpass/documentation/migration/masterpass_to_src_migration/#mastercard-test-cards) 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.