Enregistrer un mandat pour les futurs paiements PayToSur invitation uniquement

Comment collecter un paiement PayTo et autoriser de futurs paiements.

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, où vous recevez une notification différée de l’échec ou de la réussite du paiement.

La configuration d’un contrat PayTo pour les paiements futurs vous permet d’encaisser les futurs paiement récurrents sans avoir à demander à nouveau l’autorisation du client. 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.

Afin d’accepter les paiements PayTo, créez un objet PaymentIntent pour suivre un paiement, collecter les informations de paiement, puis soumettre le paiement à Stripe pour traitement. Stripe utilise le PaymentIntent pour suivre et gérer tous les états du paiement jusqu’à ce qu’il aboutisse. Utilisez l’ID du Mandat collecté à partir de votre PaymentIntent PayTo initial pour créer des paiements ultérieurs.

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.

If you want to continue manually configuring the payment methods you present to your customers with Checkout, use this guide. Otherwise, update your integration to configure payment methods in the 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 PaymentIntent
Côté serveur

Créez un PaymentIntent sur votre serveur et précisez le montant à encaisser et la devise dans les paramètres amount et aud, l’ID du client, et le paramètre off_session (hors session) comme argument pour la configuration de l’utilisation future. Le montant minimal de paiement est de 0,50 AUD, et PayTo ne prend pas en charge d’autres devises. Si vous avez déjà une intégration API Payment Intents, ajoutez payto à la liste des types de moyens de paiement.

Vous pouvez indiquer les conditions de l’accord que vous souhaitez que votre client accepte dans les options du moyen de paiement PayTo.

Erreur fréquente

Le montant (amount) des options de moyen de paiement doit correspondre au champ amount du PaymentIntent, sauf si vous définissez l’attribut amount_type sur maximum. Dans ce cas, vous pouvez définir une valeur de moyens de paiement supérieure au PaymentIntent.

L’exemple de code suivant indique un montant de PaymentIntent de 10 AUD, et un montant de 1500 AUD pour les options de moyen de paiement, car le type de montant amount_type est maximum.

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.

Bêta

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 PaymentIntent 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 le paiement
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.confirmPayment pour finaliser le paiement à l’aide des informations du composant Payment Element. Cela envoie une demande d’autorisation au client.

Note

L’exécution de la méthode stripe.confirmPayment 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, paymentIntent} = await stripe.confirmPayment({
    //`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 payment. 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
    // payment fails asynchronously.
    switch (paymentIntent.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 again
        break;

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

Débiter ultérieurement le moyen de paiement PayTo

Lorsque vous devez facturer à nouveau votre client, créez un nouveau PaymentIntent. Pour trouver l’ID du mandat, l’ID du client et l’ID du moyen de paiement, récupérez le PaymentIntent précédent et développez le champ latest_charge.

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

{
  // ...
  "customer": "cus_PW6rQWRGAaBD7z", // <---- Here's the customer
  "latest_charge": {
    "payment_method": "pm_1Ok4l9A8DuEjWaGwhB4SGrWh", // <---- Here's the payment method
    "payment_method_details": {
      "payto": {
        "bsb_number": null,
        "last4": null,
        "mandate": "mandate_1Ok4lVA8DuEjWaGwu0uTwI94", // <----- Here's the mandate
        "pay_id": "jenny@example.com"
      },
      "type": "payto"
    },
  },
  "payment_method_types": [
    "payto"
  ],
  // ...
}

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.

Enregistrer un mandat pour les futurs paiements PayToSur invitation uniquement

Comment collecter un paiement PayTo et autoriser de futurs paiements.

Mise en garde

Mise en garde

Configurer StripeCôté serveur

Créer un objet CustomerCôté serveur

Créer un PaymentIntentCôté serveur

Erreur fréquente

Bêta

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

Collecter les informations de paiement et envoyer le paiementCôté client

Configurer Stripe.js

Ajouter le Payment Element à votre page de paiement

Note

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 PaymentIntent
Côté serveur

Collecter les informations de paiement et envoyer le paiement
Côté client