Utilisez Stripe Elements, nos composants d’interface préconfigurés, pour créer un formulaire de paiement qui vous permettra de collecter de manière sécurisée les coordonnées bancaires de vos clients en éliminant les manipulations de données client sensibles. Vous pouvez utiliser l’API Setup Intents pour collecter en amont les informations du moyen de paiement par prélèvement automatique BECS et déterminer la date et le montant final d’un paiement ultérieurement. Ceci est utile aux fins suivantes :
Pour commencer, vous devez créer un compte Stripe. Inscrivez-vous maintenant.
Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :
Pour que la réutilisation d’un compte de prélèvement automatique BECS soit possible pour de futurs paiements, celui-ci doit être associé à un objet Customer.
Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. L’association de l’ID de l’objet Customer à votre propre représentation interne d’un client vous permet de récupérer et d’utiliser ultérieurement les informations du moyen de paiement stockées.
Créez ou récupérez un objet Customer afin de l’associer à ce paiement. Pour créer un nouvel objet Customer, ajoutez le code ci-après sur votre serveur.
curl -X POST https://api.stripe.com/v1/customers \
-u "sk_test_4eC39HqLyjWDarjtT1zdp7dc
Un SetupIntent est un objet qui représente votre intention de configurer le moyen de paiement d’un client en vue de paiements ultérieurs. Le SetupIntent suivra les étapes de ce processus de configuration. Dans le cas d’un prélèvement automatique BECS, ces étapes prévoient notamment l’obtention d’un mandat auprès du client et le suivi de sa validité tout au long de son cycle de vie.
Créez un SetupIntent sur votre serveur avec payment_method_types défini sur au_becs_debit et spécifiez l’id :
curl https://api.stripe.com/v1/setup_intents \
-u sk_test_4eC39HqLyjWDarjtT1zdp7dc
Après la création d’un SetupIntent sur votre serveur, vous pouvez associer l’ID du SetupIntent au client de la session active dans le modèle de données de votre application. Vous pourrez ainsi récupérer l’information après avoir collecté un moyen de paiement.
L’objet SetupIntent renvoyé contient une propriété client_secret. Transmettez la clé secrète du client à l’application côté client pour continuer le processus de configuration.
Vous êtes prêt à collecter les informations de paiement sur le client avec Stripe Elements. Elements est un ensemble de composants d’interface utilisateur prédéfinis pour la collecte des informations de paiement.
Un composant Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de règlement doit aussi commencer par https:// au lieu de http://.
Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez-le au moment d’accepter des paiements en mode production.
Configurer Stripe Elements
Stripe Elements est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js sur votre page de paiement, 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 un lot ni en héberger de copie.
Créez une instance d’Elements avec le JavaScript suivant sur votre page de paiement :
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
Demande de prélèvement automatique
Avant de pouvoir procéder à un paiement par prélèvement automatique BECS, votre client doit accepter le contrat de service de demande de prélèvement automatique. Pour ce faire, il doit envoyer une demande de prélèvement remplie. Son approbation vous confère un mandat pour débiter son compte. Le Mandate est un enregistrement de l’autorisation de débiter un moyen de paiement.
Pour l’acceptation des mandats en ligne, vous pouvez créer un formulaire afin de collecter les informations nécessaires. Servez le formulaire via HTTPS et capturez les informations suivantes :
| Informations | Description |
|---|
| Nom du compte | Le nom complet du titulaire du compte |
| Numéro BSB | Le numéro Bank-State-Branch du compte bancaire (par exemple, 123-456) |
| Numéro de compte | Le numéro de compte bancaire (par exemple, 87654321) |
Lorsque vous recevez une demande de prélèvement automatique, suivez nos Conditions d’utilisation des prélèvements automatiques BECS, et, dans votre formulaire de paiement :
- Affichez les conditions précises du Contrat d’utilisation du service de demande de prélèvement automatique de Stripe, soit directement sur le formulaire, soit sur une page dont le lien figure dans le formulaire, sous l’appellation « Contrat d’utilisation du service de demande de prélèvement ».
- Vérifiez que la demande de prélèvement acceptée et le contrat de service de demande prélèvement associé peuvent être partagés avec votre client à tout moment, que ce soit sous forme de document imprimé ou de copie numérique non modifiable (par exemple, par courrier électronique). Stripe l’hébergera pour vous.
- Afficher le texte standard suivant à l’attention de votre client, en remplaçant Rocketship Inc par le nom de votre entreprise, afin de recueillir son consentement à votre demande de prélèvement automatique BECS. Son acceptation vous autorise à initier des paiements par prélèvement automatique BECS sur son compte bancaire.
Note
En fournissant vos coordonnées bancaires, vous acceptez cette demande de prélèvement automatique et le contrat de service de demande de prélèvement automatique. Vous autorisez également Stripe Payments Australia Pty Ltd ACN 160 180 343, numéro d’ID d’utilisateur de prélèvement automatique 507156 (« Stripe ») à débiter votre compte par le biais du Bulk Electronic Clearing System (BECS) pour le compte de Rocketship Inc (le « Marchand ») de tout montant vous ayant été communiqué individuellement par le Marchand. Vous certifiez être le titulaire du compte indiqué ci-dessus ou son signataire autorisé.
Les informations du mandat accepté sont générées lors de la configuration d’un PaymentMethod ou de la confirmation d’un PaymentIntent. Vous devez à tout moment être en mesure de communiquer ce mandat (la demande de prélèvement acceptée et son contrat de service associé) à votre client, que ce soit sous forme de document imprimé ou de copie numérique non modifiable (par exemple, par e-mail). Stripe l’héberge pour vous sous la propriété url de l’objet Mandate lié au PaymentMethod.
Le composant Australia Bank Account Element vous permet de collecter et de valider à la fois le numéro BSB et le numéro de compte du client. Incluez-le dans votre formulaire de paiement en créant des nœuds DOM (conteneurs) vides avec des ID uniques. Par ailleurs, votre client doit lire et accepter les conditions du Contrat d’utilisation du service de demande de prélèvement automatique.
<form action="/setup" method="post" id="setup-form">
<div class="form-row inline">
<div class="col">
<label for="accountholder-name">
Name
</label>
<input
id="accountholder-name"
name="accountholder-name"
placeholder="John Smith"
required
/>
</div>
<div class="col">
<label for="email">
Email Address
</label>
<input
id="email"
name="email"
type="email"
placeholder="john.smith@example.com"
required
/>
</div>
</div>
<div class="form-row">
<label for="au-bank-account-element">
Bank Account
</label>
<div id="au-bank-account-element">
</div>
</div>
<div id="bank-name"></div>
<div id="error-message" role="alert"></div>
<div class="col" id="mandate-acceptance">
By providing your bank account details, you agree to this Direct Debit Request
and the <a href="stripe.com/au-becs-dd-service-agreement/legal">Direct Debit Request service agreement</a>,
and authorise Stripe Payments Australia Pty Ltd ACN 160 180 343
Direct Debit User ID number 507156 (“Stripe”) to debit your account
through the Bulk Electronic Clearing System (BECS) on behalf of
Rocket Rides (the "Merchant") for any amounts separately
communicated to you by the Merchant. You certify that you are either
an account holder or an authorised signatory on the account listed above.
</div>
<button id="submit-button" data-secret="{{CLIENT_SECRET}}">Set up BECS Direct Debit</button>
</form>
Lors du chargement du formulaire, vous pouvez créer une instance du composant Element Australia Bank Account et la monter sur le conteneur Element :
const style = {
base: {
color: '#32325d',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
},
':-webkit-autofill': {
color: '#32325d',
},
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a',
':-webkit-autofill': {
color: '#fa755a',
},
}
};
const options = {
style: style,
disabled: false,
hideIcon: false,
iconStyle: "default",
}
const auBankAccount = elements.create('auBankAccount', options);
auBankAccount.mount('#au-bank-account-element');
Au lieu de transmettre au client l’objet SetupIntent dans son intégralité, utilisez la clé secrète du client de l’étape 3. Cette clé est différente de vos clés API qui servent à authentifier les requêtes envoyées à l’API Stripe.
La clé secrète du client doit être manipulée avec prudence, car elle permet de mettre en œuvre la configuration. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.
Utilisez stripe.confirmAuBecsDebitSetup pour mener à bien la configuration lorsque l’utilisateur envoie le formulaire. Si la configuration réussit, la propriété status du SetupIntent basculera sur succeeded. Si la configuration échoue, inspectez la valeur error renvoyée pour déterminer la cause de l’échec.
Étant donné que le paramètre customer a été défini, le PaymentMethod est associé à l’objet Customer renseigné une fois la configuration réalisée. À ce stade, vous pouvez associer l’ID de l’objet Customer à votre propre représentation interne du client. Vous pourrez ainsi utiliser le PaymentMethod enregistré afin d’encaisser les paiements ultérieurs, sans avoir à réclamer au client les informations de son moyen de paiement.
const form = document.getElementById('setup-form');
const accountholderName = document.getElementById('accountholder-name');
const email = document.getElementById('email');
const submitButton = document.getElementById('submit-button');
const clientSecret = submitButton.dataset.secret;
form.addEventListener('submit', async (event) => {
event.preventDefault();
stripe.confirmAuBecsDebitSetup(
clientSecret,
{
payment_method: {
au_becs_debit: auBankAccount,
billing_details: {
name: accountholderName.value,
email: email.value
}
}
}
);
});
Une fois le SetupIntent confirmé, vous devez partager l’URL du mandat de l’objet Mandate avec votre client. Nous vous recommandons également de communiquer au client les informations suivantes lors de la confirmation de la création de son mandat :
- un message de confirmation explicite indiquant qu’un mandat de prélèvement automatique a été mis en place
- la dénomination sociale qui figurera sur le relevé bancaire du client lorsque son compte sera débité
- le montant et le calendrier des paiements (le cas échéant)
- un lien vers l’URL du mandat généré pour les demandes de prélèvement automatique
Vous pouvez accéder à l’ID de l’objet Mandate dans le champ mandate de l’objet SetupIntent (inclus avec l’événement setup_intent.succeeded envoyé après la confirmation), ou le récupérer via l’API.
curl https://api.stripe.com/v1/setup_intents/{{SETUP_INTENT_ID}} \
-u "sk_test_4eC39HqLyjWDarjtT1zdp7dc
Vous pouvez tester votre formulaire en utilisant le numéro BSB de test 000-000 et l’un des numéros de compte de test ci-dessous dans votre requête confirmAuBecsDebitSetup.
| Numéro BSB | Numéro de compte | Description |
|---|
000-000 | 000123456 | Le PaymentIntent créé avec le PaymentMethod résultant passe de processing à succeeded. L’état du mandat reste active. |
000-000 | 900123456 | Le PaymentIntent créé avec le PaymentMethod résultant passe de processing à succeeded (avec un délai de trois minutes). L’état du mandat reste active. |
000-000 | 111111113 | Le PaymentIntent créé avec le PaymentMethod résultant passe de processing à requires_payment_method avec un code d’échec account_closed. L’état du mandat devient inactive à ce stade. |
000-000 | 111111116 | Le PaymentIntent créé avec le PaymentMethod résultant passe de processing à requires_payment_method avec un code d’échec no_account. L’état du mandat devient inactive à ce stade. |
000-000 | 222222227 | Le PaymentIntent créé avec le PaymentMethod résultant passe de processing à requires_payment_method avec un code d’échec refer_to_customer. L’état du mandat reste active. |
000-000 | 922222227 | Le PaymentIntent créé avec le PaymentMethod résultant passe de processing à requires_payment_method avec un code d’échec refer_to_customer (avec un délai de trois minutes). L’état du mandat reste active. |
000-000 | 333333335 | Le PaymentIntent créé avec le PaymentMethod résultant passe de processing à requires_payment_method avec un code d’échec debit_not_authorized. L’état du mandat devient inactive à ce stade. |
000-000 | 666666660 | Le PaymentIntent créé avec le PaymentMethod résultant passe de processing à succeeded, mais un litige est immédiatement créé. |
000-000 | 343434343 | The PaymentIntent that was created with the resulting PaymentMethod fails with a charge_exceeds_source_limit error due to the payment amount causing the account to exceed its weekly payment volume limit. |
000-000 | 121212121 | The PaymentIntent that was created with the resulting PaymentMethod fails with a charge_exceeds_transaction_limit error due to the payment amount exceeding the account’s transaction volume limit. |