# Paiements Pay by Bank

Découvrez comment accepter les paiements Pay by Bank.

# Checkout


Pay by Bank est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) où les clients doivent [s’identifier](https://docs.stripe.com/payments/payment-methods.md#customer-actions) auprès de leur application bancaire ou de leur portail Web. Pay by Bank redirige les clients depuis votre site Web, autorise le paiement et les renvoie vers votre site Web.  Vous recevez une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. 

> Stripe peut automatiquement proposer les moyens de paiement pertinents à vos clients en évaluant la devise, les restrictions liées aux moyens de paiement et d’autres paramètres.
> 
> - Suivez le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted) pour créer une intégration de paiement qui utilise des [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md).
- Si vous ne souhaitez pas utiliser de moyens de paiement dynamiques, suivez les étapes ci-dessous pour configurer manuellement les moyens de paiement dans votre intégration Checkout.

## Déterminer la compatibilité

**Lieux d’implantation pris en charge** : DE, GB

**Devises prises en charge** : `eur, gbp`

**Devises de règlement** : `eur, gbp`

**Mode de paiement** : Yes

**Mode de configuration** : No

**Mode d’abonnement** : No

Afin prendre en charge les paiements Pay by Bank, la session Checkout doit remplir toutes les conditions suivantes :

- Les *tarifs* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) de tous les postes de facture doivent être exprimés dans la même devise. Pour définir des postes dans différentes devises, créez des sessions Checkout distinctes pour chacune d’entre elles.
- Vous ne pouvez utiliser que des postes uniques. Les offres tarifaires récurrentes *d’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) ne sont pas prises en charge.

Pour rejoindre l’aperçu privé de Pay by Bank pour la France, l’Allemagne et l’Irlande, consultez la documentation sur les [paiements Pay by Bank](https://docs.stripe.com/payments/pay-by-bank.md).

## Activer le moyen de paiement Pay by Bank

Ce guide vous explique comment activer le paiement Pay by Bank et vous montre les différences entre l’acceptation de paiements à l’aide de méthodes de paiement dynamiques et la configuration manuelle des moyens de paiement.

Pour créer une nouvelle [session Checkout](https://docs.stripe.com/api/checkout/sessions.md) :

1. Ajouter le paramètre `pay_by_bank` à la liste des `payment_method_types`.
1. Vérifier que tous vos postes `line_items` sont exprimés dans la devise `gbp`.
1. Ajoutez un message dans le champ [payment_method_options.pay_by_bank.statement_descriptor](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-pay_by_bank). Ce libellé peut être le nom de l’entreprise ou un autre texte pour aider votre client à identifier la transaction. Le relevé bancaires de votre client inclut ce message.

#### Page hébergée par Stripe

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=gbp" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_options[pay_by_bank][statement_descriptor]=Business name" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=pay_by_bank" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Page entièrement intégrée

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=gbp" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_options[pay_by_bank][statement_descriptor]=Business name" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=pay_by_bank" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### Traiter vos commandes

Maintenant que vous savez accepter des paiements, découvrez comment [traiter les commandes](https://docs.stripe.com/checkout/fulfillment.md).

## Tester votre intégration

Pour tester votre intégration Checkout, sélectionnez le moyen de paiement Pay by Bank, puis cliquez sur le bouton **Payer**.

- Cliquez sur **Autoriser le paiement de test** pour tester le cas où le paiement est réussi.
- Cliquez sur **Échec du paiement test** pour tester le cas où le client ne parvient pas à s’authentifier.

## Gérez les litiges et les remboursements

Le délai de remboursement pour les paiements Pay by Bank est de 730&nbsp;jours (2&nbsp;ans) après le paiement initial. Un remboursement arrive généralement le jour ouvrable suivant, mais peut prendre jusqu’à 7&nbsp;jours pour apparaître comme réussi. Il n’y a pas de procédure de contestation, les clients s’authentifient auprès de leur banque.

## See also

- [En savoir plus sur Pay by Bank](https://docs.stripe.com/payments/pay-by-bank.md)
- [Exécution Checkout](https://docs.stripe.com/checkout/fulfillment.md)
- [Personnalisation de Checkout](https://docs.stripe.com/payments/checkout/customization.md)


# Checkout Sessions API


Pour déterminer quelle API répond aux besoins de votre entreprise, consultez la section[guide de comparaison](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Utilisez le [Payment Element](https://docs.stripe.com/payments/payment-element.md) pour intégrer un formulaire de paiement Stripe personnalisé sur votre site Web ou application et proposer des moyens de paiement à vos clients. Pour les configurations et personnalisations avancées, consultez le guide d’intégration [Accepter un Paiement](https://docs.stripe.com/payments/accept-a-payment.md).

## Determine compatibility

**Lieux d’implantation pris en charge**&nbsp;: DE, GB

**Devises prises en charge**&nbsp;: `eur, gbp`

**Devises de règlement**&nbsp;: `eur, gbp`

**Mode de paiement**&nbsp;: Yes

**Mode de configuration**&nbsp;: No

**Mode d’abonnement**&nbsp;: No

Afin prendre en charge les paiements Pay by Bank, la session Checkout doit remplir toutes les conditions suivantes&nbsp;:

- La devise doit être la même pour tous les postes. Si vous avez des postes dans diverses devises, créez des sessions Checkout distinctes pour chaque devise.
- You can only use one-time line items. Recurring subscription pricing plans aren’t supported.
- Pour rejoindre l’aperçu privé de Pay by Bank pour la France, l’Allemagne et l’Irlande, consultez la documentation sur les [paiements Pay by Bank](https://docs.stripe.com/payments/pay-by-bank.md).

## Set up the server [Côté serveur]

Utilisez les bibliothèques officielles de Stripe pour accéder à l’API depuis votre application.

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Create a Checkout Session [Côté serveur]

Ajoutez à votre serveur un endpoint qui crée un objet [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) et renvoie la [clé secrète du client](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) à votre front-end. Une session Checkout représente la session d’un client qui paie des achats ponctuels ou des abonnements. Les sessions Checkout expirent 24&nbsp;heures après leur création.

Nous recommandons d’utiliser des [méthodes de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) pour afficher automatiquement les moyens de paiement les plus pertinents à chaque client, afin d’optimiser le taux de conversion. Vous pouvez également [lister manuellement les méthodes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually), ce qui désactive les options dynamiques.

#### Gérer les moyens de paiement dans le Dashboard

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'gbp',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

#### Manually list payment methods

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'gbp',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    payment_method_types: ['pay_by_bank'],
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

## Configurer le front-end [Côté client]

#### HTML + JS

Intégrez le script Stripe.js à votre page de paiement en l’ajoutant dans le `head` de votre fichier HTML. Chargez toujours Stripe.js directement depuis js.stripe.com afin de rester conforme à PCI. N’incluez pas le script dans un bundle et n’en hébergez pas de copie.

Assurez-vous d’utiliser la dernière version de Stripe.js en incluant la balise de script suivante `<script src=“https://js.stripe.com/dahlia/stripe.js”>`</script>. En savoir plus sur la [gestion des versions de Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md).

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

> Stripe propose un package npm que vous pouvez utiliser pour charger Stripe.js en tant que module. Consultez le [projet sur GitHub](https://github.com/stripe/stripe-js). La version [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0)&nbsp;ou ultérieure est requise.

Initialiser stripe.js

```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(
  '<<YOUR_PUBLISHABLE_KEY>>',
);
```

#### React

Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [Stripe.js loader](https://www.npmjs.com/package/@stripe/stripe-js) depuis le registre public npm. Vous devez disposer au minimum de la version&nbsp;5.0.0&nbsp;pour React Stripe.js et de la version&nbsp;8.0.0&nbsp;pour le Stripe.js loader.

```bash
npm install --save @stripe/react-stripe-js@^5.0.0 @stripe/stripe-js@^8.0.0
```

Initialisez une instance `stripe` côté front-end à l’aide de votre clé publiable.

```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
```

## Initialize Checkout [Côté client]

#### HTML + JS

Appelez [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init), en transmettant `clientSecret`.

`initCheckoutElementsSdk` renvoie un objet [Checkout](https://docs.stripe.com/js/custom_checkout) contenant les données de la Session Checkout et les méthodes pour les mettre à jour.

Lisez le `total` et les `lineItems` de [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session), et affichez-les dans votre interface utilisateur. Cela vous permet d’activer de nouvelles fonctionnalités avec un minimum de modifications de code. Par exemple, l’ajout de [prix manuels des devises](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) ne nécessite aucune modification de l’interface utilisateur si vous affichez le `total`.

```html
<div id="checkout-container"></div>
```

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');

  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
```

#### React

Encapsulez votre application avec le composant [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), en lui transmettant `clientSecret` et l’instance `stripe`.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const App = () => {
  return (
    <CheckoutElementsProvider
      stripe={stripe}options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

Accédez à l’objet [Checkout](https://docs.stripe.com/js/custom_checkout) dans votre composant de formulaire de paiement en utilisant le hook `useCheckoutElements()`. L’objet `Checkout` contient les données de la Checkout Session et les méthodes pour la mettre à jour.

Lisez le `total` et les `lineItems` de l’objet `Checkout`, et affichez-les dans votre interface utilisateur. Cela vous permet d’activer des fonctionnalités avec un minimum de modifications de code. Par exemple, l’ajout de [prix manuels des devises](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) ne nécessite aucune modification de l’interface utilisateur si vous affichez le `total`.

```jsx
import React from 'react';
import {useCheckoutElements} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>{JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
    </form>
  );
};
```

## Collect customer email [Côté client]

#### HTML + JS

Vous devez fournir une adresse e-mail client valide lors d’une Checkout Session.

Utilisez le [composant Element Contact Details](https://docs.stripe.com/js/custom_checkout/create_contact_details_element) pour collecter l’adresse e-mail de votre client. Il gère la collecte et la validation des adresses e-mail à votre place et aide les clients à se connecter à Link.

Vous pouvez également&nbsp;:

- Transmettez [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (pour les clients représentés en tant qu’objets `Account` configurés par le client) ou [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (pour les clients représentés en tant qu’objets `Customer`) lors de la création de la Checkout Session. Stripe valide les e-mails fournis de cette manière.
  - Ceux-ci préremplissent la session avec un e-mail que les clients ne peuvent pas modifier sur la page de paiement. Si vous souhaitez préremplir avec un e-mail modifiable, utilisez [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) lors de l’initialisation de Checkout.
- Transmettez une adresse e-mail que vous avez déjà validé sur [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) ou [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm).

```html
<div id="contact-details-element">
  <!--Stripe.js injects the Contact Details Element-->
</div>
```

```javascript
const contactDetailsElement = checkout.createContactDetailsElement();
contactDetailsElement.mount("#contact-details-element");
```

#### React

Vous devez fournir une adresse e-mail client valide lors d’une Checkout Session.

Utilisez [ContactDetailsElement](https://docs.stripe.com/js/react_stripe_js/checkout/contact_details_element) pour collecter l’adresse e-mail de votre client. Cet élément gère la collecte et la validation des adresses e-mails à votre place et aide les clients à se connecter à Link.

Vous pouvez également&nbsp;:

- Transmettez [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (pour les clients représentés en tant qu’objets `Account` configurés par le client) ou [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (pour les clients représentés en tant qu’objets `Customer`) lors de la création de la Checkout Session. Stripe valide les e-mails fournis de cette manière.
  - Ceux-ci préremplissent la session avec un e-mail que les clients ne peuvent pas modifier sur la page de paiement. Si vous souhaitez préremplir avec un e-mail modifiable, utilisez [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) lors de l’initialisation de Checkout.
- Transmettez une adresse e-mail que vous avez déjà validé sur [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) ou [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm).

```jsx
import {ContactDetailsElement} from '@stripe/react-stripe-js/checkout';

// Inside your CheckoutForm component:
<ContactDetailsElement/>
```

## Collecter les informations de paiement [Côté client]

Collectez les informations de paiement de votre client à l’aide de [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment&nbsp;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&nbsp;Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de l’iframe doit être défini sur égal à `"payment *"`.

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](https://docs.stripe.com/security/guide.md#tls) lorsque vous souhaitez commencer à accepter des paiements réels.

#### HTML + JS

Tout d’abord, créez un élément DOM de conteneur pour monter le composant [Payment Element](https://docs.stripe.com/payments/payment-element.md). Créez ensuite une instance du `Payment Element` à l’aide de [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) et montez-la en appelant [element.mount](https://docs.stripe.com/js/element/mount) et en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur.

```html
<div id="payment-element"></div>
```

```javascript
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');
```

Consultez la [documentation Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) pour connaître les options prises en charge.

Vous pouvez [personnaliser l’apparence](https://docs.stripe.com/payments/checkout/customization/appearance.md) de tous les Elements en transmettant [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) lors de l’initialisation de Checkout sur le front-end.

#### React

Montez le composant [Payment Element](https://docs.stripe.com/payments/payment-element.md) dans le [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

```jsx
import React from 'react';import {PaymentElement, useCheckoutElements} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>

      {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
<PaymentElement options={{layout: 'accordion'}}/>
    </form>
  );
};

export default CheckoutForm;
```

Consultez la [documentation Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) pour connaître les options prises en charge.

Vous pouvez [personnaliser l’apparence](https://docs.stripe.com/payments/checkout/customization/appearance.md) de tous les Elements en transmettant [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) au composant [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

## Submit the payment [Côté client]

#### HTML + JS

Affichez un bouton **Payer** qui appelle [confirm](https://docs.stripe.com/js/custom_checkout/confirm) depuis l’instance `Checkout` pour soumettre le paiement.

```html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});

checkout.on('change', (session) => {
  document.getElementById('pay-button').disabled = !session.canConfirm;
});

const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Affichez un bouton **Payer** qui appelle [confirm](https://docs.stripe.com/js/custom_checkout/confirm) depuis [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) pour soumettre le paiement.

```jsx
import React from 'react';
import {useCheckoutElements} from '@stripe/react-stripe-js/checkout';

const PayButton = () => {
  const checkoutState = useCheckoutElements();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type !== "success") {
    return null;
  }

  const handleClick = () => {
    setLoading(true);checkoutState.checkout.confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## Test your integration

Pour tester votre intégration, choisissez le moyen de paiement et appuyez sur **Payer**. Dans un *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes), cela vous redirige vers une page de paiement de test, dans laquelle vous pouvez autoriser ou refuser le paiement.

En mode production, le fait d’appuyer sur **Payer** vous redirige vers le site Web de Pay by Bank. Vous n’avez pas la possibilité d’autoriser ou de refuser le paiement avec Pay by Bank.


# Payment Intents API


Pay by Bank est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) où les clients doivent [s’identifier](https://docs.stripe.com/payments/payment-methods.md#customer-actions) auprès de leur application bancaire ou de leur portail Web. Pay by Bank redirige les clients depuis votre site Web, autorise le paiement et les renvoie vers votre site Web.  Vous recevez une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. 

Ce guide vous montre comment intégrer un formulaire de paiement personnalisé de Stripe dans votre site Web ou votre application à l’aide du composant [Payment Element](https://docs.stripe.com/payments/payment-element.md). Le composant Payment Element vous permet de prendre en charge Pay by Bank et d’autres moyens de paiement automatiquement. Pour des configurations et des personnalisations avancées, consultez la section [Créer une intégration de paiements avancée](https://docs.stripe.com/payments/advanced.md).

## Configurer Stripe [Côté serveur]

[Créez un compte Stripe](https://dashboard.stripe.com/register) si vous ne l’avez pas déjà fait.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application&nbsp;:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

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

Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) pour représenter votre intention de collecter le paiement d’un client. Il permet de suivre les tentatives de prélèvement et les changements d’état du paiement.

#### Gérer les moyens de paiement dans le Dashboard

Create a PaymentIntent on your server with an amount and currency. You can manage payment methods from the [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe handles the return of eligible payment methods based on factors such as the transaction’s amount, currency, and payment flow. Before creating the Payment Intent, make sure to turn **Pay by Bank** on in the [payment methods settings](https://dashboard.stripe.com/settings/payment_methods) page.

Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela permet d’éviter que des clients malintentionnés puissent fixer leurs propres tarifs.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true"
```

#### Répertorier manuellement les moyens de paiement

Si vous ne souhaitez pas utiliser le Dashboard ou souhaitez spécifier manuellement des moyens de paiement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`.

Créez un PaymentIntent sur votre serveur avec un montant, une devise et une liste des moyens de paiement. Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela permet d’éviter que des clients malintentionnés puissent fixer leurs propres tarifs.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=gbp \
  -d "payment_method_types[]=pay_by_bank"
```

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

Le PaymentIntent contient une *clé secrète* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) à 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.

#### Application monopage

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&nbsp;:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

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

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

#### Rendu côté serveur

Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur.

Ajoutez le [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du PaymentIntent&nbsp;:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## Collecter les informations de paiement [Côté client]

Collectez les informations de paiement du client avec le [Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element.md). Le Payment&nbsp;Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment&nbsp;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&nbsp;Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de l’iframe doit être défini sur égal à `"payment *"`.

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](https://docs.stripe.com/security/guide.md#tls) lorsque vous souhaitez commencer à accepter des paiements réels.

#### HTML + JS

### 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.

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

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

```javascript
// 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('<<YOUR_PUBLISHABLE_KEY>>');
```

### 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&nbsp;:

```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&nbsp;Element et intégrez-la au nœud DOM conteneur. Lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create), transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) définie à l’étape précédente dans les `options`&nbsp;:

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.

```javascript
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 stepconst 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 contactDetailsElement on mount:
//
//   contactDetailsElement.mount("#contact-details-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');

```

#### React

### Configurer Stripe.js

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&nbsp;:

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

### Ajouter le fournisseur Elements à votre page de paiement et le configurer

Pour utiliser le composant Payment 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é publique, puis transmettez au fournisseur `Elements` l’élément `Promise` renvoyé. Transmettez également la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’étape précédente en tant que `options`, toujours 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 CheckoutForm from './CheckoutForm';

// 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() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

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

### Ajouter le composant Element Payment

Utilisez le composant `PaymentElement` pour créer votre formulaire&nbsp;:

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      // 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 contactDetailsElement
      //
      // <ContactDetailsElement id="contact-details-element"
        // Prefill the email field like so:
        // options={{defaultValues: {email: 'foo@bar.com'}}}
      // /><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

## Envoyer le paiement à Stripe [Côté client]

Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour effectuer le paiement à l’aide des informations du composant Payment&nbsp;Element. Ajoutez un paramètre [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer la page vers laquelle Stripe doit rediriger l’utilisateur à l’issue du paiement. Votre utilisateur peut être redirigé en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre `return_url`. L’utilisateur sera immédiatement redirigé vers la page `return_url` après un paiement réussi par carte.

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  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)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

Pour appeler [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) 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).

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

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  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 {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });


    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)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

export default CheckoutForm;
```

Veillez à ce que le paramètre `return_url` corresponde à une page de votre site web qui indique l’état du paiement. Lorsque Stripe redirige le client vers la page `return_url`, nous fournissons les paramètres de requête d’URL suivants&nbsp;:

| Paramètre                      | Description                                                                                                                                       |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | L’identifiant unique du `PaymentIntent`.                                                                                                          |
| `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. |

> Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine `stripe.com` à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble.

Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’[état du PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) pour déterminer les informations à présenter à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous ajoutez l’URL `return_url`&nbsp;; ils seront conservés tout au long du processus de redirection.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  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;
  }
});
```

#### React

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

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

## Gérez les litiges et les remboursements

Le délai de remboursement pour les paiements Pay by Bank est de 730&nbsp;jours (2&nbsp;ans) après le paiement initial. Un remboursement arrive généralement le jour ouvrable suivant, mais peut prendre jusqu’à 7&nbsp;jours pour apparaître comme réussi. Il n’y a pas de procédure de contestation, les clients s’authentifient auprès de leur banque.

## See also

- [En savoir plus sur Pay by Bank](https://docs.stripe.com/payments/pay-by-bank.md)
- [Exécution Checkout](https://docs.stripe.com/checkout/fulfillment.md)
- [Personnalisation de Checkout](https://docs.stripe.com/payments/checkout/customization.md)