Collecter les informations de paiement avant de créer un Intent

Vous pouvez adapter la mise en page du composant Payment Element (en accordéon ou en onglets) à votre interface de paiement. Pour plus d’informations sur chacune des propriétés, consultez la section elements.create.

const paymentElement = elements.create('payment', {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: true,
    spacedAccordionItems: false
  }
});

L’image suivante illustre différents affichages du même composant Element Payment correspondant à différentes configurations de mise en page :

Mise en page du composant Element Payment

Maintenant que vous avez ajouté le composant Payment Element à votre page, vous pouvez personnaliser son apparence pour l’adapter à votre design. Pour en savoir plus sur la personnalisation de ce composant, consultez la page dédiée à l’API Elements Appearance.

Personnaliser le Payment Element

Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la fonctionnalité d’enregistrement des moyens de paiement, qui permet à Payment Element de :

• De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré
• Enregistrer les moyens de paiement lorsque les clients y consentent
• Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats
• Mise à jour automatique des cartes perdues ou expirées lorsque les clients les remplacent

Enregistrez les moyens de paiement.

Réutilisez un moyen de paiement précédemment enregistré.

Activer l’enregistrement du moyen de paiement dans le composant Payment Element

Créez une session CustomerSession sur votre serveur en fournissant un ID d’objet Customer et en activant le composant payment_element pour votre session. Configurez les fonctionnalités des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de payment_method_save vous permet d’afficher une case à cocher invitant les clients à enregistrer leurs informations de paiement pour une utilisation ultérieure.

Vous pouvez spécifier setup_future_usage sur un PaymentIntent ou une session Checkout pour remplacer le comportement par défaut à l’enregistrement d’un moyen de paiement. Ainsi, vous enregistrez automatiquement le moyen de paiement en vue d’une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer.

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'

post '/create-customer-session' do
  customer_session = Stripe::CustomerSession.create({
    customer: 
{{CUSTOMER_ID}},
    components: {
        payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
      },
  })
  {
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end

Votre instance Elements utilise la clé secrète du client de la session Client pour accéder aux moyens de paiement enregistrés de ce client. Gérez les erreurs correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative.

Créez l’instance Elements à l’aide de la clé secrète du client de la session Client. Ensuite, utilisez l’instance Elements pour créer un Payment Element.

// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Lors de la confirmation du PaymentIntent, Stripe.js contrôle automatiquement le paramètre setup_future_usage sur le PaymentIntent et le paramètre allow_redisplay sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement.

Exiger la collecte du CVC

Vous pouvez également spécifier require_cvc_recollection à la fois lors de la création du PaymentIntent et lors de la création d’Elements pour appliquer la collecte du CVC lorsqu’un client paie par carte.

Détecter la sélection d’un moyen de paiement enregistré

Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement change du composant Element Payment, qui contient le moyen de paiement sélectionné.

paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})

Lorsque le client effectue des actions qui modifient les informations du paiement (par exemple s’il applique un code de réduction), mettez à jour l’instance d’Elements afin de prendre en compte les nouvelles valeurs. Certains moyens de paiement, comme Apple Pay et Google Pay, affichent le montant dans l’interface utilisateur, vous devez donc veiller à ce que celui-ci soit toujours exact et à jour.

async function handleDiscountCode(code) {
  // On the server, validate that the discount code is valid and return the new amount
  const {newAmount} = await fetch("/apply-discount", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({code}),
    });
  elements.update({amount: newAmount});
}

L’objet Elements accepte des options supplémentaires qui ont une incidence sur l’encaissement des paiements. En fonction des options proposées, le Payment Element affiche les moyens de paiement disponibles parmi ceux que vous avez activés. En savoir plus sur la prise en charge des moyens de paiement.

Si vous souhaitez créer un tunnel de paiement sur plusieurs pages ou collecter des informations de moyen de paiement avant d’effectuer des validations supplémentaires, consultez la section Créer un tunnel de paiement en deux étapes. Grâce à ce tunnel, vous pouvez créer un ConfirmationToken côté client afin de recueillir les informations de paiement, puis utiliser celui-ci pour créer un PaymentIntent côté serveur.

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez le Dashboard, un webhook personnalisé ou une solution partenaire 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 workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les différences entre les différents moyens de paiement pris en charge.

• Gérer les événements manuellement dans le Dashboard

  Utilisez le Dashboard pour afficher vos paiements de test dans le Dashboard, envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.

• Créer un webhook personnalisé

  Créez un gestionnaire de webhook personnalisé pour écouter les événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhook localement avec la CLI Stripe.

• Intégrer une application prédéfinie

  Gérez les événements commerciaux courants, tels que l’automatisation ou le marketing et les ventes, en intégrant une application partenaire.