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.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

import React, {useState, useEffect} from 'react';
import {PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const [paymentRequest, setPaymentRequest] = useState(null);

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

  // Use a traditional checkout form.
  return 'Insert your form or button component here.';
}

import React, {useState, useEffect} from 'react';
import {PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const [paymentRequest, setPaymentRequest] = useState(null);

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

      // Check the availability of the Payment Request API.
      pr.canMakePayment().then(result => {
        if (result) {
          setPaymentRequest(pr);
        }
      });
    }
  }, [stripe]);

  if (paymentRequest) {
    return <PaymentRequestButtonElement options={{paymentRequest}} />
  }

  // Use a traditional checkout form.
  return 'Insert your form or button component here.';
}

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 une clé secrète du client que vous utilisez pour finaliser le processus de paiement de manière sécurisée au lieu de transmettre l’intégralité de l’objet PaymentIntent. Envoyez la clé secrète au client en vue de 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.
    }
  }
});

Collecter les informations de livraison

Pour collecter les informations de livraison, commencez par inclure requestShipping: true lors de la création de la demande de 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 le moment où un client sélectionne une adresse de livraison. Utilisez l’adresse pour récupérer des options d’expédition valides sur votre serveur, mettre à jour le total ou exécuter d’autres opérations logiques. Les données d’adresse de l’événement shippingaddresschange peuvent être rendues anonymes par le navigateur afin de ne pas révéler des informations sensibles qui ne sont pas nécessaires au calcul des frais d’expédition.

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

Utilisez displayItems pour afficher les objets PaymentItem et le détail des tarifs dans l’interface de paiement du navigateur.

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

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

Styliser le bouton

Utilisez les paramètres suivants pour personnaliser l’Element :

const options = {
  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%'.
    },
  }
}

<PaymentRequestButtonElement options={options} />

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 bonne pratiques d’Apple Pay et les directives de Google Pay.

Utiliser l’Element Payment Request Button avec Stripe Connect

Les plateformes Connect sont susceptibles de devoir effectuer des étapes supplémentaires pour utiliser le bouton de demande de paiement.

1. Si vous créez des paiements directs ou ajoutez le token à un objet Customer sur le compte connecté, vous devez définir l’option stripeAccount sur l’instance Stripe de votre front-end :

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

2. Si vous avez spécifié on_behalf_of lors de la création du Payment Intent ou Setup Intent, vous devez transmettre la même valeur à l’instance paymentRequest à l’aide de l’option onBehalfOf :

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

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

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

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

Lien vers 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.