Ajouter des boutons de paiement en un clicBêta

Dans la démonstration suivante, vous pouvez modifier certaines des options préconfigurées pour changer la couleur du fond, la mise en page, la taille et la collecte des adresses de livraison de l’interface de paiement. Cette démonstration affiche Google Pay et Apple Pay uniquement sur les plateformes disponibles. Les boutons des moyens de paiement ne s’affichent que dans les pays où ils sont pris en charge.

Si la démo ne s’affiche pas, essayez d’ouvrir la page dans un navigateur pris en charge.

Avant de commencer, vous devez :

• Activez Link, Apple Pay ou Google Pay dans le Dashboard.
• 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.

L’Express Checkout Element émet l’événement confirm lorsque le client mène à bien le paiement. Ajoutez un gestionnaire qui répond à l’événement en appelant event.confirm() et transmettez-le à l’Express Checkout Element.

L’événement contient également les champs suivants :

• expressPaymentType : 'apple_pay', 'google_pay' ou 'link'.
• billingDetails : objet contenant les informations de facturation du client.
• shippingAddress : objet contenant des informations sur l’adresse de livraison du client.
• shippingRate : objet contenant des informations sur le tarif de livraison sélectionné.

import {ExpressCheckoutElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const handleConfirmExpressCheckout = (event) => {
    event.confirm();
  };
  return (
    <form>
      <ExpressCheckoutElement onConfirm={handleConfirmExpressCheckout} />
    </form>
  )
};

export default CheckoutForm;

Les options suivantes sont également prises en charge :

• buttonHeight
• buttonTheme
• layout
• paymentMethodOrder
• paymentMethods
  • Remarque : la configuration de votre Dashboard et la configuration de Checkout ont une incidence sur la disponibilité des moyens de paiement dans le composant Elements Express Checkout. Par défaut, tous les moyens de paiement disponibles sont affichés en fonction des deux configurations. Si vous définissez l’option paymentMethods, le composant Express Checkout Element fusionne les options que vous avez spécifiées avec la logique par défaut pour déterminer l’ensemble final des moyens de paiement affichés.