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.

The Express Checkout Element is an integration for accepting payments through one-click payment methods buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, Klarna, and 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.

Option	Description
Pays du marchand	Set this using the publishable key that you use to initialize Stripe.js. To change the country, you must unmount the Express Checkout Element, update the publishable key, then re-mount the Express Checkout Element.
Background color	Set colors using the Elements Appearance API. Button themes are inherited from the Appearance API but you can also define them directly when you create the Element.
Desktop and mobile size	Use the dropdown to set the max pixel width of the parent element that the Express Checkout Element is mounted to. You can set it to 750px (Desktop) or 320px (Mobile).
Max columns and max rows	Set these values using the layout parameter when you Create the Express Checkout Element.
Overflow menu	Set this using the layout parameter when you Create the Express Checkout Element.
Collect shipping address	To collect shipping information, you must pass options when creating the Express Checkout Element. Learn more about collecting customer details and displaying line items.

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 votre domaine à la fois dans un environnement de 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`
Klarna	`klarna`

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');

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

Transmettez les options lors de la création de l’Express Checkout Element.

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
elements.create('expressCheckout', {
  emailRequired: true,
  phoneNumberRequired: true
});

Lorsque vous utilisez PayPal avec le composant Express Checkout Element, Stripe ne reçoit et n’expose généralement que le pays de l’adresse de facturation. En raison de la façon dont PayPal partage des informations avec des prestataires de services de paiement tiers, la charge utile de l’événement de confirmation peut afficher les champs billingDetails[address] sous forme de chaînes vides, à l’exception du champ de pays.

Collecter les informations de livraison

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

checkout.js
elements.create('expressCheckout', {
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
});

É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
elements.create('expressCheckout', {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
});

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.

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

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.

Remarque

Pour Amazon Pay, Klarna 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

Don’t store real user data in sandbox Link accounts. Treat them as if they’re publicly available, because these test accounts are associated with your publishable key.

À 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.

You can create sandbox accounts for Link using any valid email address. The following table shows the fixed one-time passcode values that Stripe accepts for authenticating sandbox accounts:

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

Divulguer 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.

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

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