# Configurer un abonnement payé par prélèvement automatique BECS en Australie

Découvrez comment créer et facturer un abonnement par prélèvement automatique BECS.

> Contrairement à ce qui est indiqué dans ce guide, nous recommandons aux nouveaux utilisateurs d’utiliser le composant [Payment Element](https://docs.stripe.com/payments/payment-element.md) plutôt que Stripe Elements. Le composant Payment Element propose un chemin d’intégration avec peu de code et des optimisations de conversion intégrées. Pour connaître la procédure à suivre, consultez la documentation consacrée à la [création d’un abonnement](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md?payment-ui=elements).

Suivez ce guide pour configurer un *abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) avec le [prélèvement automatique BECS](https://docs.stripe.com/payments/au-becs-debit.md) comme moyen de paiement.

## Créer un produit et un tarif [Dashboard]

Les [produits](https://docs.stripe.com/api/products.md) correspondent aux articles ou services que vous vendez. Les [tarifs](https://docs.stripe.com/api/prices.md) définissent le montant et la fréquence des paiements facturés pour un produit. Le tarif prend en compte la valeur du produit, la devise que vous acceptez et s’il s’agit d’un paiement ponctuel ou récurrent. Si vous n’avez que quelques produits et tarifs, créez-les et gérez-les dans le Dashboard.

Ce guide prend comme exemple un service de banque d’images qui débite ses clients d’un montant de 15 AUD pour un abonnement mensuel. Pour modéliser ceci :

1. Go to the [Products](https://dashboard.stripe.com/products?active=true) page and click **Create product**.
1. Saisissez un **Nom** pour le produit. Vous pouvez éventuellement ajouter une **Description** et télécharger une image du produit.
1. Select a **Product tax code**. Learn more about [product tax codes](https://docs.stripe.com/tax/tax-codes.md).
1. Sélectionnez **Récurrent**. Saisissez ensuite **** pour le prix et sélectionnez **** comme devise.
1. Choose whether to **Include tax in price**. You can either use the default value from your [tax settings](https://dashboard.stripe.com/test/settings/tax) or set the value manually. In this example, select **Auto**.
1. Pour **Période de facturation**, sélectionnez **Mensuel**.
1. Click **More pricing options**. Then select **Flat rate** as the pricing model for this example. Learn more about [flat rate](https://docs.stripe.com/products-prices/pricing-models.md#flat-rate) and other [pricing models](https://docs.stripe.com/products-prices/pricing-models.md).
1. Add an internal **Price description** and [Lookup key](https://docs.stripe.com/products-prices/manage-prices.md#lookup-keys) to organize, query, and update specific prices in the future.
1. Cliquez sur **Suivant**. Cliquez ensuite sur **Ajouter un produit**.

Après avoir créé le produit et le tarif, enregistrez l’ID de tarif de manière à pouvoir l’utiliser dans les étapes ultérieures. La page des tarifs affiche l’ID dont le format est similaire à ce qui suit : `price_G0FvDp6vZvdwRZ`.

## Créer un SetupIntent [Côté serveur]

Un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) 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](https://docs.stripe.com/api/setup_intents.md) sur votre serveur en définissant [payment_method_types](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-payment_method_types) sur `au_becs_debit` :

#### curl

```bash
curl https://api.stripe.com/v1/setup_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "payment_method_types[]"="au_becs_debit"
```

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.

## Recueillir les informations du moyen de paiement et la confirmation du mandat [Côté client]

Vous êtes prêt à collecter les informations de paiement sur le client avec [Stripe&nbsp;Elements](https://docs.stripe.com/payments/elements.md). 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](https://docs.stripe.com/security/guide.md#tls) au moment d’accepter des paiements en mode production.

### Configurer Stripe Elements

#### HTML + JS

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.

```html
<head>
  <title>Payment Setup</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

Créez une instance d’[Elements](https://docs.stripe.com/js.md#stripe-elements) avec le JavaScript suivant sur votre page de paiement&nbsp;:

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
const elements = stripe.elements();
```

### 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](https://docs.stripe.com/security/guide.md#tls) et capturez les informations suivantes&nbsp;:

| 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](https://stripe.com/au-becs/legal), et, dans votre formulaire de paiement&nbsp;:

- Affichez les conditions précises du [Contrat d’utilisation du service de demande de prélèvement automatique de Stripe](https://stripe.com/au-becs-dd-service-agreement/legal), soit directement sur le formulaire, soit sur une page dont le lien figure dans le formulaire, sous l’appellation «&nbsp;Contrat d’utilisation du service de demande de prélèvement&nbsp;».
- Vérifiez que la demande de prélèvement acceptée et le [contrat de service de demande prélèvement](https://stripe.com/au-becs-dd-service-agreement/legal) 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.

> En fournissant vos coordonnées bancaires, vous acceptez la présente demande de prélèvement automatique et le [Contrat d’utilisation du service de demande de prélèvement automatique](https://stripe.com/au-becs-dd-service-agreement/legal). Vous autorisez également Stripe Payments Australia Pty Ltd ACN (numéro d’immatriculation australien)160 180 343, identifiant d’utilisateur de prélèvement automatique n° 507156 («&nbsp;Stripe&nbsp;») à débiter votre compte par le biais du Bulk Electronic Clearing System (BECS) au nom de *Rocketship Inc* (le «&nbsp;Marchand&nbsp;») pour les paiements conformément aux conditions de votre accord avec ce dernier. Vous certifiez être soit le titulaire du compte, soit un signataire autorisé du compte mentionné ci-dessus.

Les informations du mandat accepté sont générées lors de la configuration d’un [PaymentMethod](https://docs.stripe.com/payments/payment-methods.md) 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`.

### Ajouter et configurer un composant Element Australia Bank Account

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](https://stripe.com/au-becs-dd-service-agreement/legal).

#### HTML

```html
<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">
    <!--
    Using a label with a for attribute that matches the ID of the
    Element container enables the Element to automatically gain focus
    when the customer clicks on the label.
    --><label for="au-bank-account-element">
      Bank Account
    </label>
    <div id="au-bank-account-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <!-- Used to display bank (branch) name associated with the entered BSB -->
  <div id="bank-name"></div>

  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>

  <!-- Display mandate acceptance text. --><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 ofRocket 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>
  
  <!-- Add the client_secret from the SetupIntent as a data attribute -->
  <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](https://docs.stripe.com/js/elements_object/create_element?type=au_bank_account) du composant Element Australia Bank Account et la monter sur le conteneur Element&nbsp;:

```javascript
// Custom styling can be passed to options when creating an 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", // or "solid"
}

// Create an instance of the auBankAccount Element.
const auBankAccount = elements.create('auBankAccount', options);

// Add an instance of the auBankAccount Element into
// the `au-bank-account-element` <div>.
auBankAccount.mount('#au-bank-account-element');
```

#### React

#### npm

Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm.

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

#### umd

Nous fournissons également une version UMD pour les sites qui n’utilisent pas npm ni de modules.

Incluez le script Stripe.js, qui exporte une fonction `Stripe` globale, ainsi que la version UMD de React Stripe.js, qui exporte un objet `ReactStripe` global. Chargez toujours le script 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.

```html
<!-- Stripe.js -->
<script src="https://js.stripe.com/dahlia/stripe.js"></script>

<!-- React Stripe.js development build -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.js"></script>

<!-- When you are ready to deploy your site to production, remove the
      above development script, and include the following production build. -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.min.js"></script>
```

> La [démo de CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark) vous permet de tester React Stripe.js sans créer de projet.

### Ajoutez Stripe.js et Elements à votre page

Pour utiliser les composants Element, enveloppez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publiable et transmettez l’élément `Promise` renvoyé au fournisseur `Elements`.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import PaymentSetupForm from './PaymentSetupForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  return (
    <Elements stripe={stripePromise}>
      <PaymentSetupForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### 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](https://docs.stripe.com/security/guide.md#tls) et capturez les informations suivantes&nbsp;:

| 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](https://stripe.com/au-becs/legal), et, dans votre formulaire de paiement&nbsp;:

- Affichez les conditions précises du [Contrat d’utilisation du service de demande de prélèvement automatique de Stripe](https://stripe.com/au-becs-dd-service-agreement/legal), soit directement sur le formulaire, soit sur une page dont le lien figure dans le formulaire, sous l’appellation «&nbsp;Contrat d’utilisation du service de demande de prélèvement&nbsp;».
- Vérifiez que la demande de prélèvement acceptée et le [contrat de service de demande prélèvement](https://stripe.com/au-becs-dd-service-agreement/legal) 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.

> En fournissant vos coordonnées bancaires, vous acceptez la présente demande de prélèvement automatique et le [Contrat d’utilisation du service de demande de prélèvement automatique](https://stripe.com/au-becs-dd-service-agreement/legal). Vous autorisez également Stripe Payments Australia Pty Ltd ACN (numéro d’immatriculation australien)160 180 343, identifiant d’utilisateur de prélèvement automatique n° 507156 («&nbsp;Stripe&nbsp;») à débiter votre compte par le biais du Bulk Electronic Clearing System (BECS) au nom de *Rocketship Inc* (le «&nbsp;Marchand&nbsp;») pour les paiements conformément aux conditions de votre accord avec ce dernier. Vous certifiez être soit le titulaire du compte, soit un signataire autorisé du compte mentionné ci-dessus.

Les informations du mandat accepté sont générées lors de la configuration d’un [PaymentMethod](https://docs.stripe.com/payments/payment-methods.md) 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`.

### Ajouter et configurer un composant AuBankAccountElement

Le composant `AuBankAccountElement` vous permet de collecter et de valider à la fois le numéro BSB et le numéro de compte du client. Par ailleurs, votre client doit lire et accepter les conditions du [Contrat d’utilisation du service de demande de prélèvement automatique](https://stripe.com/au-becs-dd-service-agreement/legal).

#### JSX

```jsx
/**
* Use the CSS tab above to style your Element's container.
*/
import React from 'react';
import {AuBankAccountElement} from '@stripe/react-stripe-js';
import './BecsFormStyles.css'

// Custom styling can be passed as options when creating an Element.
const AU_BANK_ACCOUNT_STYLE = {
  base: {
    color: '#32325d',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    },
    ':-webkit-autofill': {
      color: '#32325d',
    },
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a',
    ':-webkit-autofill': {
      color: '#fa755a',
    },
  }
};

const AU_BANK_ACCOUNT_ELEMENT_OPTIONS = {
  style: AU_BANK_ACCOUNT_STYLE,
  disabled: false,
  hideIcon: false,
  iconStyle: "default", // or "solid"
};

export default function BecsForm({onSubmit, disabled}) {
  return (
    <form onSubmit={onSubmit}>
      <div className="form-row inline">
        <div className="col">
          <label>
            Name
            <input
              name="accountholder-name"
              placeholder="John Smith"
              required
            />
          </label>
        </div>

        <div className="col">
          <label>
            Email Address
            <input
              name="email"
              type="email"
              placeholder="john.smith@example.com"
              required
            />
          </label>
        </div>
      </div>
<div className="form-row">
        <label>
          Bank Account
          <AuBankAccountElement options={AU_BANK_ACCOUNT_ELEMENT_OPTIONS} />
        </label>
      </div>

      {/* Display mandate acceptance text. */}<div className="mandate-acceptance">
        By providing your bank account details, you agree to this Direct Debit Request
        and the <a href="https://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 ofRocket 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 type="submit" disabled={disabled}>Confirm Payment</button>
    </form>
```

Les composants Element sont entièrement personnalisables. Vous pouvez [personnaliser les composants Element](https://docs.stripe.com/js/elements_object/create_element?type=au_bank_account#elements_create-options) pour qu’ils s’intègrent visuellement à votre site afin de fournir une expérience de paiement uniforme à vos clients. Il est également possible de personnaliser différents états de saisie, par exemple lorsque le composant Element est sélectionné.

## Envoyer les informations du moyen de paiement à Stripe [Côté client]

Au lieu de transmettre au client l’objet `SetupIntent` dans son intégralité, utilisez la [clé secrète du client](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) de l’[étape&nbsp;3](https://docs.stripe.com/billing/subscriptions/au-becs-debit.md#web-create-setup-intent). 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.

#### HTML + JS

Utilisez [stripe.confirmAuBecsDebitSetup](https://docs.stripe.com/js/setup_intents/confirm_au_becs_debit_setup) 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.

```javascript
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](https://docs.stripe.com/api/mandates/object.md#mandate_object-payment_method_details-au_becs_debit-url) de l’[objet Mandate](https://docs.stripe.com/api/mandates.md) 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&nbsp;:

- un message de confirmation explicite indiquant qu’un mandat de prélèvement automatique a été mis en place
- la [dénomination sociale](https://docs.stripe.com/billing/subscriptions/au-becs-debit.md#statement-descriptors) 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](https://docs.stripe.com/api/setup_intents/retrieve.md).

```curl
curl -G https://api.stripe.com/v1/setup_intents/{{SETUP_INTENT_ID}} \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "expand[]=mandate"
```

#### React

Utilisez [stripe.confirmAuBecsDebitSetup](https://docs.stripe.com/js/setup_intents/confirm_au_becs_debit_setup) pour collecter le mandat lorsque l’utilisateur envoie le formulaire. Il est nécessaire d’inclure l’adresse e-mail du client et le nom du titulaire du compte dans la propriété `billing_details` du paramètre `payment_method` pour créer un `PaymentMethod` de prélèvement automatique BECS.

Pour appeler `stripe.confirmAuBecsDebitSetup` depuis votre composant de formulaire de paiement, utilisez les hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) et [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Si vous préférez les composants de classe traditionnels aux hooks, vous pouvez utiliser un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer).

#### Hooks

```jsx
import React from 'react';
import {useStripe, useElements, AuBankAccountElement} from '@stripe/react-stripe-js';

import BecsForm from './BecsForm';

export default function PaymentSetupForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const auBankAccount = elements.getElement(AuBankAccountElement);

    // For brevity, this example is using uncontrolled components for
    // the accountholder's name and email. In a real world app you will
    // probably want to use controlled components.
    // https://reactjs.org/docs/uncontrolled-components.html
    // https://reactjs.org/docs/forms.html#controlled-components

    const accountholderName = event.target['accountholder-name'];
    const email = event.target.email;

    const result = await stripe.confirmAuBecsDebitSetup('{{CLIENT_SECRET}}', {
      payment_method: {
        au_becs_debit: auBankAccount,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      }
    });

    if (result.error) {
      // Show error to your customer.
      console.log(result.error.message);
    } else {
      // Show a confirmation message to your customer.
      // The SetupIntent is in the 'succeeded' state.
    }
  };

  return (
    <BecsForm onSubmit={handleSubmit} disabled={!stripe} />
  );
}
```

#### Composants de classe

```jsx
import React from 'react';
import {ElementsConsumer, AuBankAccountElement} from '@stripe/react-stripe-js';

import BecsForm from './BecsForm';

class PaymentSetupForm extends React.Component {
  handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    const {stripe, elements} = this.props;

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const auBankAccount = elements.getElement(AuBankAccountElement);

    // For brevity, this example is using uncontrolled components for
    // the accountholder's name and email. In a real world app you will
    // probably want to use controlled components.
    // https://reactjs.org/docs/uncontrolled-components.html
    // https://reactjs.org/docs/forms.html#controlled-components

    const accountholderName = event.target['accountholder-name'];
    const email = event.target.email;

    const result = await stripe.confirmAuBecsDebitSetup('{{CLIENT_SECRET}}', {
      payment_method: {
        au_becs_debit: auBankAccount,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      }
    });

    if (result.error) {
      // Show error to your customer.
      console.log(result.error.message);
    } else {
      // Show a confirmation message to your customer.
      // The SetupIntent is in the 'succeeded' state.
    }
  };

  render() {
    const {stripe} = this.props;
    return (
      <BecsForm onSubmit={this.handleSubmit} disabled={!stripe} />
    );
  }
}

export default function InjectedPaymentSetupForm() {
  return (
    <ElementsConsumer>
      {({stripe, elements}) => (
        <PaymentSetupForm  stripe={stripe} elements={elements} />
      )}
    </ElementsConsumer>
  );
}
```

Une fois le `SetupIntent` confirmé, vous devez partager l’[URL du mandat](https://docs.stripe.com/api/mandates/object.md#mandate_object-payment_method_details-au_becs_debit-url) de l’[objet Mandate](https://docs.stripe.com/api/mandates.md) 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&nbsp;:

- un message de confirmation explicite indiquant qu’un mandat de prélèvement automatique a été mis en place
- la [dénomination sociale](https://docs.stripe.com/billing/subscriptions/au-becs-debit.md#statement-descriptors) 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](https://docs.stripe.com/api/setup_intents/retrieve.md).

```curl
curl -G https://api.stripe.com/v1/setup_intents/{{SETUP_INTENT_ID}} \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "expand[]=mandate"
```

## Créer un client avec un PaymentMethod [Côté serveur]

La création d’abonnements nécessite un objet représentant le client, qui peut être soit un [Account](https://docs.stripe.com/api/v2/core/accounts/object.md) configuré par le client, soit un [Customer](https://docs.stripe.com/api.md#customer_object). Étant donné que l’abonnement génère des paiements récurrents, vous devez ajouter un moyen de paiement sauvegardé au client pour les paiements futurs.

> #### Utiliser l’API Accounts v2 pour représenter les clients
> 
> L’API Accounts&nbsp;v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts&nbsp;v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
> 
> Pour demander l’accès à l’aperçu Accounts&nbsp;v2, 
> 
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts&nbsp;v2

[Créez un Account configuré par le client](https://docs.stripe.com/api/v2/core/accounts/create.md), puis mettez-le à jour pour définir le moyen de paiement que vous venez de collecter comme son [configuration.customer.billing.default_payment_method](https://docs.stripe.com/api/v2/core/accounts/update.md#v2_update_accounts-configuration-customer-billing-default_payment_method). Cela définit le moyen de paiement par défaut pour les factures et les abonnements.

```curl
curl -X POST https://api.stripe.com/v2/core/accounts/acct_Gk0uVzT2M4xOKD \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-04-22.preview" \
  --json '{
    "configuration": {
        "customer": {
            "billing": {
                "default_payment_method": "pm_1FU2bgBF6ERF9jhEQvwnA7sX"
            }
        }
    }
  }'
```

#### Customers&nbsp;v1

Créez un objet `Customer` et définissez le moyen de paiement que vous venez de collecter à la fois comme [payment_method](https://docs.stripe.com/api/customers/create.md#create_customer-payment_method) et comme [invoice_settings.default_payment_method](https://docs.stripe.com/api/customers/create.md#create_customer-invoice_settings-default_payment_method)&nbsp;:

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  --data-urlencode "email=jenny.rosen@example.com" \
  -d payment_method=pm_1FU2bgBF6ERF9jhEQvwnA7sX \
  -d "invoice_settings[default_payment_method]=pm_1FU2bgBF6ERF9jhEQvwnA7sX"
```

Cela renvoie un objet `Customer`. Vous pouvez consulter le moyen de paiement par défaut dans `invoice_settings`&nbsp;:

```json
{
  "id": "cus_Gk0uVzT2M4xOKD",
  "object": "customer",
  "address": null,
  "balance": 0,
  "created": 1581797088,
  "currency": null,
  "default_source": null,
  "delinquent": false,
  "description": null,
  "discount": null,
  "email": "jenny.rosen@example.com",
  "invoice_prefix": "11D0B3D7",
  "invoice_settings": {
    "custom_fields": null,
    "default_payment_method": "pm_1FU2bgBF6ERF9jhEQvwnA7sX",
    "footer": null
  },
  "livemode": false,
  "metadata": {
  },
  "name": null,
  "phone": null,
  "preferred_locales": [

  ],
  "shipping": null,
  "sources": {
    "object": "list",
    "data": [

    ],
    "has_more": false,
    "total_count": 0,
    "url": "/v1/customers/cus_Gk0uVzT2M4xOKD/sources"
  },
  "subscriptions": {
    "object": "list",
    "data": [

    ],
    "has_more": false,
    "total_count": 0,
    "url": "/v1/customers/cus_Gk0uVzT2M4xOKD/subscriptions"
  },
  "tax_exempt": "none",
  "tax_ids": {
    "object": "list",
    "data": [

    ],
    "has_more": false,
    "total_count": 0,
    "url": "/v1/customers/cus_Gk0uVzT2M4xOKD/tax_ids"
  }
}
```

Après avoir créé le client, enregistrez son identifiant dans votre propre base de données pour pouvoir l’utiliser ultérieurement.

## Créer un abonnement [Côté serveur]

Créez un [abonnement](https://docs.stripe.com/api/subscriptions.md) avec le tarif et le client&nbsp;:

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/subscriptions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "items[0][price]=price_F52b2UdntfQsfR"
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/subscriptions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer=cus_Gk0uVzT2M4xOKD \
  -d "items[0][price]=price_F52b2UdntfQsfR"
```

La création d’abonnements débite automatiquement les clients via le moyen de paiement par défaut. Après le premier paiement réussi, l’état de l’abonnement [dans le Dashboard](https://dashboard.stripe.com/test/subscriptions) passe à **Active**. Les débits suivants utilisent le tarif que vous avez créé précédemment.

## Gérer les états de l'abonnement [Côté client]

Si le paiement initial aboutit, l’état de l’*abonnement* est `active` et aucune action supplémentaire n’est nécessaire. Si le paiement échoue, l’état passe à l’**état de l’abonnement** que vous avez configuré dans vos [paramètres de recouvrement automatique](https://docs.stripe.com/invoicing/automatic-collection.md). Avisez votre client que le paiement a échoué et [débiter-le avec un autre moyen de paiement](https://docs.stripe.com/billing/subscriptions/overview.md#requires-payment-method).

> Les paiements par prélèvement automatique BECS ne sont jamais automatiquement relancés, même si vous avez configuré une [planification de relance](https://docs.stripe.com/invoicing/automatic-collection.md) pour les autres moyens de paiement.

## Tester l'intégration

Vous pouvez tester votre formulaire en utilisant le numéro BSB de test `000000` et l’un des numéros de compte test ci-dessous avec votre requête [confirmAuBecsDebitSetup](https://docs.stripe.com/js/setup_intents/confirm_au_becs_debit_setup). Vous pouvez également utiliser le token correspondant pour ignorer la saisie manuelle des informations du compte bancaire.

| Numéro BSB | Numéro de compte | Token                                    | Description                                                                                                                                                                                                                           |
| ---------- | ---------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `000000`   | `000123456`      | `pm_auBecsDebit_success`                 | Le PaymentIntent créé avec le PaymentMethod résultant passe de `processing` à `succeeded`. L’état du mandat reste `active`.                                                                                                           |
| `000000`   | `900123456`      | `pm_auBecsDebit_successDelayed`          | 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`.                                                                          |
| `000000`   | `111111113`      | `pm_auBecsDebit_accountClosed`           | 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.                                        |
| `000000`   | `111111116`      | `pm_auBecsDebit_noAccount`               | 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.                                            |
| `000000`   | `222222227`      | `pm_auBecsDebit_referToCustomer`         | 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`.                                                    |
| `000000`   | `922222227`      | `pm_auBecsDebit_referToCustomerDelayed`  | 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`.                   |
| `000000`   | `333333335`      | `pm_auBecsDebit_debitNotAuthorized`      | 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.                                  |
| `000000`   | `666666660`      | `pm_auBecsDebit_dispute`                 | Le PaymentIntent créé avec le PaymentMethod résultant passe de `processing` à `succeeded`, mais un litige est immédiatement créé.                                                                                                     |
| `000000`   | `343434343`      | `pm_auBecsDebit_exceedsWeeklyLimit`      | Le PaymentIntent qui a été créé avec le PaymentMethod résultant échoue avec une erreur `charge_exceeds_source_limit`, car le montant du paiement a entraîné le dépassement de la limite de volume de paiement hebdomadaire du compte. |
| `000000`   | `121212121`      | `pm_auBecsDebit_exceedsTransactionLimit` | Le PaymentIntent qui a été créé avec le PaymentMethod résultant échoue avec une erreur `charge_exceeds_transaction_limit`, car le montant du paiement dépasse la limite du volume de transactions du compte.                          |

## Optional: Définir la période de facturation

Lorsque vous créez un abonnement, le système définit automatiquement le cycle de facturation par défaut. Par exemple, si un client s’abonne à un plan mensuel le 7&nbsp;septembre, il est ensuite facturé le 7 de chaque mois. Certaines entreprises préfèrent définir le cycle de facturation manuellement afin de pouvoir facturer leurs clients conjointement à chaque cycle. L’argument [billing cycle anchor](https://docs.stripe.com/api/subscriptions/create.md#create_subscription-billing_cycle_anchor) vous permet d’effectuer cette opération.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/subscriptions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "items[0][price]={{PRICE_ID}}" \
  -d billing_cycle_anchor=1611008505
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/subscriptions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "items[0][price]={{PRICE_ID}}" \
  -d billing_cycle_anchor=1611008505
```

La définition manuelle du cycle de facturation facture automatiquement au client un montant au prorata pour la période écoulée entre la création de l’abonnement et la date de début du cycle de facturation. Si vous ne souhaitez pas que les clients soient facturés pour cette période, vous pouvez définir l’argument [proration_behavior](https://docs.stripe.com/api/subscriptions/create.md#create_subscription-proration_behavior) sur `none`. Vous pouvez également combiner la date de début du cycle de facturation avec des [périodes d’essai](https://docs.stripe.com/billing/subscriptions/au-becs-debit.md#trial-periods) pour permettre aux clients d’accéder gratuitement à votre produit et ensuite leur facturer un montant au prorata.

## Optional: Périodes d'essai d'un abonnement

Les essais gratuits permettent aux clients d’accéder à votre produit gratuitement pendant une certaine période. L’utilisation d’essais gratuits est différente de la définition de [proration_behavior](https://docs.stripe.com/api/subscriptions/create.md#create_subscription-proration_behavior) sur `none`, car vous pouvez personnaliser la durée des périodes gratuites. Transmettez un horodatage dans [fin de l’essai](https://docs.stripe.com/api/subscriptions/create.md#create_subscription-trial_end) pour définir la période d’essai.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/subscriptions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "items[0][price]={{PRICE_ID}}" \
  -d trial_end=1610403705
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/subscriptions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "items[0][price]={{PRICE_ID}}" \
  -d trial_end=1610403705
```

Vous pouvez également combiner une [date de début du cycle de facturation](https://docs.stripe.com/billing/subscriptions/au-becs-debit.md#billing-cycle) avec un essai gratuit. Supposons par exemple que nous sommes le 15&nbsp;septembre et que vous voulez offrir à votre client un essai gratuit de sept jours, puis lancer le cycle de facturation normal le 1er octobre. Vous pouvez définir la fin de l’essai gratuit le 22 septembre et l’ancre du cycle de facturation le 1er octobre. Ainsi, le client bénéficie d’un essai gratuit pendant sept jours et paye un montant au prorata pour la durée comprise entre la fin de l’essai et le 1er octobre. Le 1er octobre, vous facturez à ce client le montant normal de l’abonnement pour son premier cycle de facturation complet.