Migrer vers l'Express Checkout Element

Activez les moyens de paiement que vous souhaitez prendre en charge dans vos paramètres des moyens de paiement. Vous devez activer au moins un moyen de paiement.

Par défaut, Stripe active les cartes bancaires et autres moyens de paiement courants. Vous pouvez activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page Prise en charge des moyens de paiement pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre page tarifaire pour prendre connaissance des frais que nous appliquons.

Ensuite, mettez à jour votre code côté client pour transmettre le mode (paiement), le montant et la devise. Ces valeurs déterminent les moyens de paiement à présenter à vos clients.

Par exemple, si vous transmettez la devise eur dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, votre client ne verra pas OXXO, car OXXO ne prend pas en charge les paiements libellés en eur.

Pour déterminer la liste des moyens de paiement pris en charge, Stripe prend en compte la devise, les restrictions liées aux moyens de paiement ainsi que d’autres paramètres. Nous priorisons les moyens de paiement susceptibles d’accroître le taux de conversion et qui sont les plus pertinents en fonction de la devise et de la localisation du client.

const stripe =
    Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
};
const elements = stripe.elements(options);

Le PaymentIntent inclut les moyens de paiement présentés aux clients lors du paiement. Vous pouvez gérer les moyens de paiement depuis le Dashboard. Stripe gère l’affichage des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -H "Stripe-Version: 2024-11-20.acacia" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "automatic_payment_methods[enabled]"=true \

Si votre intégration existante prend en charge plusieurs moyens de paiement ou si vous souhaitez accepter d’autres moyens de paiement que la carte bancaire, vous pouvez activer d’autres moyens de paiement dans le Dashboard.

Remplacez le Payment Request Button Element par l’Express Checkout Element. Les exemples ci-dessous montrent comment remplacer PaymentRequestButtonElement par ExpressCheckoutElement.

Vous n’avez plus besoin de créer un objet paymentRequest. À la place, transmettez une seule fois les propriétés via l’événement click.

<div id="payment-request-button">
</div>

<div id="express-checkout-element">
  <!-- Mount the Express Checkout Element here -->
</div>

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1099,
  },
  requestPayerName: true,
  requestPayerEmail: true,
});
const paymentRequestButton = elements.create('paymentRequestButton', {
  paymentRequest: paymentRequest,
});
paymentRequestButton.mount("#payment-request-button");
paymentRequest.canMakePayment().then(function(result) {
  if (result) {
    prButton.mount('#payment-request-button');
  } else {
    document.getElementById('payment-request-button').style.display = 'none';
  }
});

const expressCheckoutElement = elements.create("expressCheckout");
expressCheckoutElement.mount("#express-checkout-element");
expressCheckoutElement.on('click', (event) => {
  const options = {
    emailRequired: true
  };
  event.resolve(options);
});

Écoutez l’événement confirm pour gérer la confirmation. Pour collecter les informations de paiement et les envoyer à Stripe, utilisez stripe.confirmPayment au lieu des méthodes de confirmation individuelles comme stripe.confirmCardPayment.

Plutôt que d’utiliser un ID de PaymentMethod, stripe.confirmPayment utilise l’instance Elements de l’Express Checkout Element et la clé secrète du client du PaymentIntent créé.

Lorsqu’il est appelé, le paramètre stripe.confirmPayment tente d’effectuer toutes les actions requises, comme authentifier vos clients en affichant une boîte de dialogue 3DS ou en les redirigeant vers une page d’autorisation bancaire. Une fois la confirmation effectuée, les utilisateurs sont redirigés vers la return_url que vous avez configurée, c’est-à-dire une page de votre site Web indiquant l’état du paiement.

Si vous souhaitez que le tunnel de paiement par carte bancaire redirige vos clients uniquement pour les moyens de paiement qui l’exigent, vous pouvez définir la redirection sur if_required. Cela ne s’applique pas à l’Express Checkout Element.

L’exemple ci-dessous remplace stripe.confirmCardPayment par stripe.confirmPayment.

paymentRequest.on('paymentmethod', function(ev) {
  stripe.confirmCardPayment(
    '{{CLIENT_SECRET}}',
    {payment_method: ev.paymentMethod.id},
    {handleActions: false}
  ).then(function(confirmResult) {
    if (confirmResult.error) {
      ev.complete('fail');
    } else {
      ev.complete('success');
      if (confirmResult.paymentIntent.status === "requires_action") {
        stripe.confirmCardPayment(clientSecret).then(
          function(result) {
            if (result.error) {
              // The payment failed -- ask your customer for a new payment method.
            } else {
              // The payment succeeded.
            }
          }
        );
      } else {
        // The payment succeeded.
      }
    }
  });
});

expressCheckoutElement.on('confirm', async (event) => {
  const {error} = await stripe.confirmPayment({
    // `Elements` instance that's used to create the Express Checkout Element.
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
    // Uncomment below if you only want redirect for redirect-based payments.
    // redirect: 'if_required',
  });

  if (error) {
    // This point is reached only if there's an immediate error when confirming the payment. Show the error to your customer (for example, payment details incomplete).
  } else {
    // Your customer will be redirected to your `return_url`.
  }
});

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez l’outil de webhook du Dashboard ou suivez le guide consacré aux webhooks pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. Côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel. Certains clients malintentionnés peuvent d’autre part tenter de manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter plusieurs types de moyens de paiement avec une seule et même intégration.

En plus de l’événement payment_intent.succeeded, nous vous recommandons de gérer ces autres événements lorsque vous encaissez des paiements à l’aide de l’Element Payment :