Mise en place de paiements PayTo futursSur invitation uniquement

Comment configurer des paiements PayTo futurs.

PayTo permet aux clients australiens d’authentifier les accords de paiements PayTo ponctuels et récurrents dans leur application bancaire. Pour payer avec PayTo, les clients reçoivent une notification d’accord en attente, donnent leur autorisation après lecture des termes de l’accord, puis retournent à votre application.

La configuration d’un contrat PayTo pour les paiements futurs vous permet d’obtenir l’autorisation du client pour encaisser les futurs paiements. Les clients peuvent consulter, gérer, suspendre et annuler leurs contrats PayTo dans leurs applications bancaires.

Mise en garde

Stripe ne prend pas en charge la modification ou la suspension des accords PayTo par les clients. Si un client tente de suspendre ou de modifier un accord, nous annulons cet accord et vous envoyons un webhook mandate.updated. Après réception du webhook, vous pouvez contacter votre client pour savoir pourquoi il a modifié son accord, ainsi que pour en configurer un nouveau.

Mise en garde

Stripe propose automatiquement à vos clients des options de moyens de paiement selon leur devise, les restrictions sur les moyens de paiement et d’autres paramètres. Nous vous recommandons de configurer vos moyens de paiement à partir du Dashboard Stripe en suivant les instructions indiquées dans Accepter un paiement.

Si vous souhaitez continuer à configurer manuellement les moyens de paiement proposés à vos clients avec Checkout, utilisez ce guide. Sinon, mettez à jour votre intégration pour configurer les moyens de paiement dans le Dashboard.

Configurer Stripe
Côté serveur

Pour commencer, vous devez créer un compte Stripe. S’inscrire.

Pour accéder à l’API Stripe depuis votre application, utilisez nos bibliothèques officielles :

Créer un objet Customer
Côté serveur

Créez un objet Customer dès qu’un client crée un compte auprès de votre entreprise et associez-le à votre représentation interne de son compte. Vous pourrez ainsi récupérer et utiliser ultérieurement les informations enregistrées sur son moyen de paiement.

Créer un SetupIntent
Côté serveur

Un SetupIntent est un objet qui représente votre intention d’encaisser un futur paiement auprès d’un client, et qui suit le processus d’autorisation. Pour créer un SetupIntent qui accepte le moyen de paiement PayTo, indiquez les conditions de l’accord et payto dans la liste payment_method_types. Si vous gérez une liste de moyens de paiement que vous transmettez lors de la création d’un SetupIntent, ajoutez-y payto.

Précisez les conditions de l’accord que vous souhaitez que votre client accepte en utilisant les options de moyen de paiement.

Stripe prend en charge différents types d’accords, avec des contrôles du montant, de la durée, de la cadence et de l’objet de l’accord. Indiquez les conditions de l’accord qui correspondent précisément à vos besoins. Étant donné que vos clients voient ces conditions au moment de l’autorisation, les détailler peut améliorer votre taux de conversion.

L’objet de l’accord (purpose) par défaut est la vente au détail (retail). Remplacez ce champ par l’une des valeurs valides si retail ne correspond pas à l’objet de l’accord.

Récupérer la clé secrète du client

Le SetupIntent contient une clé secrète à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.

Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction fetch du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client :

Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client :

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Collecter les informations de paiement et envoyer la demande d'autorisation
Côté client

Collectez les informations de paiement du client avec le Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par https:// et non par http://. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’activer lorsque vous souhaitez commencer à accepter des paiements réels.

Configurer Stripe.js

Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans une offre groupée ni en héberger de copie.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement :

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  betas: 'payto_pm_beta_1',
});

Ajouter le Payment Element à votre page de paiement

Le composant Element Payment doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement :

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Lors du chargement du formulaire précédent, créez une instance du composant Payment Element et intégrez-la au nœud DOM conteneur. Lorsque vous créez l’instance Elements, transmettez la clé secrète du client définie à l’étape précédente dans les options :

Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

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

Utilisez stripe.confirmSetup pour finaliser la configuration à l’aide des informations du composant Payment Element. Cela envoie une demande d’autorisation au client.

Remarque

L’exécution de la méthode stripe.confirmSetup peut prendre plusieurs secondes, le temps que le client autorise le paiement. Pendant ce temps, bloquez le renvoi de votre formulaire et affichez un indicateur d’attente. Si vous recevez une erreur, montrez-la au client, réactivez le formulaire et masquez l’indicateur d’attente.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error, setupIntent} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    redirect: 'if_required',
    confirmParams: {
      mandate_data: {
      customer_acceptance: {
          type: 'online',
          online: {
            infer_from_client: true,
          },
        },
      }
    }
  });

  const message = document.querySelector('#message')
  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the SetupIntent. Show error to your customer (for example, payment
    // details incomplete)
    message.innerText = error.message;
  } else {
    // This will execute if the confirm request is successful, or if the
    // setup fails asynchronously.
    switch (setupIntent.status) {
      case 'succeeded':
        message.innerText = 'Success! Payment received.';
        break;

      case 'processing':
        message.innerText = "Payment processing. We'll update you when payment is received.";
        break;

      case 'requires_payment_method':
        message.innerText = 'Payment failed. Please try another payment method.';
        // Redirect your user back to your payment page to attempt collecting
        // payment details again
        break;

      default:
        message.innerText = 'Something went wrong.';
        break;
    }
  }
});

Débiter ultérieurement le moyen de paiement PayTo

Lorsque vous devez débiter votre client, créez un nouveau PaymentIntent. Trouvez l’ID du mandat, l’ID du client et l’ID du moyen de paiement en récupérant le SetupIntent précédent.

Consultez les ID voulus dans la réponse ci-dessous.

{
  // ...
  "customer": "cus_PW6rQWRGAaBD7z",  // <---- Here is the customer
  "mandate": "mandate_1Ok6ZrA8DuEjWaGw2nrO9xeS", // <---- Here is the mandate
  "metadata": {},
  "next_action": null,
  "on_behalf_of": null,
  "payment_method": "pm_1Ok4l9A8DuEjWaGwhB4SGrWh", // <---- Here is the payment method
  "payment_method_configuration_details": null,
  "payment_method_options": {
    "payto": {
      "mandate_options": {
        "amount": 150000,
        "amount_type": "maximum",
        "start_date": "2026-12-25",
        "end_date": "2036-12-25",
        "payment_schedule": "annual",
        "payments_per_period": 13,
        "purpose": "mortgage",
      }
    }
  },
  "payment_method_types": [
    "payto"
  ],
  "single_use_mandate": null,
  "status": "succeeded",
  "usage": "off_session"
  // ...
}

Créez un PaymentIntent en indiquant l’ID du moyen de paiement, l’ID du mandat et l’ID du client.

Tester votre intégration

Testez votre intégration PayTo avec vos clés API de test en utilisant les différents PayID de test et les coordonnées bancaires ci-dessous. Chaque combinaison donne lieu à un scénario différent auquel votre intégration pourrait être confrontée en mode production.

PayID	Description

`{any_prefix}+succeed@{any_domain}`	L’état du PaymentIntent passe de `requires_action` à `processing` au bout de 60 secondes, puis à `succeeded` après 2 secondes supplémentaires. Le mandat passe alors à l’état `active`.
`{any_prefix}+decline@{any_domain}`	L’état du PaymentIntent passe de `requires_action` à `requires_payment_method` au bout de 60 secondes. Stripe renvoie le code d’erreur `payment_method_provider_decline` avec le code de refus de paiement `invalid_authorization`. Le mandat passe alors à l’état `inactive`.
`{any_prefix}+expire@{any_domain}`	L’état du PaymentIntent passe de `requires_action` à `requires_payment_method` au bout de 5 minutes. Stripe renvoie le code d’erreur `payment_method_provider_decline` avec le code de refus de paiement `generic_decline`. Le mandat passe alors à l’état `inactive`.
`{any_prefix}+insufficient_funds@{any_domain}`	L’état du PaymentIntent passe de `requires_action` à `processing` au bout de 60 secondes, puis à `requires_payment_method` après 2 secondes supplémentaires. Stripe renvoie le code d’erreur `payment_method_provider_decline` avec le code de refus de paiement `insufficient_funds`. Le mandat passe alors à l’état `inactive`.
`{any_prefix}+revoke@{any_domain}`	L’état du PaymentIntent passe de `requires_action` à `processing` au bout de 60 secondes, puis à `succeeded` après 2 secondes supplémentaires. Le mandat est d’abord à l’état `active` puis passe à l’état `inactive` au bout de 5 minutes.

Mise en place de paiements PayTo futursSur invitation uniquement

Comment configurer des paiements PayTo futurs.

Mise en garde

Mise en garde

Configurer StripeCôté serveur

Créer un objet CustomerCôté serveur

Créer un SetupIntentCôté serveur

Récupérer la clé secrète du client

Collecter les informations de paiement et envoyer la demande d'autorisationCôté client

Configurer Stripe.js

Ajouter le Payment Element à votre page de paiement

Remarque

Débiter ultérieurement le moyen de paiement PayTo

Tester votre intégration

FacultatifGérer les événements post-paiement

Configurer Stripe
Côté serveur

Créer un objet Customer
Côté serveur

Créer un SetupIntent
Côté serveur

Collecter les informations de paiement et envoyer la demande d'autorisation
Côté client