Bouton de demande de paiementObsolète

Le composant Payment Request Button Element affiche de manière dynamique les options de portefeuille lors du paiement, vous offrant une intégration unique pour Apple Pay, Google Pay et Link. Vous pouvez également utiliser le composant Express Checkout Element pour proposer plusieurs boutons de paiement en un clic à vos clients. Comparez les composants Express Checkout Element et Payment Request Button Element.

Les clients voient Apple Pay ou Google Pay si ces moyens de paiement sont activés sur leur appareil, et en fonction du navigateur qu’ils utilisent. Si Link apparaît, c’est peut-être parce que les clients :

• n’ont pas activé Apple Pay ou Google Pay sur leur appareil.
• utilisent Chrome avec des sessions Link actives et authentifiées.

<script src="https://js.stripe.com/v3/"></script>
<div id="payment-request-button">
  <!-- A Stripe Element will be inserted here. -->
</div>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx', {
  apiVersion: "2024-11-20.acacia",
});

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1099,
  },
  requestPayerName: true,
  requestPayerEmail: true,
});

const elements = stripe.elements();
const prButton = elements.create('paymentRequestButton', {
  paymentRequest,
});

(async () => {
  // Check the availability of the Payment Request API first.
  const result = await paymentRequest.canMakePayment();
  if (result) {
    prButton.mount('#payment-request-button');
  } else {
    document.getElementById('payment-request-button').style.display = 'none';
  }
})();

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 vos 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. Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cette précaution empêchera les clients malintentionnés de fixer leurs propres tarifs.

Command Line

cURL

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card

Le PaymentIntent renvoyé contient la clé secrète du client, qui est utilisée pour finaliser le paiement de manière sécurisée au lieu de transmettre la totalité de l’objet PaymentIntent. Renvoyez la clé secrète au client pour pouvoir l’utiliser à l’étape suivante.

paymentRequest.on('paymentmethod', async (ev) => {
  // Confirm the PaymentIntent without handling potential next actions (yet).
  const {paymentIntent, error: confirmError} = await stripe.confirmCardPayment(
    clientSecret,
    {payment_method: ev.paymentMethod.id},
    {handleActions: false}
  );

  if (confirmError) {
    // Report to the browser that the payment failed, prompting it to
    // re-show the payment interface, or show an error message and close
    // the payment interface.
    ev.complete('fail');
  } else {
    // Report to the browser that the confirmation was successful, prompting
    // it to close the browser payment method collection interface.
    ev.complete('success');
    // Check if the PaymentIntent requires any actions and, if so, let Stripe.js
    // handle the flow. If using an API version older than "2019-02-11"
    // instead check for: `paymentIntent.status === "requires_source_action"`.
    if (paymentIntent.status === "requires_action") {
      // Let Stripe.js handle the rest of the payment flow.
      const {error} = await stripe.confirmCardPayment(clientSecret);
      if (error) {
        // The payment failed -- ask your customer for a new payment method.
      } else {
        // The payment has succeeded -- show a success message to your customer.
      }
    } else {
      // The payment has succeeded -- show a success message to your customer.
    }
  }
});

Recueillir les informations de livraison

Pour recueillir les informations de livraison, commencez par inclure l’expression requestShipping: true dans la requête de création du paiement.

Si vos options de livraison sont indépendantes de l’adresse du client, vous pouvez également fournir plusieurs shippingOptions à cette étape.

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1099,
  },

  requestShipping: true,
  // `shippingOptions` is optional at this point:
  shippingOptions: [
    // The first shipping option in this list appears as the default
    // option in the browser payment interface.
    {
      id: 'free-shipping',
      label: 'Free shipping',
      detail: 'Arrives in 5 to 7 days',
      amount: 0,
    },
  ],
});

Ensuite, écoutez l’événement shippingaddresschange pour détecter quand un client sélectionne une adresse de livraison. Utilisez cette adresse pour récupérer les options de livraison valides sur votre serveur, mettre à jour le total de la commande ou exécuter une autre logique métier. Vous pouvez anonymiser les données d’adresse de l’événement shippingaddresschange dans le navigateur afin d’éviter de révéler des informations sensibles qui ne sont pas pertinentes pour le calcul des frais de port.

Pour poursuivre le flux, le client doit fournir une option shippingOptions valide à cette étape.

paymentRequest.on('shippingaddresschange', async (ev) => {
  if (ev.shippingAddress.country !== 'US') {
    ev.updateWith({status: 'invalid_shipping_address'});
  } else {
    // Perform server-side request to fetch shipping options
    const response = await fetch('/calculateShipping', {
      data: JSON.stringify({
        shippingAddress: ev.shippingAddress
      })
    });
    const result = await response.json();

    ev.updateWith({
      status: 'success',
      shippingOptions: result.supportedShippingOptions,
    });
  }
});

Afficher les postes de facture

Use displayItems to display PaymentItem objects and show the price breakdown in the browser’s payment interface.

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 2000,
  },

  displayItems: [
    {
      label: 'Sample item',
      amount: 1000,
    },
    {
      label: 'Shipping cost',
      amount: 1000,
    }
  ],
});

Personnaliser le bouton

Utilisez les paramètres suivants pour personnaliser l’élément :

elements.create('paymentRequestButton', {
  paymentRequest,
  style: {
    paymentRequestButton: {
      type: 'default',
      // One of 'default', 'book', 'buy', or 'donate'
      // Defaults to 'default'

      theme: 'dark',
      // One of 'dark', 'light', or 'light-outline'
      // Defaults to 'dark'

      height: '64px',
      // Defaults to '40px'. The width is always '100%'.
    },
  },
});

Utilisation de votre propre bouton

Si vous souhaitez concevoir votre propre bouton plutôt que d’utiliser le paymentRequestButton Element, vous pouvez afficher un bouton personnalisé en fonction du résultat de paymentRequest.canMakePayment(). Ensuite, utilisez paymentRequest.show() pour afficher l’interface du navigateur au moment du clic.

Si vous choisissez de concevoir votre propre bouton, suivez les bonnes pratiques d’Apple Pay et Google Pay.

Ajouter un jeton marchand Apple Pay pour les transactions initiées par le marchand

Configurez votre bouton de demande de paiement pour demander un MPAN Apple Pay afin de faciliter les transactions initiées par le marchand (MIT) pour les paiements récurrents, différés ou par chargement automatique.

1. Créez une instance de Payment Request.
2. Transmettez l’objet applePay qui correspond à votre cas d’usage MPAN (sélectionnez un des exemples de code de cas d’usage dans la liste déroulante).
3. Incluez les paramètres pertinents pour votre cas d’usage.

const paymentRequest = stripe.paymentRequest({
  applePay: {
    recurringPaymentRequest: {
      paymentDescription: 'My subscription',
      managementURL: 'https://example.com/billing',
      regularBilling: {
        amount: 2500,
        label: 'Monthly subscription fee',
        recurringPaymentIntervalUnit: 'month',
        recurringPaymentIntervalCount: 1,
      },
    },
  },
  // Other options
});

Utiliser l’élément paymentRequestButton avec Stripe Connect

Les plateformes Connect qui créent des paiements directs ou ajoutent le token à un objet Customer sur le compte connecté doivent suivre des étapes supplémentaires pour utiliser le Payment Request Button Element.

1. Sur votre front-end, avant de créer l’instance PaymentRequest, définissez l’option stripeAccount sur l’instance Stripe :

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx', {
  apiVersion: "2024-11-20.acacia",
  stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID',
});

1. Enregistrez tous les domaines sur lesquels vous prévoyez d’afficher le bouton de demande de paiement.

Link pour le bouton de demande de paiement

When new customers come to your site, they can use Link in the Payment Request Button to pay with their saved payment details. With Link, they don’t need to manually enter their payment information. Link requires domain registration.