Accepter un paiement avec Express Checkout Element

Utilisez une seule intégration pour accepter les paiements par le biais de boutons de paiement en un clic.

Le composant Element Express Checkout vous offre une intégration unique pour accepter des paiements à l’aide de différents boutons de paiement en un clic, dont Link, PayPal, Apple Pay, Google Pay et Amazon Pay.

En fonction des moyens de paiement pris en charge par leur appareil et leur navigateur, les clients voient des boutons différents. Les appareils compatibles prennent automatiquement en charge Google Pay et Link. La prise en charge d’Apple Pay et de PayPal nécessite des étapes supplémentaires.

Bêta

Klarna on the Express Checkout Element is launching a limited beta in mid October. Reach out here to gain access.

Nous vous recommandons de collecter les informations de paiement avant de créer un Intent lorsque vous utilisez le composant Express Checkout Element. Si vous avez déjà effectué une intégration avec le composant Payment Element, vous devrez peut-être mettre à jour votre intégration.

Avant de commencer

Ajoutez un moyen de paiement à votre navigateur. Par exemple, vous pouvez ajouter une carte à votre compte Google Pay ou à Cartes pour Safari.
Fournir votre application via HTTPS. Cette exigence s’applique à la fois en développement et en production. Vous pouvez également utiliser un service comme ngrok.
Enregistrez et vérifiez votre domaine en mode test et en mode production.
Créez un compte d’environnement de test PayPal pour tester votre intégration.

Configurer Stripe
Côté serveur

Tout d’abord, créez un compte Stripe ou connectez-vous.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

Activer des moyens de paiement

Par défaut, Stripe utilise vos paramètres des moyens de paiement pour déterminer quels moyens de paiement sont activés dans le composant Express Checkout Element.

Pour modifier manuellement les moyens de paiement activés, dressez la liste de ceux que vous souhaitez activer à l’aide de l’attribut payment_method_types.

Si vous collectez des paiements avant de créer un intent, répertoriez les moyens de paiement dans l’attribut paymentMethodTypes de vos options Elements provider.
Si vous créez un intent avant d’afficher des composants Elements, répertoriez les moyens de paiement dans l’attribut payment_method_types de votre intent.

Moyens de paiement pris en charge

Apple Pay et Google Pay sont automatiquement activés lorsque vous utilisez le type de moyen de paiement card. Lors de l’utilisation de Link, vous devez également transmettre le type de moyen de paiement card.

Nom du moyen de paiement	Paramètres de l’API Payment Method
Apple Pay	`card`
Google Pay	`card`
Lien	`link, card`
PayPal	`paypal`
Amazon Pay	`amazon_pay`

Configurer Stripe Elements
Côté client

L’Express Checkout Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Incluez le script Stripe.js en l’ajoutant entre les balises head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot, ni en héberger de copie.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement :

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Créez ensuite une instance d’Elements avec un mode (paiement, configuration ou abonnement), un montant et une devise. Ces valeurs déterminent les moyens de paiement qui seront présentés à votre client. Reportez-vous à l’étape suivante pour découvrir davantage d’options d’Elements.

checkout.js
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Customizable by using the Appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form.
const elements = stripe.elements(options);

FacultatifAdditional Elements options
Côté client

Créer et intégrer l'Express Checkout Element
Côté client

L’Express Checkout Element contient une balise iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit également commencer par https:// et non http://.

L’Express Checkout Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide avec un ID unique dans votre formulaire de paiement.

checkout.html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>

Une fois le formulaire chargé, créez une instance de l’Express Checkout Element et intégrez-la au nœud DOM du conteneur :

checkout.js
// Create and mount the Express Checkout Element
const expressCheckoutElement = elements.create('expressCheckout');
expressCheckoutElement.mount('#express-checkout-element');

FacultatifÉcouter l'événement ready
Côté client

FacultatifContrôle de l'affichage des boutons de paiement
Côté client

FacultatifStyliser le bouton
Côté client

Collecter les informations des clients et afficher des postes de facture
Côté client

Gérez l’événement de clic pour transmettre les options à l’Express Checkout Element. Après avoir reçu l’événement de clic, désactivez l’interaction sur votre page de paiement.

Collecter les informations du payeur

Définissez emailRequired: true pour collecter les adresses e-mail et phoneNumberRequired: true pour collecter les numéros de téléphone. Par défaut, billingAddressRequired est défini sur true.

checkout.js
expressCheckoutElement.on('click', (event) => {
  const options = {
    emailRequired: true,
    phoneNumberRequired: true
  };
  event.resolve(options);
});

When using PayPal with the Express Checkout Element, Stripe typically only receives and exposes the country from the billing address. Because of how PayPal shares information with third-party payment processors, the confirm event payload might show billingDetails[address] fields as empty strings, except for the country field.

Collecter les informations de livraison

Définissez shippingAddressRequired: true et transmettez un tableau de shippingRates.

checkout.js
expressCheckoutElement.on('click', (event) => {
  const options = {
    shippingAddressRequired: true,
    allowedShippingCountries: ['US'],
    shippingRates: [
      {
        id: 'free-shipping',
        displayName: 'Free shipping',
        amount: 0,
        deliveryEstimate: {
         maximum: {unit: 'day', value: 7},
         minimum: {unit: 'day', value: 5}
        }
      },
    ]
  };
  event.resolve(options);
});

Écoutez l’événement shippingaddresschange pour détecter lorsqu’un client sélectionne une adresse de livraison. Vous devez appeler resolve ou reject si vous choisissez de gérer cet événement.

checkout.js
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: event.address
    })
  });
  const result = await response.json();
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});

Écoutez l’événement shippingratechange pour détecter lorsqu’un client sélectionne un tarif de livraison. Vous devez appeler resolve ou reject si vous choisissez de gérer cet événement.

checkout.js
expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: event.shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});

Écoutez l’événement cancel pour détecter si un client quitte l’interface de paiement. Réinitialisez le montant au montant initial.

checkout.js
expressCheckoutElement.on('cancel', () => {
  elements.update({amount: 1099})
});

Afficher les postes de facture

Transmettez un tableau de lineItems :

checkout.js
expressCheckoutElement.on('click', (event) => {
  const options = {
    lineItems: [
      {
        name: 'Sample item',
        amount: 1000
      },
      {
        name: 'Tax',
        amount: 100
      },
      {
        name: 'Shipping cost',
        amount: 1000
      }
    ]
  };
  event.resolve(options);
});

Configurer l'interface Apple Pay

Découvrez comment configurer l’interface Apple Pay.

Transactions initiées par le marchand (MIT)

Vous pouvez configurer les paiements récurrents, les paiements différés ou les paiements par rechargement automatique lorsqu’un utilisateur effectue un paiement avec Apple Pay en demandant le type de token de marchand concerné dans l’événement click d’Express Checkout Element. Nous vous recommandons d’implémenter les tokens de marchand Apple Pay pour vous aligner sur les dernières directives d’Apple Pay et pour pérenniser votre intégration.

FacultatifCréer un ConfirmationToken
Côté client

Créer un PaymentIntent
Côté serveur

Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet PaymentIntent, qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus.

Créez un PaymentIntent sur votre serveur avec un montant et une devise. Ces informations doivent correspondre à celles définies sur l’instance stripe.elements à l’étape 3. Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela empêchera les clients malintentionnés de fixer leurs propres tarifs.

Le PaymentIntent renvoyé inclut une clé secrète à utiliser côté client pour mener à bien le processus de paiement en toute sécurité, plutôt que de transmettre l’objet PaymentIntent dans son intégralité. Vous pouvez utiliser différentes approches pour transmettre cette clé secrète côté client.

Envoyer le paiement à Stripe
Côté client

Utilisez stripe.confirmPayment pour finaliser le paiement à l’aide des informations de l’Express Checkout Element.

Note

Pour Amazon Pay et PayPal, le montant que vous confirmez dans le PaymentIntent doit correspondre au montant que l’acheteur a préautorisé. Si les montants ne correspondent pas, le paiement est refusé.

Fournissez une return_url à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur une fois le paiement effectué. Votre utilisateur peut être redirigé vers un site intermédiaire avant d’être redirigé vers la return_url. Payments redirige immédiatement l’utilisateur vers la return_url lorsqu’un paiement aboutit.

Si vous ne souhaitez pas effectuer de redirection une fois le paiement effectué, vous pouvez définir la redirection sur if_required. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

checkout.js
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch('/create-intent', {
    method: 'POST',
  });
  const {client_secret: clientSecret} = await res.json();

  const {error} = await stripe.confirmPayment({
    // `elements` instance used to create the Express Checkout Element
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});

Tester l'intégration

Avant de passer en mode production, testez l’intégration de chaque moyen de paiement. Pour déterminer la compatibilité d’un moyen de paiement avec un navigateur, consultez les navigateurs pris en charge. Si vous utilisez Express Checkout Element dans un iframe, l’attribut allow de cet iframe doit être défini sur payment *.

Mise en garde

N’enregistrez pas de données utilisateur réelles sur des comptes Link en mode test. En effet, ces données sont à considérer comme publiques étant donné que vos comptes test sont associés à votre clé publiable.

À l’heure actuelle, Link fonctionne uniquement pour les cartes de crédit, les cartes de débit et les achats admissibles effectués via un compte bancaire américain. Link nécessite un enregistrement de domaine.

Vous pouvez créer des comptes en mode test pour Link à l’aide d’une adresse e-mail valide. Le tableau suivant répertorie les codes à usage unique acceptés par Stripe pour l’authentification des comptes en mode test :

Valeur	Résultat
Tout autre ensemble de 6 chiffres non listé ci-dessous	Opération réussie
000001	Erreur, code non valide
000002	Erreur, code expiré
000003	Erreur, nombre maximal de tentatives dépassé

FacultatifUtilisez l'Express Checkout Element avec Stripe Connect

Mentionner le fonctionnement de Stripe à vos clients

Stripe recueille des informations sur les interactions des clients avec Elements afin de vous fournir des services, de prévenir la fraude et d’améliorer ses services. Cela inclut l’utilisation de cookies et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une même session Checkout. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour que Stripe puisse utiliser les données à cette fin. Pour en savoir plus, visitez notre Centre de confidentialité.

Accepter un paiement avec Express Checkout Element

Utilisez une seule intégration pour accepter les paiements par le biais de boutons de paiement en un clic.

Bêta

Avant de commencer

Configurer StripeCôté serveur

Activer des moyens de paiement

Moyens de paiement pris en charge

Configurer Stripe ElementsCôté client

FacultatifAdditional Elements optionsCôté client

Créer et intégrer l'Express Checkout ElementCôté client

FacultatifÉcouter l'événement readyCôté client

FacultatifContrôle de l'affichage des boutons de paiementCôté client

FacultatifStyliser le boutonCôté client

Collecter les informations des clients et afficher des postes de factureCôté client