Ajouter des boutons de paiement en un clic

Le composant Express Checkout Element vous permet, via une seule intégration, d’accepter des paiements en un clic à l’aide de boutons de paiement. Les moyens de paiement suivants sont pris en charge : Link, Apple Pay et Google Pay.

Essayer la démonstration

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émonstration ne s’affiche pas, essayez d’ouvrir la page dans un navigateur pris en charge.

Conditions préalables

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 à votre portefeuille pour Safari.
• Fournissez votre application via HTTPS. Cette exigence s’applique à la fois en développement et en production Vous pouvez utiliser un service comme ngrok.
• Enregistrez et vérifiez votre domaine en mode test et en mode production.

Gérer les paiements en un clic

L’Express Checkout Element émet l’événement de confirmation lorsque votre client finalise son paiement. Créez un gestionnaire qui répond à l’événement en appelant confirm et transmettez-le à l’Express Checkout Element.

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

• expressPaymentType : L’une des options suivantes : 'apple_pay', 'google_pay' ou 'link'.
• billingDetails : Objet contenant des informations sur 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 d’expédition sélectionné.

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

const CheckoutForm = () => {
  const checkout = useCheckout();
  const handleConfirmExpressCheckout = (event) => {
    checkout.confirm({expressCheckoutConfirmEvent: event})
  };
  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 celle de Checkout ont toutes deux une incidence sur la disponibilité des moyens de paiement dans Express Checkout Element. Par défaut, il affiche tous les moyens de paiement disponibles en fonction des deux configurations. Si vous définissez l’option paymentMethods, Express Checkout Element fusionne les options que vous avez spécifiées avec la logique par défaut pour déterminer l’ensemble final de moyens de paiement affichés.