Paiements PayToSur invitation uniquement

Découvrez PayTo, un nouveau moyen de paiement en temps réel en Australie.

PayTo est un moyen de paiement en temps réel australien permettant d’accepter des paiements ponctuels et récurrents. Lors d’un paiement PayTo, les clients s’authentifient et approuvent les contrats à l’aide de leur application bancaire mobile.

Vous recevez une notification différée indiquant si le paiement a abouti ou échoué. Stripe vous notifie généralement de l’état final du paiement dans les 30 secondes suivant l’autorisation de l’accord.

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

A PaymentIntent is an object that represents your intent to collect a payment from a customer and tracks the payment process. To create a PaymentIntent that accepts a PayTo payment method, specify the amount to collect, aud as the currency, and payto in the payment_method_types list. If you maintain a list of payment method types that you pass when creating a PaymentIntent, add payto to it.

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
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');

Envoyer le paiement à Stripe
Côté client

Utilisez stripe.confirmPayment pour finaliser le paiement à 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.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',
  });

  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;
    }
  }
});

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.
`{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`.
`{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_timeout` avec le code de refus de paiement `generic_decline`.
`{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`.