# Accepter un paiement Affirm

Comment accepter les paiements Affirm, un moyen de paiement qui permet aux clients d'acheter tout de suite et de payer plus tard.

> Ce guide vous aide à intégrer Affirm dans votre flux de paiement en ligne. Pour les paiements en personne avec Stripe Terminal, visitez [Additional payment methods](https://docs.stripe.com/terminal/payments/additional-payment-methods.md).

# Checkout

> This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=checkout.

> Stripe peut automatiquement proposer les modes de paiement pertinents à vos clients en évaluant la devise, les restrictions liées aux modes 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 Checkout qui utilise des [modes de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md).
- Si vous ne souhaitez pas utiliser les modes de paiement dynamiques, suivez les étapes ci-dessous pour configurer manuellement les modes de paiement dans votre intégration de Checkout.

Affirm est un moyen de paiement à [usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) et à [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) avec lequel le client doit [authentifier](https://docs.stripe.com/payments/payment-methods.md#customer-actions) son paiement. Les clients sont redirigés vers le site d’Affirm, ils acceptent alors les conditions d’un plan de paiement à versements échelonnés. Une fois que le client a accepté les conditions, les fonds sont garantis et transférés vers votre compte Stripe. Le client rembourse directement Affirm au fil du temps.

> Avant de démarrer l’intégration, assurez-vous que votre compte est admissible à Affirm en vous rendant sur vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods).

## Déterminer la compatibilité

**Région du client** : Canada, US

**Devises prises en charge** : `cad, usd`

**Devises de présentation** : `cad, usd`

**Moyen de paiement** : Yes

**Mode de configuration** : No

**Mode d’abonnement** : No

Une session Checkout doit remplir toutes les conditions suivantes pour prendre en charge les paiements Affirm :

- Vous ne pouvez utiliser que les postes ponctuels. Affirm ne prend pas en charge les plans 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) récurrents.
- 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) doivent être exprimés dans la devise locale.

## Accepter un paiement

> Ce guide s’appuie sur l’intégration de base de Checkout permettant d’[accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?ui=stripe-hosted).

Ce guide vous explique comment activer Affirm et présente les différences entre l’acceptation des paiements par des modes de paiement dynamiques et la configuration manuelle des modes de paiement.

### Activer le moyen de paiement Affirm

Lors de la création d’une nouvelle [session Checkout](https://docs.stripe.com/api/checkout/sessions.md), vous devez :

1. Ajoutez `affirm` à la liste `payment_method_types`.
1. Assurez-vous que tous vos champs `line_items` utilisent votre devise nationale et que le montant total ne dépasse pas les [limites de montant des transactions Affirm](https://docs.stripe.com/payments/affirm.md#payment-options).
1. Vous pouvez également préciser les pays dans lesquels le paiement autorise les lieux de livraison par `shipping_address_collection[allowed_countries]`.

#### 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]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=5000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=affirm" \
  -d "shipping_address_collection[allowed_countries][0]=CA" \
  -d "shipping_address_collection[allowed_countries][1]=US" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Formulaire intégré

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=5000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=affirm" \
  --data-urlencode "return_url=https://example.com/return" \
  -d "shipping_address_collection[allowed_countries][0]=CA" \
  -d "shipping_address_collection[allowed_countries][1]=US" \
  -d ui_mode=embedded_page
```

Si vous ne souhaitez pas collecter l’adresse de livraison avec Checkout, vous pouvez également la fournir à l’aide de `payment_intent_data[shipping]`. Ces informations sont utiles pour le calcul des taux d’approbation de prêt.

#### 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]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=5000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=affirm" \
  -d "payment_intent_data[shipping][name]=Jenny Rosen" \
  -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \
  -d "payment_intent_data[shipping][address][city]=San Francisco" \
  -d "payment_intent_data[shipping][address][state]=CA" \
  -d "payment_intent_data[shipping][address][country]=US" \
  -d "payment_intent_data[shipping][address][postal_code]=94111" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Formulaire intégré

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=5000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=affirm" \
  --data-urlencode "return_url=https://example.com/return" \
  -d "payment_intent_data[shipping][name]=Jenny Rosen" \
  -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \
  -d "payment_intent_data[shipping][address][city]=San Francisco" \
  -d "payment_intent_data[shipping][address][state]=CA" \
  -d "payment_intent_data[shipping][address][country]=US" \
  -d "payment_intent_data[shipping][address][postal_code]=94111" \
  -d ui_mode=embedded_page
```

### Traiter vos commandes

[Utilisez une méthode telle que les webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) pour gérer le *traitement* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) de la commande plutôt que d’attendre que votre client revienne sur la page de l’état du paiement.

Les événements suivants sont envoyés lorsque l’état du paiement change&nbsp;:

| Nom de l’événement                                                                                                     | Description                                                                                                                                     | Étapes suivantes                                                                     |
| ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed)       | Le client a autorisé le paiement en envoyant le formulaire Checkout.                                                                            | Attendez que le paiement aboutisse ou échoue.                                        |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)           | Le paiement du client a abouti. Le `PaymentIntent` bascule à l’état `succeeded`.                                                                | Traitez la commande de biens ou de services du client.                               |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) | Le paiement du client a été refusé, ou le paiement a échoué pour un autre motif. Le `PaymentIntent` revient à l’état `requires_payment_method`. | Contactez votre client par courriel et demandez-lui de passer une nouvelle commande. |

En savoir plus sur le [traitement des commandes](https://docs.stripe.com/checkout/fulfillment.md).

## Tester votre intégration

Lors du test de votre intégration Checkout, sélectionnez le moyen de paiement Affirm, puis cliquez sur le bouton **Payer**.

Testez votre intégration Affirm en affichant la page de redirection à l’aide de vos clés API de test. Vous pouvez tester la réussite de paiement en l’authentifiant sur la page de redirection. Le PaymentIntent passe alors de l’état `requires_action` à `succeeded`.

Pour tester un échec d’authentification de l’utilisateur, utilisez vos clés API de test et accédez à la page de redirection. Sur cette page, fermez la fenêtre modale Affirm et vérifiez que le paiement n’a pas fonctionné. Votre PaymentIntent passe donc de l’état `requires_action` à `requires_payment_method`.

Lors de la redirection vers le bac à sable Affirm, Affirm peut demander les quatre derniers chiffres de votre numéro de sécurité sociale. Affirm suggère d’utiliser `'0000'` ou `'5678'`.

Pour les PaymentIntents à [capture manuelle](https://docs.stripe.com/payments/affirm/accept-a-payment.md#manual-capture) en mode test, le PaymentIntent non capturé expire automatiquement 10&nbsp;minutes après l’aboutissement de l’autorisation.

## Échecs de paiement

Affirm prend en compte de nombreux facteurs pour accepter ou refuser une transaction (par exemple, la durée d’utilisation d’Affirm par le client, le montant restant que le client doit rembourser et la valeur de la commande actuelle).

Présentez toujours des options de paiement supplémentaires telles que `card` dans votre flux de paiement, car les paiements Affirm ont un taux de refus supérieur aux autres moyens de paiement. Dans ces cas, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et l’état de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method`.

Hormis le refus d’un paiement, pour un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) d’Affirm avec un état `requires_action`, les clients doivent effectuer le paiement sous 12&nbsp;heures une fois que vous les avez redirigés vers le site d’Affirm. Si aucune action n’est prise par le client sous 12&nbsp;heures, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et l’état de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method`.

Dans ce cas, informez votre client pour réessayer avec une option de paiement différente présentée dans votre tunnel de paiement.

## Codes d’erreur

Voici les codes d’erreur courants et les actions recommandées correspondantes&nbsp;:

| Code d’erreur                            | Action recommandée                                                                                                                                                                                                                                                  |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Erreur générique indiquant que le paiement via Affirm a échoué. Des informations supplémentaires peuvent être disponibles dans le motif du résultat de la transaction.                                                                                              |
| `payment_method_provider_decline`        | Affirm a refusé le paiement du client. Ensuite, le client doit contacter Affirm pour obtenir plus d’informations.                                                                                                                                                   |
| `payment_intent_payment_attempt_expired` | Le client n’a jamais effectué le paiement sur la page de paiement d’Affirm, et la session de paiement a expiré. Stripe fait expirer automatiquement les PaymentIntents qui ne sont pas autorisés avec succès 12&nbsp;heures après la création initiale du paiement. |
| `payment_method_not_available`           | Affirm a rencontré une erreur liée au service et n’est pas en mesure de répondre à la requête. Réessayez plus tard.                                                                                                                                                 |
| `amount_too_small`                       | Saisissez un montant compris dans les [limites de transactions par défaut](https://docs.stripe.com/payments/affirm.md#payment-options) d’Affirm.                                                                                                                    |
| `amount_too_large`                       | Saisissez un montant compris dans les [limites de transactions par défaut](https://docs.stripe.com/payments/affirm.md#payment-options) d’Affirm.                                                                                                                    |

Pour certaines erreurs, des informations supplémentaires peuvent être incluses dans le motif du résultat de paiement&nbsp;:

| Motif du résultat          | Ce que cela signifie                                                                                                                                                                                                                                                                                                                                                     |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `generic_decline`          | Motif par défaut d’une erreur de paiement. Cela signifie généralement que le partenaire a refusé le paiement (par exemple, en raison d’une insuffisance de fonds), que la banque émettrice a refusé le prélèvement, que la transaction concernait un achat à haut risque, ou pour une raison similaire. Stripe ne reçoit pas toujours le motif du refus dans ces cas-là. |
| `affirm_checkout_canceled` | Soit le client a explicitement annulé le paiement Affirm, soit Affirm a rejeté son admissibilité au prêt. Stripe ne peut pas faire la différence entre ces deux types d’événements.                                                                                                                                                                                      |


# API Checkout Sessions

> This is a API Checkout Sessions for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=elements&api-integration=checkout.

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

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

## Déterminer la compatibilité

**Région du client**&nbsp;: Canada, US

**Devises prises en charge**&nbsp;: `cad, usd`

**Devises de présentation**&nbsp;: `cad, usd`

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

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

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

Une session Checkout doit remplir toutes les conditions suivantes pour prendre en charge les paiements Affirm&nbsp;:

- Vous ne pouvez utiliser que les postes ponctuels. Affirm ne prend pas en charge les plans 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) récurrents.
- 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) doivent être exprimés dans la devise locale.

## Configurer le serveur [Côté serveur]

Utilisez nos bibliothèques officielles 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'
```

## Créer une session Checkout [Côté serveur]

Ajoutez un point de terminaison sur votre serveur qui crée une [session de paiement](https://docs.stripe.com/api/checkout/sessions/create.md) et renvoie la [clé secrète](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) de son client à votre front-end. Une session de paiement représente la session de votre client comme ils paient des achats ponctuels ou des abonnements. Les sessions de paiement expirent 24&nbsp;heures après leur création.

Nous vous recommandons d’utiliser des [modes de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) pour afficher dynamiquement les modes de paiement admissibles les plus pertinents à chaque client pour maximiser la conversion. Vous pouvez également [répertorier manuellement les modes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually), ce qui désactive les modes de paiement dynamiques.

#### Gérer les modes de paiement à partir du 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: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 5000,
        },
        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');
});
```

#### Lister manuellement les modes de paiement

#### 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: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 5000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    payment_method_types: ['affirm'],
    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

Incluez le script Stripe.js à votre page Checkout en l’ajoutant au `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 une copie.

Assurez-vous que vous utilisez la dernière version de Stripe.js en incluant la balise script suivante `<script src=“https://js.stripe.com/dahlia/stripe.js”></script>`. En savoir plus sur la [gestion de la version 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 fournit un paquet 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) ou ultérieure est requise.

Initialisez 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&nbsp;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. Il vous faut au moins la version&nbsp;5.0.0 pour React&nbsp;Stripe.js et la version&nbsp;8.0.0 pour le chargeur Stripe.js.

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

Initialisez une instance `Stripe` sur votre front-end à l’aide de votre clé publique.

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

## Initialiser le paiement [Côté client]

#### HTML + JS

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

`initCheckoutElementsSdk` renvoie un objet [Paiement](https://docs.stripe.com/js/custom_checkout) qui contient les données de la session Paiement et les méthodes pour le mettre à jour.

Consultez les paramètres `total` et`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 en 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

Clôturez votre inscription avec le composant [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), en 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 du formulaire de paiement en utilisant le point d’ancrage`useCheckout()`. L’objet`Checkout` contient les données de la session Checkout et les méthodes pour les mettre à jour.

Consultez les paramètres `total` et`lineItems` de l’objet`Checkout` et affichez-les dans votre interface utilisateur. Cela permet d’activer des fonctionnalités avec un minimum de modifications de code. Par exemple, l’ajout de [prix manuels en 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 {useCheckout} from '@stripe/react-stripe-js/checkout';

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

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

## Collecter l’adresse de courriel des clients [Côté client]

#### HTML + JS

Vous devez fournir une adresse de courriel valide lorsque vous effectuez une session de paiement.

Ces instructions créent une saisie par courriel et utilisent le paramètre [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) à partir de l’objet `Checkout`.

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 sous forme d’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 sous forme d’objets `Customer`) lors de la création de la session Checkout. Stripe valide les adresses courriel fournies de cette manière.
- Transmettez un courriel que vous avez déjà validé sur [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm).

```html
<input type="text" id="email" />
<div id="email-errors"></div>
```

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

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Vous devez fournir une adresse de courriel valide lorsque vous effectuez une session de paiement.

Ces instructions créent une saisie par courriel et utilisent le paramètre [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) à partir de l’objet `Checkout`.

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 sous forme d’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 sous forme d’objets `Customer`) lors de la création de la session Checkout. Stripe valide les adresses courriel fournies de cette manière.
- Transmettez une adresse de courriel que vous avez déjà validée dans le champ [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm).

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

const EmailInput = () => {
  const checkoutState = useCheckout();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);

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

  const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => {
      if (result.type === 'error') {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };

  return (
    <div>
      <label htmlFor="checkout-form-email">Email</label>
      <input
        id="checkout-form-email"
        type="email"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;
```

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

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

Le Payment Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Évitez de placer le Payment Element dans une autre balise iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour obtenir la confirmation du paiement.

Si vous choisissez d’utiliser un iframe et souhaitez accepter Apple&nbsp;Pay ou Google&nbsp;Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de 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://` rather plutôt que `http://` for. 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 tout est prêt pour accepter des paiements réels.

#### HTML + JS

Tout d’abord, créez un élément DOM de conteneur pour monter le [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 faisant appel à [element.mount](https://docs.stripe.com/js/element/mount), 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 voir les options prises en charge.

Vous pouvez [personnaliser l’apparence](https://docs.stripe.com/payments/checkout/customization/appearance.md) de tous les composants 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 l’application frontale.

#### React

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

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

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

  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 voir les options prises en charge.

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

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

#### HTML + JS

Lancez un bouton **Payer** qui appelle la [confirmation](https://docs.stripe.com/js/custom_checkout/confirm) de l’instance `Checkout` pour envoyer 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

Lancez un bouton **Payer** qui appelle la [confirmation](https://docs.stripe.com/js/custom_checkout/confirm) de [l’instance Checkout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) pour envoyer le paiement.

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

const PayButton = () => {
  const checkoutState = useCheckout();
  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;
```

## Tester votre intégration

Pour tester votre intégration, choisissez le mode de paiement et appuyez sur **Payer**. Dans un *sandbox* (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 test où vous pouvez approuver ou refuser le paiement.

En mode production, en appuyant sur **Payer**, vous êtes redirigé(e) vers le site Web de Affirm. Vous n’avez pas la possibilité d’approuver ou de refuser le paiement avec Affirm.


# API Payment Intents

> This is a API Payment Intents for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=elements&api-integration=paymentintents.

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

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

## Configurer Stripe [Côté serveur]

Pour démarrer,[créez un compte Stripe](https://dashboard.stripe.com/register).

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'
```

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

Vous êtes prêt à collecter les informations de paiement du client à l’aide du Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations de paiement pour de nombreux moyens de paiement.

Le Payment Element contient un iframe qui envoie en toute sécurité les informations de paiement à Stripe au moyen d’une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par `https://` plutôt que 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 serez prêt(e) à accepter des paiements réels.

#### HTML + JS

### Configurer Stripe.js

Le composant Payment Element 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 un lot 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 :

```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 Payment Element doit avoir un emplacement précis sur votre page de paiement. Créez un nœud DOM (conteneur) vide avec 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>
```

#### Contrôler les modes de paiement à partir du Dashboard

Après le chargement du formulaire ci-dessus, créez une instance Elements avec un `mode`, `un montant` et `une devise`. Ces valeurs déterminent quels modes de paiement proposés à votre client. Pour fournir un nouveau mode de paiement dans votre formulaire, veillez à l’activer dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```javascript
const options = {mode:'payment',
  amount:5000,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

#### Lister manuellement les moyens de paiement

Pour répertorier manuellement les modes de paiement que vous souhaitez proposer, ajoutez chacun d’eux à `paymentMethodTypes`.

Ensuite, créez une instance Payment Element et montez-la sur le nœud DOM du conteneur.

```javascript
const options = {mode:'payment',
  amount:5000,
  currency: 'usd',
  paymentMethodTypes: ['affirm'],
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);

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

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

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

Pour utiliser des composants Payment&nbsp;Element, intégrez 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 et transmettez l’élément `Promise` renvoyé au fournisseur `Elements`.

#### Contrôler les modes de paiement à partir du Dashboard

Le fournisseur `Elements` accepte également un `mode`, `un montant` et `une devise`. Ces valeurs déterminent les modes de paiement proposés à votre client. Pour ajouter un nouveau mode de paiement dans votre formulaire,veillez à l’activer dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```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 = {mode:'payment',
    amount:5000,
    currency: 'usd',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

#### Lister manuellement les moyens de paiement

```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 = {mode:'payment',
    amount:5000,
    currency: 'usd',
    paymentMethodTypes: ['affirm'],
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

### Ajouter le composant Payment Element

Utilisez le composant `PaymentElement` pour créer votre formulaire.

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

const CheckoutForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Personnaliser le composant Payment&nbsp;Element pour l’adapter au design de votre site en transmettant l’[objet Appearance](https://docs.stripe.com/elements/appearance-api.md) dans les `options` lors de la création du fournisseur de `Elements`.

### Collecter les adresses

Par défaut, le composant Element Paiement collecte uniquement les détails de l’adresse de facturation nécessaires. Certains comportements, tels que le [calcul de la taxe](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des détails d’expédition, nécessite l’adresse complète de votre client. Vous pouvez&nbsp;:

- Utilisez le composant [Element Adresse](https://docs.stripe.com/elements/address-element.md) pour profiter des fonctionnalités de saisie semi-automatique et de localisation pour collecter l’adresse complète de votre client. Cela permet d’assurer le calcul de taxe le plus précis possible.
- Collectez les coordonnées à l’aide de votre propre formulaire personnalisé.

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

> #### Exécutez la logique métier personnalisée immédiatement avant la confirmation du paiement
> 
> Rendez-vous à [l’étape&nbsp;5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) du guide de finalisation des paiements pour exécuter votre logique métier personnalisée immédiatement avant la confirmation du paiement. Sinon, suivez les étapes ci-dessous pour effectuer une intégration plus simple, qui utilise ``stripe.confirmPayment` sur le client pour confirmer le paiement et gérer les actions suivantes.

#### Contrôler les modes de paiement à partir du Dashboard

Lorsque le client envoie votre formulaire de paiement, utilisez un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) pour faciliter le processus de confirmation et de paiement. Créez un PaymentIntent sur votre serveur avec un `montant et` une `devise`. Pour éviter que des clients malveillants ne choisissent leurs propres prix, décidez toujours du montant à facturer côté serveur (un environnement de confiance) et non côté client.

Un `PaymentIntent` inclut une *clé secrète du client* (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)). Renvoyez cette valeur à votre client pour que Stripe.js l’utilise pour finaliser le paiement en toute sécurité.

#### Comptes&nbsp;v2

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the customer's Account ID.
    customer_account: "{{CUSTOMER_ACCOUNT_ID}}",
    amount: 5000,
    currency: 'usd',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Clients&nbsp;v1

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 5000,
    currency: 'usd',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Lister manuellement les moyens de paiement

Lorsque le client envoie votre formulaire de paiement, utilisez un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) pour faciliter le processus de confirmation et de paiement. Créez un PaymentIntent sur votre serveur avec un `montant, une` `devise et`au moins un mode de paiement à l’aide de `payment_method_types`. Pour éviter que des clients malveillants ne choisissent leurs propres prix, décidez toujours du montant à facturer côté serveur (un environnement de confiance) et non côté client.

Une *clé secrète du client* (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)) est incluse dans un PaymentIntent. Renvoyez cette valeur à votre client pour que Stripe.js l’utilise pour finaliser le processus de paiement en toute sécurité.

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 5000,
    currency: 'usd',
    payment_method_types: ['affirm'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

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

Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour effectuer le paiement en utilisant les détails du 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 d’abord redirigé vers un site intermédiaire, comme la page d’autorisation de sa banque, avant d’être redirigé vers votre page `return_url`. Une fois le paiement par carte validé, l’utilisateur est immédiatement redirigé vers votre paramètre `return_url`.

Si vous ne souhaitez pas effectuer de redirection pour les paiements par carte après l’exécution du paiement, vous pouvez définir le paramètre [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) sur `if_required`. De cette manière, seuls les clients qui choisissent un mode de paiement avec redirection seront redirigés.

#### HTML + JS

```javascript

const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

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

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

```

#### React

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

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

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);

  const handleError = (error) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

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

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

    setLoading(true);

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch("/create-intent", {
      method: "POST",
    });

    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Payment Element
    const {error} = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      handleError(error);
    } else {
      // Your customer is redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer is redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || loading}>
        Submit Payment
      </button>
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
}
```

## Optional: Gérer les événements post-paiement

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il est possible que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel, et des clients malveillants pourraient manipuler la réponse. Si vous configurez votre intégration de manière à ce qu’elle écoute les événements asynchrones, cela vous permettra également d’accepter davantage de modes de paiement à l’avenir. Découvrez les [différences entre tous les modes de paiement pris en charge](https://stripe.com/payments/payment-methods-guide).

- **Gérer les événements manuellement dans le Dashboard**

  Utilisez le Dashboard pour [Visualisez les testes de paiement dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyez des reçus par courriel, gérez les virements ou relancez les paiements qui ont échoué.

- **Construire un point de terminaison Web personnalisé**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Intégrer une application pré-construite**

  Traitez les événements interentreprises courants, tels que [l’automatisation](https://stripe.partners/?f_category=automation) ou [le marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.

## Optional: Séparer l'autorisation et la capture

Vous pouvez séparer l’autorisation et la capture pour créer un paiement maintenant, mais capturer les fonds plus tard. Stripe annule le PaymentIntent et envoie un événement [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) si le paiement n’est pas capturé pendant le délai de 7&nbsp;jours.

Si vous êtes certain de ne pas pouvoir capturer le paiement, nous vous recommandons [d’annuler le PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) plutôt que d’attendre l’expiration du délai de 7&nbsp;jours.

### Indiquez à Stripe d’autoriser seulement

Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de l’option [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) sur `manual` lorsque vous créez le PaymentIntent. Ce paramètre indique à Stripe d’autoriser uniquement le montant sur le compte Affirm du client.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=5000 \
  -d confirm=true \
  -d currency=usd \
  -d "payment_method_types[]=affirm" \
  -d "payment_method_data[type]=payment_method" \
  -d capture_method=manual \
  --data-urlencode "return_url=https://www.example.com/checkout/done"
```

### Capturer les fonds

Une fois l’autorisation réussie, l’état de[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) passe à `requires_capture`. Pour capturer les fonds autorisés, effectuez une requête de [capture](https://docs.stripe.com/api/payment_intents/capture.md) de PaymentIntent.

```curl
curl -X POST https://api.stripe.com/v1/payment_intents/{PAYMENT_INTENT_ID}/capture \
  -u "<<YOUR_SECRET_KEY>>:"
```

Stripe capture par défaut le montant total autorisé. Vous pouvez également préciser un `amount_to_capture` inférieur ou égal au total.

### (Optional) Annulez l’autorisation

Si vous devez annuler une autorisation, vous pouvez [annuler le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) correspondant.

## Tester votre intégration

Pour tester votre intégration, choisissez le mode de paiement et appuyez sur **Payer**. Dans un *sandbox* (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 test où vous pouvez approuver ou refuser le paiement.

En mode production, en appuyant sur **Payer**, vous êtes redirigé(e) vers le site Web de Affirm. Vous n’avez pas la possibilité d’approuver ou de refuser le paiement avec Affirm.

## Codes d’erreur

Le tableau suivant détaille les codes d’erreur courants et les actions recommandées&nbsp;:

| Code d’erreur                                             | Action recommandée                                                                                                                                                                                                                                                                                                                                                                                                          |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_invalid_currency`                         | Saisissez une devise prise en charge.                                                                                                                                                                                                                                                                                                                                                                                       |
| `missing_required_parameter`                              | Consultez le message d’erreur pour en savoir plus sur le paramètre requis.                                                                                                                                                                                                                                                                                                                                                  |
| `payment_intent_payment_attempt_failed`                   | Ce code peut s’afficher dans le champ [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) d’un PaymentIntent. Consultez le message d’erreur pour obtenir une raison détaillée de l’échec et des suggestions sur la gestion des erreurs.                                                                                                          |
| `payment_intent_authentication_failure`                   | Ce code peut s’afficher dans le champ [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) d’un PaymentIntent. Consultez le message d’erreur pour obtenir une raison détaillée de l’échec et des suggestions sur la gestion des erreurs. Cette erreur se produit lorsque vous déclenchez manuellement un échec lors du test de votre intégration. |
| `payment_intent_redirect_confirmation_without_return_url` | Indiquez une `return_url` lors de la confirmation d’un PaymentIntent                                                                                                                                                                                                                                                                                                                                                        |


# API Direct

> This is a API Direct for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=direct-api.

Les utilisateurs de Stripe peuvent utiliser l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), un chemin d’intégration unique pour la création de paiements à l’aide de tout moyen pris en charge, pour accepter les paiements avec [Affirm](https://www.affirm.com/) des clients dans les pays suivants&nbsp;:

- Canada
- États-Unis

Voici les différentes étapes nécessaires pour accepter des paiements Affirm sur votre site Web&nbsp;:

- Création d’un objet de suivi du paiement
- Collecte des informations du moyen de paiement
- Envoi du paiement à Stripe à des fins de traitement
- Gestion de la redirection Affirm et des événements de webhook pertinents

## Configurer Stripe [Côté serveur]

Tout d’abord, [créez un compte Stripe](https://dashboard.stripe.com/register) ou [connectez-vous à votre compte](https://dashboard.stripe.com/login).

Utilisez nos bibliothèques officielles pour accéder à l’API de 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]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention d’encaisser le paiement d’un client et qui suit le cycle de vie du processus de paiement étape par étape.

Créez tout d’abord un `PaymentIntent` sur votre serveur, puis indiquez le montant à encaisser et la devise. Si votre intégration inclut déjà l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez Affirm à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) pour votre `PaymentIntent`.

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

Vous pouvez également utiliser le composant Payment&nbsp;Element et gérer les modes de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des modes de paiement admissibles établis en fonction de facteurs tels que le montant de la transaction, la devise et le flux de paiement. Consultez la page [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout) pour en savoir plus.

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

L’objet PaymentIntent comprend une *clé secrète du client* (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)) utilisée côté client pour effectuer le processus de paiement en toute sécurité. Vous pouvez utiliser différentes approches pour transmettre cette clé au côté client.

#### Application monopage

Récupérez la clé secrète du client à partir d’un point de terminaison sur votre serveur, en utilisant la fonction `fetch` du navigateur. Cette approche est préférable si votre côté client est une application d’une page, en particulier si celle-ci a été créée avec un cadre d’application frontal récent comme React. Créez le point de terminaison du serveur pour récupérer 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
```

Ensuite, récupérez la clé secrète du client avec JavaScript côté client:

```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 du client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer au navigateur.

Ajoutez le champ [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dans votre formulaire de paiement. Dans le 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 %>">
  <button id="submit">Submit</button>
</form>
```

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

## Collecter et envoyer les informations du moyen de paiement [Côté client]

Lorsqu’un client clique pour payer avec Affirm, nous vous recommandons d’utiliser [Stripe.js](https://docs.stripe.com/payments/elements.md) pour soumettre le paiement à Stripe. Stripe.js est notre bibliothèque JavaScript de base pour créer les flux de paiement&nbsp;: elle gère automatiquement les opérations complexes d’intégration et vous permettra de facilement étendre votre intégration à d’autres moyens de paiement par la suite.

Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises head de votre fichier HTML.

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

Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement.

```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
var stripe = Stripe(
  '<<YOUR_PUBLISHABLE_KEY>>'
);
```

Plutôt que de transmettre la totalité de l’objet PaymentIntent au client, utilisez sa clé secrète provenant de l’étape précédente. Il ne s’agit pas de vos clés API qui authentifient les requêtes de l’API de Stripe.

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.

**Améliorer les taux de paiements réussis en renseignant des informations supplémentaires**

Nous vous recommandons de transmettre les informations de [livraison](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping) et [de facturation](https://docs.stripe.com/api/payment_methods/create.md#create_payment_method-billing_details) pour améliorer les taux de conversion, bien que cela ne soit pas obligatoire.

Dans ce guide d’intégration, il vous est conseillé de transmettre les informations de livraison et de facturation côté client après que l’utilisateur a sélectionné son moyen de paiement.

Si vous transmettez ces champs, l’adresse de livraison doit comporter des données valides dans les champs `line1`, `city`, `state`, `postal_code` et `country`. De la même manière, les champs `line1`, `city`, `state`, `postal_code` et `country` des informations de facturation doivent être renseignés avec des données valides.

**Confirmer le PaymentIntent**

Utilisez `stripe.confirmAffirmPayment` pour gérer la redirection à partir de votre page et permettre l’exécution du paiement. Vous devez aussi transmettre une [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer à Stripe vers quelle page rediriger l’utilisateur une fois le paiement effectué sur le site Web ou l’application mobile Affirm.

Sur la page de paiement d’Affirm, le client choisit les options de paiement disponibles. Pour plus d’informations, consultez la vue d’ensemble. Vous ne pouvez pas limiter les options de paiement ni en présélectionner sur la page de paiement d’Affirm&nbsp;; ce choix d’options laissé au client maximise vos chances de conclure des transactions.

```javascript
// Redirects away from the client
stripe.confirmAffirmPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      // Billing information is optional but recommended to pass in.
      billing_details: {
        email: 'jenny@rosen.com',
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
    },

    // Shipping information is optional but recommended to pass in.
    shipping: {
      name: 'Jenny Rosen',
      address: {
        line1: '1234 Main Street',
        city: 'San Francisco',
        state: 'CA',
        country: 'US',
        postal_code: '94111',
      },
    },
    // Return URL where the customer should be redirected after the authorization.
    return_url: 'https://example.com/checkout/complete',
  }
).then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
    console.log(result.error.message);
  }
});
```

Lorsque votre client envoie un paiement, Stripe le redirige vers `return_url` et inclut les paramètres de requête d’URL suivants. La page de retour peut les utiliser pour obtenir l’état du PaymentIntent afin qu’il puisse afficher l’état du paiement au client.

Lorsque vous précisez l’objet `return_url`, vous pouvez également ajouter vos propres paramètres de requête à utiliser sur la page de retour.

| 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`. Pour les intégrations d’abonnements, cette client_secret est également exposée sur l’objet `Invoice` via [`confirmation_secret`](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) |

Lorsque le client est redirigé vers votre site, vous pouvez utiliser le `payment_intent_client_secret` pour demander le PaymentIntent et afficher l’état de la transaction à votre client.

## Tester une intégration Affirm

Testez votre intégration Affirm en affichant la page de redirection à l’aide de vos clés API de test. Vous pouvez tester la réussite de paiement en l’authentifiant sur la page de redirection. Le PaymentIntent passe alors de l’état `requires_action` à `succeeded`.

Pour tester un échec d’authentification de l’utilisateur, utilisez vos clés API de test et accédez à la page de redirection. Sur cette page, cliquez sur le **X** dans le coin supérieur gauche. Votre PaymentIntent passera alors de l’état `requires_action` à `requires_payment_method`.

Lors de la redirection vers le bac à sable Affirm, Affirm peut demander les quatre derniers chiffres de votre numéro de sécurité sociale. Affirm suggère d’utiliser `'0000'` ou `'5678'`.

## Optional: Séparer l'autorisation et la capture

Affirm prend en charge [l’autorisation et la capture distinctes](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). S’il y a un délai entre le paiement et la livraison des marchandises à votre client, autorisez le paiement d’abord et capturez-le plus tard. Au moment de la capture, Affirm initie les dates d’échéance des remboursements ultérieurs du client. **Vous devez capturer un paiement Affirm autorisé dans les 30&nbsp;jours suivant l’autorisation**. Dans le cas contraire, l’autorisation est automatiquement annulée et vous ne pouvez plus capturer ce paiement. Stripe annulera également le PaymentIntent et enverra un événement [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) si cela se produit.

> Pour des montants de commande très importants, Affirm peut exiger un versement de la part du client lors de l’autorisation. Si vous annulez le paiement ou si l’autorisation expire, Affirm remboursera le versement en question.

Si vous ne pouvez pas capturer le paiement, nous vous recommandons d’[annuler le PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) plutôt que d’attendre la fin du délai de 30&nbsp;jours. L’annulation proactive du PaymentIntent déclenche le remboursement immédiat du premier versement échelonné à votre client, ce qui permet d’éviter toute confusion éventuelle concernant les paiements sur son relevé.

### Indiquer à Stripe d’autoriser seulement

Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de l’option [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) sur `manual` lorsque vous créez le PaymentIntent. Ce paramètre indique à Stripe d’uniquement autoriser le montant sur le compte Affirm du client.

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=6000 \
  -d "confirm"="true" \
  -d "currency"="usd" \
  -d "payment_method_types[]"="affirm" \
  -d "capture_method"="manual" \
  // Shipping address is optional but recommended to pass in.
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111 \
  -d "payment_method_data[type]"="affirm" \
  -d "return_url"="https://www.example.com/checkout/done"
```

### Capturer les fonds

Une fois l’autorisation réussie, l’[état du PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) passe à `requires_capture`. Pour capturer les fonds autorisés, faites une demande de [capture](https://docs.stripe.com/api/payment_intents/capture.md) du PaymentIntent. Le montant total autorisé est capturé par défaut. Vous ne pouvez pas capturer plus ou moins que le total.

```bash
https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/capture \
  -u <<YOUR_SECRET_KEY>>: \
```

### (Facultatif) Annuler l’autorisation

Si vous devez annuler une autorisation, vous pouvez [annuler le PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) correspondant.

## Optional: Gérer la redirection Affirm manuellement

Nous vous recommandons d’utiliser Stripe.js pour gérer les redirections et les paiements Affirm côté client avec `confirmAffirmPayment`. Le recours à Stripe.js vous permettra de facilement ajouter de nouveaux moyens de paiement à votre intégration par la suite. Toutefois, vous pouvez aussi rediriger manuellement vos clients sur votre serveur en procédant comme suit&nbsp;:

- Créez et confirmez un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) de type `affirm`. En précisant le paramètre `payment_method_data`, nous créons un *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) et l’utilisons immédiatement avec ce PaymentIntent.

  Vous devez également fournir dans le champ `return_url` l’URL vers laquelle votre client est redirigé une fois qu’il a finalisé son paiement. Vous pouvez fournir vos propres paramètres de requête dans cette URL. Ils seront inclus dans l’URL finale à l’issue du flux de redirection.

  ```bash
  curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=6000 \
  -d "confirm"="true" \
  -d "currency"="usd" \
  -d "payment_method_types[]"="affirm" \
  // Shipping address is optional but recommended to pass in.
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111 \
  // Billing details are optional but recommended to pass in.
  -d "payment_method_data[billing_details][name]"="Jenny Rosen" \
  -d "payment_method_data[billing_details][email]"="jenny@example.com" \
  -d "payment_method_data[billing_details][address][line1]"="1234 Main Street" \
  -d "payment_method_data[billing_details][address][city]"="San Francisco" \
  -d "payment_method_data[billing_details][address][state]"="CA" \
  -d "payment_method_data[billing_details][address][country]"="US" \
  -d "payment_method_data[billing_details][address][postal_code]"=94111 \
  -d "payment_method_data[type]"="affirm" \
  -d "return_url"="https://example.com/checkout/complete"
  ```

  Le `PaymentIntent` créé se trouve à l’état `requires_action` et le type de `next_action` est `redirect_to_url`.

  ```json
  {
    "status": "requires_action",
    "next_action": {
      "type": "redirect_to_url",
      "redirect_to_url": {
        "url": "https://hooks.stripe.com/...",
        "return_url": "https://example.com/checkout/complete"
      }
    },
    "id": "pi_xxx",
    "object": "payment_intent",
    "amount": 6000,
    "client_secret": "pi_xxx_secret_xxx",
    "confirm": "true",
    "confirmation_method": "automatic",
    "created": 1579259303,
    "currency": "usd",
    "livemode": true,
    "charges": {
      "data": [],
      "object": "list",
      "has_more": false,
      "url": "/v1/charges?payment_intent=pi_xxx"
    },
    "payment_method_types": [
      "affirm"
    ]
  }
  ```

- Redirigez le client vers l’URL fournie dans la propriété `next_action.redirect_to_url.url`. L’exemple de code présenté n’est qu’à titre illustratif&nbsp;: la méthode de redirection peut différer dans votre cadre Web.

  Lorsque le client a terminé le processus de paiement, il est redirigé vers l’URL `return_url` configurée à l’étape 1. Les paramètres de requête d’URL `payment_intent` et `payment_intent_client_secret` sont inclus. Si l’URL `return_url` incluait déjà des paramètres de requête, ils seront également conservés.

  Nous vous recommandons d’[utiliser des webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) afin de confirmer l’état du paiement.

## Optional: Gérer les événements post-paiement

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il est possible que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel, et des clients malveillants pourraient manipuler la réponse. Si vous configurez votre intégration de manière à ce qu’elle écoute les événements asynchrones, cela vous permettra également d’accepter davantage de modes de paiement à l’avenir. Découvrez les [différences entre tous les modes de paiement pris en charge](https://stripe.com/payments/payment-methods-guide).

- **Gérer les événements manuellement dans le Dashboard**

  Utilisez le Dashboard pour [Visualisez les testes de paiement dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyez des reçus par courriel, gérez les virements ou relancez les paiements qui ont échoué.

- **Construire un point de terminaison Web personnalisé**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Intégrer une application pré-construite**

  Traitez les événements interentreprises courants, tels que [l’automatisation](https://stripe.partners/?f_category=automation) ou [le marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.

## Optional: Afficher des informations relatives aux moyens de paiement sur votre site Web

Le [Payment Method Messaging Element](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging) est un composant d’interface utilisateur intégrable qui permet à vos clients de savoir quelles options de paiement fractionné leur seront proposées, directement à partir de vos pages de produit, de panier ou de paiement.

Pour ajouter le composant Payment Method Messaging Element à votre site Web, veuillez consulter la page consacrée à l’[affichage des modes de paiement](https://docs.stripe.com/elements/payment-method-messaging.md).

## Échecs de paiement

Affirm prend en compte de nombreux facteurs pour accepter ou refuser une transaction (par exemple, la durée d’utilisation d’Affirm par le client, le montant restant que le client doit rembourser et la valeur de la commande actuelle).

Présentez toujours des options de paiement supplémentaires telles que `card` dans votre flux de paiement, car les paiements Affirm ont un taux de refus supérieur aux autres moyens de paiement. Dans ces cas, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et l’état de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method`.

À l’exception d’un paiement refusé, pour un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) d’Affirm dont l’état est `requires_action`, il est attendu des clients qu’ils effectuent le paiement dans un délai de 12&nbsp;heures une fois qu’ils ont été redirigés vers le site d’Affirm. Si aucune action n’est effectuée après un délai de 12&nbsp;heures, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et l’état de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method`.

Dans ce cas, informez votre client pour réessayer avec une option de paiement différente présentée dans votre tunnel de paiement.

## Codes d’erreur

Voici les codes d’erreur courants et les actions recommandées correspondantes&nbsp;:

| Code d’erreur                            | Action recommandée                                                                                                                                                                                                                                                  |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Erreur générique indiquant que le paiement via Affirm a échoué. Des informations supplémentaires peuvent être disponibles dans le motif du résultat de la transaction.                                                                                              |
| `payment_method_provider_decline`        | Affirm a refusé le paiement du client. Ensuite, le client doit contacter Affirm pour obtenir plus d’informations.                                                                                                                                                   |
| `payment_intent_payment_attempt_expired` | Le client n’a jamais effectué le paiement sur la page de paiement d’Affirm, et la session de paiement a expiré. Stripe fait expirer automatiquement les PaymentIntents qui ne sont pas autorisés avec succès 12&nbsp;heures après la création initiale du paiement. |
| `payment_method_not_available`           | Affirm a rencontré une erreur liée au service et n’est pas en mesure de répondre à la requête. Réessayez plus tard.                                                                                                                                                 |
| `amount_too_small`                       | Saisissez un montant compris dans les [limites de transactions par défaut](https://docs.stripe.com/payments/affirm.md#payment-options) d’Affirm.                                                                                                                    |
| `amount_too_large`                       | Saisissez un montant compris dans les [limites de transactions par défaut](https://docs.stripe.com/payments/affirm.md#payment-options) d’Affirm.                                                                                                                    |

Pour certaines erreurs, des informations supplémentaires peuvent être incluses dans le motif du résultat de paiement&nbsp;:

| Motif du résultat          | Ce que cela signifie                                                                                                                                                                                                                                                                                                                                                     |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `generic_decline`          | Motif par défaut d’une erreur de paiement. Cela signifie généralement que le partenaire a refusé le paiement (par exemple, en raison d’une insuffisance de fonds), que la banque émettrice a refusé le prélèvement, que la transaction concernait un achat à haut risque, ou pour une raison similaire. Stripe ne reçoit pas toujours le motif du refus dans ces cas-là. |
| `affirm_checkout_canceled` | Soit le client a explicitement annulé le paiement Affirm, soit Affirm a rejeté son admissibilité au prêt. Stripe ne peut pas faire la différence entre ces deux types d’événements.                                                                                                                                                                                      |