# Accepter un paiement OXXO

Découvrez comment accepter les paiements effectués à l'aide de OXXO, un moyen de paiement très répandu au Mexique.

# Checkout

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

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

OXXO est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui implique pour le client quelques [actions supplémentaires](https://docs.stripe.com/payments/payment-methods.md#customer-actions) pour effectuer son paiement. Les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) procèdent au paiement en espèces dans un commerce de proximité OXXO en fournissant un coupon OXXO doté d’un numéro généré automatiquement.

## Déterminer la compatibilité

**Lieux d’implantation pris en charge** : MX

**Devises prises en charge** : `mxn`

**Devises de règlement** : `mxn`

**Mode 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 OXXO :

- 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 ponctuels (les postes récurrents dans le cadre de 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) ne sont pas pris en charge).

## Accepter un paiement

> Avant d’utiliser ce guide, commencez par créer une intégration permettant d’[accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout) avec Checkout.

Cela vous explique comment activer OXXO et vous montre les différences entre l’acceptation de paiements à l’aide de moyens de paiement dynamiques et la configuration manuelle des moyens de paiement.

### Activer OXXO comme moyen de paiement

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

1. Ajouter `oxxo` à la liste des `payment_method_types`.
1. Veiller à ce que tous vos `line_items` utilisent la devise `mxn`.

#### Une 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]=mxn" \
  -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_types[0]=card" \
  -d "payment_method_types[1]=oxxo" \
  --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]=mxn" \
  -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_types[0]=card" \
  -d "payment_method_types[1]=oxxo" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### Options supplémentaires du moyen de paiement

Vous pouvez définir le paramètre facultatif `expires_after_days` dans les [options du moyen de paiement](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-oxxo-expires_after_days) de votre `Session` pour déterminer le nombre de jours calendaires avant expiration de votre coupon OXXO. Par exemple si vous créez un coupon OXXO un lundi en définissant le paramètre `expires_after_days` sur&nbsp;2, le coupon OXXO expirera le mercredi suivant à 23&nbsp;h&nbsp;59, heure de la ville de Mexico (America/Mexico_City&nbsp;: UTC-6). La valeur du paramètre `expires_after_days` doit être comprise entre 1 et 7&nbsp;jours. Par défaut, elle est de 3&nbsp;jours.

#### Une 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]=mxn" \
  -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[oxxo][expires_after_days]=2" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=oxxo" \
  --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]=mxn" \
  -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[oxxo][expires_after_days]=2" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=oxxo" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### Rediriger vers la page du coupon hébergée par Stripe

Une fois l’envoi du formulaire Checkout effectué, le client est redirigé vers la page `hosted_voucher_url`. Il accède au code-barres ou imprime le coupon OXXO depuis la page coupon hébergée. Le `hosted_voucher_url` est disponible dans [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url).

Stripe vous permet de personnaliser les interfaces utilisateur sur la page [Paramètres de marque](https://dashboard.stripe.com/account/branding). Vous pouvez appliquer les paramètres de marque suivants au coupon&nbsp;:

- **Icône**&nbsp;: image représentant votre marque et votre dénomination sociale publique
- **Couleur secondaire**&nbsp;: utilisée comme couleur du bouton d’impression
- **Couleur de marque**&nbsp;: utilisée comme couleur d’arrière-plan

### Traiter vos commandes

OXXO étant un moyen de paiement à notification différée, vous devez utiliser une méthode telle que des *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) pour suivre l’état des paiements et gérer la *réalisation* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) des commandes. Découvrez-en plus sur [la configuration des webhooks et la réalisation des commandes](https://docs.stripe.com/checkout/fulfillment.md).

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 envoyé le formulaire Checkout. Stripe a généré le coupon OXXO.

  Vous pouvez choisir d’envoyer le `hosted_voucher_url` à votre client par e-mail au cas où il perdrait le coupon OXXO. | Attendez que le client s’acquitte du paiement du coupon OXXO.                   |
| [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Le client s’est acquitté du paiement du coupon OXXO. Le `PaymentIntent` bascule sur `succeeded`.                                                                                                    | Traitez la commande de biens ou de services du client.                          |
| [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed)       | Le coupon OXXO a expiré, ou le paiement a échoué pour un autre motif. Le `PaymentIntent` revient à l’état `requires_payment_method`.                                                                | Contactez le client par e-mail et demandez-lui de passer une nouvelle commande. |

## Tester votre intégration

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

| Adresse e-mail                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simule un coupon OXXO réglé par le client au bout de 3&nbsp;minutes et pour lequel le webhook `payment_intent.succeeded` arrive après environ 3&nbsp;minutes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `{any_prefix}succeed_immediately@{any_domain}` | Simule un coupon OXXO immédiatement réglé par le client et pour lequel le webhook `payment_intent.succeeded` arrive en quelques secondes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `{any_prefix}expire_immediately@{any_domain}`  | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive en quelques secondes.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur la date/heure du jour, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_immediately@test.com                |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout de 3&nbsp;minutes environ.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur 3&nbsp;minutes plus tard, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_with_delay@test.com |
| `{any_prefix}fill_never@{any_domain}`          | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout d’un jour ouvré et de deux jours calendaires. En mode production, ce webhook arrive à la même vitesse qu’en mode test.

  Exemple&nbsp;: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                               |

## Optional: Envoyer des instructions sur les paiements par e-mail

Vous pouvez activer l’envoi d’instructions sur les paiements OXXO et de rappels par e-mail sur la page [Paramètres des e-mails](https://dashboard.stripe.com/settings/emails) sur le Dashboard. Une fois activé, Stripe enverra par e-mail des instructions sur les paiements dès le PaymentIntent confirmé. Les e-mails contiennent le numéro OXXO et un lien vers la page coupon hébergée par Stripe.

> Dans les environnements de test, seules les adresses e-mail associées au compte Stripe reçoivent des instructions par e-mail.

## See also

- [Exécution Checkout](https://docs.stripe.com/checkout/fulfillment.md)
- [Personnaliser Checkout](https://docs.stripe.com/payments/checkout/customization.md)


# 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/oxxo/accept-a-payment?payment-ui=elements&api-integration=checkout.

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

## Déterminer la compatibilité

**Lieux d’implantation pris en charge**&nbsp;: MX

**Devises prises en charge**&nbsp;: `mxn`

**Devises de règlement**&nbsp;: `mxn`

**Mode 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 OXXO&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.
- Vous ne pouvez utiliser que des postes ponctuels (les postes récurrents dans le cadre de plans d’abonnement ne sont pas pris en charge).

## Configurer le serveur [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'
```

## Créer une session Checkout [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 depuis 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: 'mxn',
          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');
});
```

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

#### 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: 'mxn',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    payment_method_types: ['oxxo'],
    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>>");
```

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

## Collecter les adresses e-mail des clients [Côté client]

#### HTML + JS

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

Ces instructions créent une saisie d’e-mail et utilisent [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 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.
- Transmettre un e-mail 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 e-mail client valide lors d’une Checkout Session.

Ces instructions créent une saisie d’e-mail et utilisent [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 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.
- Transmettre une adresse e-mail que vous avez déjà validée avec [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm).

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

const EmailInput = () => {
  const checkoutState = useCheckoutElements();
  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 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).

## Envoyer le paiement [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;
```

## Tester votre intégration

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 oxxo. Vous n’avez pas la possibilité d’autoriser ou de refuser le paiement avec oxxo.


# 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/oxxo/accept-a-payment?payment-ui=elements&api-integration=paymentintents.

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

## Configurer Stripe [Côté serveur]

Pour commencer, [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 à recueillir les informations de paiement de votre client à l’aide du composant Element Payment, un composant préconfiguré de l’interface utilisateur qui simplifie cette collecte pour de nombreux moyens de paiement.

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

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par `https://` et non par `http://`. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’[activer](https://docs.stripe.com/security/guide.md#tls) lorsque vous souhaitez commencer à accepter des paiements réels.

#### HTML + JS

### Configurer Stripe.js

Le 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 au `head` votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme aux normes PCI. N’incluez pas le script dans un lot et n’en hébergez pas 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 composant Payment&nbsp;Element à votre page de paiement

Le Payment Element doit avoir un emplacement 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 moyens de paiement dans le Dashboard

Une fois le formulaire ci-dessus chargé, créez une instance Elements avec les paramètres `mode`, `amount` et `currency`. Ces valeurs déterminent les moyens de paiement présentés à votre client. Pour proposer un nouveau moyen de paiement dans votre formulaire, veillez à l’activer dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'mxn',
  // 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');
```

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

Pour lister manuellement les moyens de paiement que vous souhaitez proposer, ajoutez chacun d’eux à `paymentMethodTypes`.

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

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'mxn',
  paymentMethodTypes: ['oxxo'],
  // 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 et configurer le fournisseur Elements sur votre page de paiement

Pour utiliser le composant Payment&nbsp;Element, incluez 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 le paramètre `Promise` renvoyé au fournisseur `Elements`.

#### Contrôler les moyens de paiement dans le Dashboard

Le fournisseur `Elements` accepte également les paramètres `mode`, `amount` et `currency`. Ces valeurs déterminent les moyens de paiement présentés à votre client. Pour proposer un nouveau moyen 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:1099,
    currency: 'mxn',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

#### Répertorier 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:1099,
    currency: 'mxn',
    paymentMethodTypes: ['oxxo'],
    // 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;
```

Vous pouvez personnaliser le 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 `Elements`.

### Collecter les adresses

Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le [calcul des taxes](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez&nbsp;:

- Utilisez l’[Address Element](https://docs.stripe.com/elements/address-element.md) pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible.
- Recueillez l’adresse à l’aide de votre propre formulaire personnalisé.

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

> #### Exécuter une logique métier personnalisée immédiatement avant la confirmation du paiement
> 
> Accédez à l’[étape&nbsp;5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) du guide «&nbsp;Finaliser&nbsp;» les paiements pour exécuter votre logique métier personnalisée immédiatement avant la confirmation du paiement. Sinon, suivez la procédure ci-dessous pour une intégration plus simple, qui utilise `stripe.confirmPayment` au niveau du client afin de confirmer le paiement et gérer les actions qui pourraient suivre.

#### Contrôler les moyens de paiement dans le 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 les paramètres `amount` et `currency`. Pour éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs, fixez systématiquement le montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client.

Un objet `PaymentIntent` contient 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 côté client afin que Stripe.js l’utilise pour finaliser le processus de paiement en toute sécurité.

#### Accounts&nbsp;v2

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

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

#### Customers&nbsp;v1

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1099,
    currency: 'mxn',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Répertorier 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 `amount`, une `currency` et un ou plusieurs moyens de paiement à l’aide de `payment_method_types`. Pour éviter que des clients malveillants ne puissent définir eux-mêmes leurs tarifs, fixez systématiquement le montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client.

L’objet PaymentIntent contient 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 côté client afin que Stripe.js l’utilise pour finaliser le processus de paiement en toute sécurité.

#### Accounts&nbsp;v2

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the customer's Account ID.
    customer_account: customer_account.id,
    amount: 1099,
    currency: 'mxn',
    payment_method_types: ['oxxo'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Customers&nbsp;v1

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1099,
    currency: 'mxn',
    payment_method_types: ['oxxo'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

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

Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour finaliser 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 à Stripe où rediriger l’utilisateur une fois le paiement effectué. Dans un premier temps, votre utilisateur sera peut-être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers l’URL `return_url`. Une fois le paiement par carte abouti, l’utilisateur est immédiatement redirigé vers l’URL `return_url`.

Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, 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 moyen 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 e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens 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 [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.

- **Créer un webhook personnalisé**

  [Créez un gestionnaire de webhooks personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) pour écouter les événements et concevoir des flux de paiement asynchrones sur mesure. Testez et déboguez votre intégration de webhooks en local avec la Stripe CLI.

- **Intégrer une application prédéfinie**

  Gérez les événements commerciaux 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.

## Tester votre intégration

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 oxxo. Vous n’avez pas la possibilité d’autoriser ou de refuser le paiement avec oxxo.

## 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`                         | Spécifiez 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 apparaître 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 connaître la raison détaillée de l’échec et obtenir une suggestion de traitement de l’erreur.                                                                                                         |
| `payment_intent_authentication_failure`                   | Ce code peut apparaître 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 connaître le motif détaillé de l’échec et obtenir une suggestion sur la gestion de l’erreur. 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` | Précisez une `return_url` lors de la confirmation d’un PaymentIntent.                                                                                                                                                                                                                                                                                                                                                             |


# iOS

> This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/oxxo/accept-a-payment?payment-ui=mobile&platform=ios.

> Nous vous recommandons de suivre le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md), sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le [Guide de migration du Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element/migration.md).

Accepter OXXO dans votre application consiste à afficher une vue Web donnant accès à un coupon OXXO. Les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) procèdent au paiement en espèces dans un commerce de proximité OXXO en fournissant un coupon OXXO doté d’un numéro généré automatiquement. Stripe vous informe lorsque le paiement est effectué.

## Configurer Stripe [Côté serveur] [Côté client]

Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register).

### Côté serveur

Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur&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'
```

### Côté client

Le [SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-ios/index.html). Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures.

#### Swift Package Manager

Pour installer le SDK, veuillez suivre les étapes ci-dessous&nbsp;:

1. Dans Xcode, sélectionnez **File** > **Add Package Dependencies…** puis saisissez `https://github.com/stripe/stripe-ios-spm` en tant qu’URL du référentiel.
1. Sélectionnez le dernier numéro de version, visible sur notre [page des versions](https://github.com/stripe/stripe-ios/releases).
1. Ajoutez le produit **StripePaymentsUI** à la [cible de votre application](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).

#### CocoaPods

1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Si vous n’avez pas de fichier [Podfile](https://guides.cocoapods.org/syntax/podfile.html), exécutez la commande suivante pour en créer un&nbsp;:
   ```bash
   pod init
   ```
1. Ajoutez cette ligne à votre `Podfile`&nbsp;:
   ```podfile
   pod 'StripePaymentsUI'
   ```
1. Exécutez la commande suivante&nbsp;:
   ```bash
   pod install
   ```
1. À partir de maintenant, n’oubliez pas d’utiliser le fichier .xcworkspace au lieu du fichier .xcodeproj pour ouvrir votre projet dans Xcode.
1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, il vous suffit d’exécuter&nbsp;:
   ```bash
   pod update StripePaymentsUI
   ```

#### Carthage

1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Ajoutez cette ligne à votre `Cartfile`&nbsp;:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Suivez les [instructions d’installation de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Veillez à intégrer tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking).
1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, exécutez la commande suivante&nbsp;:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Cadre manuel

1. Accédez à notre [page des versions GitHub](https://github.com/stripe/stripe-ios/releases/latest), puis téléchargez et décompressez **Stripe.xcframework.zip**.
1. Faites glisser **StripePaymentsUI.xcframework** vers la section **Embedded Binaries (Fichiers binaires incorporés)** des paramètres **General (Général)** de votre projet Xcode. Veillez à sélectionner **Copy items if needed (Copier les éléments si nécessaire)**.
1. Répétez l’étape 2 pour tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking).
1. À l’avenir, pour mettre à jour vers la version la plus récente de notre SDK, répétez les étapes&nbsp;1 à 3.

> Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir une notification lors de la publication d’une nouvelle version, [surveillez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) à partir du référentiel.

Configurez le SDK avec votre [clé publiable](https://dashboard.stripe.com/test/apikeys) Stripe au démarrage de votre application. Cela lui permet d’envoyer des requêtes à l’API Stripe.

#### Swift

```swift
import UIKitimportStripePaymentsUI

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<<YOUR_PUBLISHABLE_KEY>>"
        // do any other necessary launch configuration
        return true
    }
}
```

> Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application.

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

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.

### Côté serveur

Créez un PaymentIntent sur votre serveur avec un montant et la devise `mxn` (OXXO ne prendre en charge les autres devises). Si vous disposez déjà d’une intégration utilisant l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `oxxo` à 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

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

### Options supplémentaires du moyen de paiement

Vous pouvez assigner à votre `PaymentIntent` un paramètre facultatif `expires_after_days` dans les [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days), afin de configurer le nombre de jours calendaires avant l’expiration d’un coupon OXXO. Par exemple, si vous créez un coupon OXXO le lundi avec un paramètre `expires_after_days` de&nbsp;2, le coupon OXXO expirera le mercredi suivant à 23&nbsp;h&nbsp;59, heure de la ville de Mexico (America/Mexico_City&nbsp;: UTC-6). La valeur du paramètre `expires_after_days` doit être comprise entre 1 et 7&nbsp;jours. Par défaut, elle est de 3&nbsp;jours.

### Côté client

Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la clé secrète du client.

#### Swift

```swift
class CheckoutViewController: UIViewController {
    var paymentIntentClientSecret: String?

    func startCheckout() {
        // Request a PaymentIntent from your server and store its client secret
    }
}
```

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

Dans votre application, collectez les informations de facturation requises suivantes auprès du client. Ensuite, créez un objet [STPPaymentIntentParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentParams.html) à l’aide de ces informations.

| Champ   | Valeur                                                                         |
| ------- | ------------------------------------------------------------------------------ |
| `name`  | Le nom et le prénom du client. Chacun doit comporter au moins deux caractères. |
| `email` | L’adresse e-mail complète du client.                                           |

#### Swift

```swift
let billingDetails = STPPaymentMethodBillingDetails()
billingDetails.name = "Jane Doe"
billingDetails.email = "test@example.com" EOF )
```

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

Récupérez la clé secrète du client dans le PaymentIntent créé à l’étape&nbsp;2, puis appelez [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:). Une vue Web affiche le bon OXXO. Une fois l’opération terminée, le bloc de finalisation est appelé avec le résultat du paiement.

#### Swift

```swift
let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret)
let oxxoParams = STPPaymentMethodOXXOParams();
paymentIntentParams.paymentMethodParams = STPPaymentMethodParams(
    oxxo: oxxoParams,
    billingDetails: billingDetails,
    metadata: nil
)

STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in
    switch handlerStatus {
    case .succeeded:
        // The OXXO voucher was displayed successfully. The customer can now pay the OXXO voucher at the OXXO convenience store.
    case .canceled:
        // Payment was canceled

    case .failed:
        // Payment failed

    @unknown default:
        fatalError()
    }
}
```

### Facultatif&nbsp;: Envoyer à votre client un e-mail contenant un lien vers le coupon

Stripe envoie un événement [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) lors de la création d’un coupon OXXO. Si vous souhaitez envoyer à votre client un e-mail contenant un lien vers le coupon, vous pouvez [récupérer le PaymentIntent](https://docs.stripe.com/api/payment_intents/retrieve.md) afin d’obtenir un lien lors de la réception de l’événement. Le champ `hosted_voucher_url` de [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) contient un lien vers le coupon.

### Facultatif&nbsp;: Personnaliser votre coupon

Stripe permet de personnaliser les interfaces utilisateur sur la page [Adaptation à votre marque](https://dashboard.stripe.com/account/branding).

Vous pouvez appliquer les paramètres de marque suivants à vos coupons&nbsp;:

- **Icône**&nbsp;: image représentant votre marque et votre dénomination sociale publique
- **Couleur d’accentuation**&nbsp;: utilisée comme couleur du bouton Copier le numéro
- **Couleur de marque**&nbsp;: utilisée comme couleur d’arrière-plan

## Gérer les événements post-paiement [Côté serveur]

OXXO est un moyen de paiement [à notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ce qui signifie que les fonds ne sont pas disponibles immédiatement. Il est possible que les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) ne se rendent pas immédiatement dans un magasin pour régler le coupon OXXO.

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) le jour ouvrable suivant (du lundi au vendredi, sauf jours fériés mexicains) pour chaque coupon OXXO payé. Utilisez le Dashboard ou créez un gestionnaire de *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) pour recevoir ces événements et exécuter certaines actions (comme l’envoi par e-mail d’une confirmation de commande à votre client, l’enregistrement de la vente dans une base de données ou le lancement d’un flux de livraison).

Une fois la date d’expiration passée, l’état du PaymentIntent passe à `processing` et le client ne peut plus effectuer le règlement du coupon OXXO expiré. Si le coupon OXXO n’est pas payé avant 23&nbsp;h&nbsp;59, heure de la ville de Mexico (America/Mexico_City&nbsp;: UTC-6) le jour de son expiration, Stripe envoie un événement [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) au plus tard 10&nbsp;jours calendaires (et le plus souvent moins de 7&nbsp;jours) après la date d’expiration. Par exemple si le coupon OXXO expire le 1er&nbsp;septembre, l’évènement sera envoyé au plus tard le 10&nbsp;septembre.

| Événement                        | Description                                                  | Étapes suivantes                                                                                              |
| -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | Le coupon OXXO a bien été créé.                              | Attendez que le client règle le coupon OXXO.                                                                  |
| `payment_intent.processing`      | Le client ne peut plus régler le coupon OXXO.                | Attendez que le paiement réussisse ou échoue.                                                                 |
| `payment_intent.succeeded`       | Le client a réglé le coupon OXXO avant son expiration.       | Traitez la commande de biens ou de services de votre client.                                                  |
| `payment_intent.payment_failed`  | Le client n’a pas réglé le coupon OXXO avant son expiration. | Envoyez un e-mail ou une notification push au client pour lui demander d’utiliser un autre moyen de paiement. |

### Recevoir des événements et exécuter des actions métier

#### Manuellement

Utilisez le Dashboard Stripe pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements en échec.

- [Afficher vos paiements tests dans le Dashboard](https://dashboard.stripe.com/test/payments)

#### Code personnalisé

Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe.

- [Créez un webhook personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Tester l'intégration

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), définissez [STPPaymentMethodBillingDetails email](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodBillingDetails.html#/c:@M@StripePayments@objc\(cs\)STPPaymentMethodBillingDetails\(py\)email) sur les valeurs suivantes lorsque vous appelez [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) pour tester différents scénarios.

| Adresse e-mail                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simule un coupon OXXO réglé par le client au bout de 3&nbsp;minutes et pour lequel le webhook `payment_intent.succeeded` arrive après environ 3&nbsp;minutes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `{any_prefix}succeed_immediately@{any_domain}` | Simule un coupon OXXO immédiatement réglé par le client et pour lequel le webhook `payment_intent.succeeded` arrive en quelques secondes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `{any_prefix}expire_immediately@{any_domain}`  | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive en quelques secondes.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur la date/heure du jour, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_immediately@test.com                |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout de 3&nbsp;minutes environ.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur 3&nbsp;minutes plus tard, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_with_delay@test.com |
| `{any_prefix}fill_never@{any_domain}`          | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout d’un jour ouvré et de deux jours calendaires. En mode production, ce webhook arrive à la même vitesse qu’en mode test.

  Exemple&nbsp;: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                               |

## Expiration et annulation

Les coupons OXXO expirent après l’horodatage Unix `expires_after`. Une fois le coupon OXXO expiré, le client ne peut plus effectuer le règlement. Les coupons OXXO ne peuvent pas être annulés avant leur expiration.

Après expiration d’un bon de réduction OXXO, l’état de la PaymentIntent passe à `requires_payment_method`. Vous pouvez alors confirmer la PaymentIntent avec un autre moyen de paiement, ou l’annuler.


# Android

> This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/oxxo/accept-a-payment?payment-ui=mobile&platform=android.

> Nous vous recommandons de suivre le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md), sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le [Guide de migration du Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element/migration.md).

Accepter OXXO dans votre application consiste à afficher une vue Web donnant accès à un coupon OXXO. Les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) procèdent au paiement en espèces dans un commerce de proximité OXXO en fournissant un coupon OXXO doté d’un numéro généré automatiquement. Stripe vous informe lorsque le paiement est effectué.

## Configurer Stripe [Côté serveur] [Côté client]

Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register).

### Côté serveur

Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur&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'
```

### Côté client

Le [SDK Stripe Android](https://github.com/stripe/stripe-android) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-android/).

Pour installer le SDK, ajoutez `stripe-android` au bloc `dependencies` de votre fichier [app/build.gradle](https://developer.android.com/studio/build/dependencies)&nbsp;:

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Stripe Android SDK
  implementation("com.stripe:stripe-android:23.8.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.8.0")
}
```

> Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-android/releases) sur GitHub. Pour savoir quand une nouvelle version est disponible, [surveillez les versions du référentiel](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

Configurez le SDK avec votre [clé publique](https://dashboard.stripe.com/apikeys) Stripe de façon à ce qu’il puisse envoyer des requêtes à l’API Stripe, par exemple à la sous-classe `Application`&nbsp;:

#### Kotlin

```kotlin
import com.stripe.android.PaymentConfiguration

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        PaymentConfiguration.init(
            applicationContext,
            "<<YOUR_PUBLISHABLE_KEY>>"
        )
    }
}
```

> Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application.

Les échantillons de code de Stripe utilisent également [OkHttp](https://github.com/square/okhttp) et [GSON](https://github.com/google/gson) pour envoyer des requêtes HTTP à un serveur.

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

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.

### Côté serveur

Créez un PaymentIntent sur votre serveur avec un montant et la devise `mxn` (OXXO ne prendre en charge les autres devises). Si vous disposez déjà d’une intégration utilisant l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `oxxo` à 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

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

### Options supplémentaires du moyen de paiement

Vous pouvez assigner à votre `PaymentIntent` un paramètre facultatif `expires_after_days` dans les [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days), afin de configurer le nombre de jours calendaires avant l’expiration d’un coupon OXXO. Par exemple, si vous créez un coupon OXXO le lundi avec un paramètre `expires_after_days` de&nbsp;2, le coupon OXXO expirera le mercredi suivant à 23&nbsp;h&nbsp;59, heure de la ville de Mexico (America/Mexico_City&nbsp;: UTC-6). La valeur du paramètre `expires_after_days` doit être comprise entre 1 et 7&nbsp;jours. Par défaut, elle est de 3&nbsp;jours.

### Côté client

Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la clé secrète du client.

#### Kotlin

```kotlin
class OXXOActivity: AppCompatActivity() {
    private lateinit var paymentIntentClientSecret: String

    private fun startCheckout() {
        // Request a PaymentIntent from your server and store its client secret
    }
}
```

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

Dans votre application, collectez les informations de facturation ci-après auprès de votre client. Créez ensuite un objet [PaymentMethodCreateParams](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-create-params/index.html) à l’aide de ces données.

| Champ   | Valeur                                                                         |
| ------- | ------------------------------------------------------------------------------ |
| `name`  | Le nom et le prénom du client. Chacun doit comporter au moins deux caractères. |
| `email` | L’adresse e-mail complète du client.                                           |

#### Kotlin

```kotlin
val billingDetails =
  PaymentMethod.BillingDetails(email = "email@email.com", name = "Jenny Rosen")
val paymentMethodCreateParams = PaymentMethodCreateParams.createOxxo(billingDetails)
```

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

Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé à l’étape&nbsp;2, puis appelez la fonction [confirm de PaymentLauncher](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690). Une page Web s’ouvre pour afficher le coupon OXXO. Une fois l’opération terminée, `onPaymentResult` est appelé avec le résultat du paiement.

#### Kotlin

```kotlin
class OXXOActivity : AppCompatActivity() {
    // ...
    private lateinit var paymentIntentClientSecret: String
    private val paymentLauncher: PaymentLauncher by lazy {
        val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext)
        PaymentLauncher.Companion.create(
            this,
            paymentConfiguration.publishableKey,
            paymentConfiguration.stripeAccountId,
            ::onPaymentResult
        )
    }

    private fun startCheckout() {
        // ...

        val confirmParams = ConfirmPaymentIntentParams
                .createWithPaymentMethodCreateParams(
                  paymentMethodCreateParams = paymentMethodCreateParams,
                  clientSecret = paymentIntentClientSecret
                )
        paymentLauncher.confirm(confirmParams)
    }

    private fun onPaymentResult(paymentResult: PaymentResult) {
        when (paymentResult) {
            is PaymentResult.Completed -> {
                // The OXXO voucher was displayed successfully.
                // The customer can now pay the OXXO voucher at the OXXO convenience store.
            }
            is PaymentResult.Canceled -> {
                // handle cancel flow
            }
            is PaymentResult.Failed -> {
                // handle failures
                // (for example, the customer may need to choose a new payment
                // method)
            }
        }
    }
}
```

### Facultatif&nbsp;: Envoyer à votre client un e-mail contenant un lien vers le coupon

Stripe envoie un événement [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) lors de la création d’un coupon OXXO. Si vous souhaitez envoyer à votre client un e-mail contenant un lien vers le coupon, vous pouvez [récupérer le PaymentIntent](https://docs.stripe.com/api/payment_intents/retrieve.md) afin d’obtenir un lien lors de la réception de l’événement. Le champ `hosted_voucher_url` de [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) contient un lien vers le coupon.

### Facultatif&nbsp;: Personnaliser votre coupon

Stripe permet de personnaliser les interfaces utilisateur sur la page [Adaptation à votre marque](https://dashboard.stripe.com/account/branding).

Vous pouvez appliquer les paramètres de marque suivants à vos coupons&nbsp;:

- **Icône**&nbsp;: image représentant votre marque et votre dénomination sociale publique
- **Couleur d’accentuation**&nbsp;: utilisée comme couleur du bouton Copier le numéro
- **Couleur de marque**&nbsp;: utilisée comme couleur d’arrière-plan

## Gérer les événements post-paiement [Côté serveur]

OXXO est un moyen de paiement [à notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ce qui signifie que les fonds ne sont pas disponibles immédiatement. Il est possible que les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) ne se rendent pas immédiatement dans un magasin pour régler le coupon OXXO.

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) le jour ouvrable suivant (du lundi au vendredi, sauf jours fériés mexicains) pour chaque coupon OXXO payé. Utilisez le Dashboard ou créez un gestionnaire de *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) pour recevoir ces événements et exécuter certaines actions (comme l’envoi par e-mail d’une confirmation de commande à votre client, l’enregistrement de la vente dans une base de données ou le lancement d’un flux de livraison).

Une fois la date d’expiration passée, l’état du PaymentIntent passe à `processing` et le client ne peut plus effectuer le règlement du coupon OXXO expiré. Si le coupon OXXO n’est pas payé avant 23&nbsp;h&nbsp;59, heure de la ville de Mexico (America/Mexico_City&nbsp;: UTC-6) le jour de son expiration, Stripe envoie un événement [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) au plus tard 10&nbsp;jours calendaires (et le plus souvent moins de 7&nbsp;jours) après la date d’expiration. Par exemple si le coupon OXXO expire le 1er&nbsp;septembre, l’évènement sera envoyé au plus tard le 10&nbsp;septembre.

| Événement                        | Description                                                  | Étapes suivantes                                                                                              |
| -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | Le coupon OXXO a bien été créé.                              | Attendez que le client règle le coupon OXXO.                                                                  |
| `payment_intent.processing`      | Le client ne peut plus régler le coupon OXXO.                | Attendez que le paiement réussisse ou échoue.                                                                 |
| `payment_intent.succeeded`       | Le client a réglé le coupon OXXO avant son expiration.       | Traitez la commande de biens ou de services de votre client.                                                  |
| `payment_intent.payment_failed`  | Le client n’a pas réglé le coupon OXXO avant son expiration. | Envoyez un e-mail ou une notification push au client pour lui demander d’utiliser un autre moyen de paiement. |

### Recevoir des événements et exécuter des actions métier

#### Manuellement

Utilisez le Dashboard Stripe pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements en échec.

- [Afficher vos paiements tests dans le Dashboard](https://dashboard.stripe.com/test/payments)

#### Code personnalisé

Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe.

- [Créez un webhook personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Tester l'intégration

Dans un environnement de test, définissez [PaymentMethod.BillingDetails#email](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method/-billing-details/index.html) sur les valeurs suivantes lorsque vous appelez [Stripe\# confirmPayment()](https://stripe.dev/stripe-android/payments-core/com.stripe.android/-stripe/confirm-payment.html) pour tester différents scénarios.

| Adresse e-mail                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simule un coupon OXXO réglé par le client au bout de 3&nbsp;minutes et pour lequel le webhook `payment_intent.succeeded` arrive après environ 3&nbsp;minutes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `{any_prefix}succeed_immediately@{any_domain}` | Simule un coupon OXXO immédiatement réglé par le client et pour lequel le webhook `payment_intent.succeeded` arrive en quelques secondes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `{any_prefix}expire_immediately@{any_domain}`  | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive en quelques secondes.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur la date/heure du jour, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_immediately@test.com                |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout de 3&nbsp;minutes environ.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur 3&nbsp;minutes plus tard, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_with_delay@test.com |
| `{any_prefix}fill_never@{any_domain}`          | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout d’un jour ouvré et de deux jours calendaires. En mode production, ce webhook arrive à la même vitesse qu’en mode test.

  Exemple&nbsp;: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                               |

## Expiration et annulation

Les coupons OXXO expirent après l’horodatage Unix `expires_after`. Une fois le coupon OXXO expiré, le client ne peut plus effectuer le règlement. Les coupons OXXO ne peuvent pas être annulés avant leur expiration.

Après expiration d’un bon de réduction OXXO, l’état de la PaymentIntent passe à `requires_payment_method`. Vous pouvez alors confirmer la PaymentIntent avec un autre moyen de paiement, ou l’annuler.


# React Native

> This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/oxxo/accept-a-payment?payment-ui=mobile&platform=react-native.

> Nous vous recommandons de suivre le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md), sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le [Guide de migration du Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element/migration.md).

Accepter OXXO dans votre application consiste à afficher une vue Web donnant accès à un coupon OXXO. Les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) procèdent au paiement en espèces dans un commerce de proximité OXXO en fournissant un coupon OXXO doté d’un numéro généré automatiquement. Stripe vous informe lorsque le paiement est effectué.

## Configurer Stripe [Côté serveur] [Côté client]

### Côté serveur

Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur&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'
```

### Côté client

Le [SDK React Native](https://github.com/stripe/stripe-react-native) est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK [Android](https://github.com/stripe/stripe-android) et [iOS natifs](https://github.com/stripe/stripe-ios). Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez)&nbsp;:

#### yarn

```bash
yarn add @stripe/stripe-react-native
```

#### npm

```bash
npm install @stripe/stripe-react-native
```

Ensuite, installez les autres dépendances nécessaires&nbsp;:

- Pour iOS, accédez au directeur **ios** et exécutez `pod install` pour vous assurer que vous installez également les dépendances natives requises.
- Pour Android, il n’y a plus de dépendances à installer.

> Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript.

### Initialisation de Stripe

Pour initialiser Stripe dans votre application React&nbsp;Native, wrappez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API dans `publishableKey` est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`.

```jsx
import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

> Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) d’API lors de vos activités de test et de développement, et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application.

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

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.

### Côté serveur

Créez un PaymentIntent sur votre serveur avec un montant et la devise `mxn` (OXXO ne prendre en charge les autres devises). Si vous disposez déjà d’une intégration utilisant l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `oxxo` à 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

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

### Options supplémentaires du moyen de paiement

Vous pouvez assigner à votre `PaymentIntent` un paramètre facultatif `expires_after_days` dans les [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days), afin de configurer le nombre de jours calendaires avant l’expiration d’un coupon OXXO. Par exemple, si vous créez un coupon OXXO le lundi avec un paramètre `expires_after_days` de&nbsp;2, le coupon OXXO expirera le mercredi suivant à 23&nbsp;h&nbsp;59, heure de la ville de Mexico (America/Mexico_City&nbsp;: UTC-6). La valeur du paramètre `expires_after_days` doit être comprise entre 1 et 7&nbsp;jours. Par défaut, elle est de 3&nbsp;jours.

### Côté client

Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la *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)) qu’il contient.

```javascript
const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email,
      currency: 'mxn',
      payment_method_types: ['oxxo'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};
```

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

Dans votre application, recueillez le nom complet et l’adresse e-mail de votre client.

```javascript
export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}
```

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

Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé, puis appelez le `confirmPayment`. Une vue Web affiche alors le coupon OXXO.

```javascript
export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name,
      email,
    };

    const { error, paymentIntent } = await confirmPayment(clientSecret, {
      paymentMethodType: 'Oxxo',
      paymentMethodData: {
        billingDetails,
      }
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Payment confirmation error', error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.RequiresAction) {
        Alert.alert(
          'Success',
          `The OXXO voucher was created successfully. Awaiting payment from customer.`
        );
      } else {
        Alert.alert('Payment intent status:', paymentIntent.status);
      }
    }
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}
```

### Facultatif&nbsp;: Envoyer à votre client un e-mail contenant un lien vers le coupon

Stripe envoie un événement [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) lors de la création d’un coupon OXXO. Si vous souhaitez envoyer à votre client un e-mail contenant un lien vers le coupon, vous pouvez [récupérer le PaymentIntent](https://docs.stripe.com/api/payment_intents/retrieve.md) afin d’obtenir un lien lors de la réception de l’événement. Le champ `hosted_voucher_url` de [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) contient un lien vers le coupon.

### Facultatif&nbsp;: Personnaliser votre coupon

Stripe permet de personnaliser les interfaces utilisateur sur la page [Adaptation à votre marque](https://dashboard.stripe.com/account/branding).

Vous pouvez appliquer les paramètres de marque suivants à vos coupons&nbsp;:

- **Icône**&nbsp;: image représentant votre marque et votre dénomination sociale publique
- **Couleur d’accentuation**&nbsp;: utilisée comme couleur du bouton Copier le numéro
- **Couleur de marque**&nbsp;: utilisée comme couleur d’arrière-plan

## Gérer les événements post-paiement [Côté serveur]

OXXO est un moyen de paiement [à notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ce qui signifie que les fonds ne sont pas disponibles immédiatement. Il est possible que les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) ne se rendent pas immédiatement dans un magasin pour régler le coupon OXXO.

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) le jour ouvrable suivant (du lundi au vendredi, sauf jours fériés mexicains) pour chaque coupon OXXO payé. Utilisez le Dashboard ou créez un gestionnaire de *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) pour recevoir ces événements et exécuter certaines actions (comme l’envoi par e-mail d’une confirmation de commande à votre client, l’enregistrement de la vente dans une base de données ou le lancement d’un flux de livraison).

Une fois la date d’expiration passée, l’état du PaymentIntent passe à `processing` et le client ne peut plus effectuer le règlement du coupon OXXO expiré. Si le coupon OXXO n’est pas payé avant 23&nbsp;h&nbsp;59, heure de la ville de Mexico (America/Mexico_City&nbsp;: UTC-6) le jour de son expiration, Stripe envoie un événement [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) au plus tard 10&nbsp;jours calendaires (et le plus souvent moins de 7&nbsp;jours) après la date d’expiration. Par exemple si le coupon OXXO expire le 1er&nbsp;septembre, l’évènement sera envoyé au plus tard le 10&nbsp;septembre.

| Événement                        | Description                                                  | Étapes suivantes                                                                                              |
| -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | Le coupon OXXO a bien été créé.                              | Attendez que le client règle le coupon OXXO.                                                                  |
| `payment_intent.processing`      | Le client ne peut plus régler le coupon OXXO.                | Attendez que le paiement réussisse ou échoue.                                                                 |
| `payment_intent.succeeded`       | Le client a réglé le coupon OXXO avant son expiration.       | Traitez la commande de biens ou de services de votre client.                                                  |
| `payment_intent.payment_failed`  | Le client n’a pas réglé le coupon OXXO avant son expiration. | Envoyez un e-mail ou une notification push au client pour lui demander d’utiliser un autre moyen de paiement. |

### Recevoir des événements et exécuter des actions métier

#### Manuellement

Utilisez le Dashboard Stripe pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements en échec.

- [Afficher vos paiements tests dans le Dashboard](https://dashboard.stripe.com/test/payments)

#### Code personnalisé

Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe.

- [Créez un webhook personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Tester l'intégration

Dans un environnement de test, utilisez les e-mails suivants lorsque vous appelez `confirmPayment` pour tester différents scénarios.

| Adresse e-mail                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simule un coupon OXXO réglé par le client au bout de 3&nbsp;minutes et pour lequel le webhook `payment_intent.succeeded` arrive après environ 3&nbsp;minutes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `{any_prefix}succeed_immediately@{any_domain}` | Simule un coupon OXXO immédiatement réglé par le client et pour lequel le webhook `payment_intent.succeeded` arrive en quelques secondes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `{any_prefix}expire_immediately@{any_domain}`  | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive en quelques secondes.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur la date/heure du jour, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_immediately@test.com                |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout de 3&nbsp;minutes environ.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur 3&nbsp;minutes plus tard, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_with_delay@test.com |
| `{any_prefix}fill_never@{any_domain}`          | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout d’un jour ouvré et de deux jours calendaires. En mode production, ce webhook arrive à la même vitesse qu’en mode test.

  Exemple&nbsp;: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                               |

## Expiration et annulation

Les coupons OXXO expirent après l’horodatage Unix `expires_after`. Une fois le coupon OXXO expiré, le client ne peut plus effectuer le règlement. Les coupons OXXO ne peuvent pas être annulés avant leur expiration.

Après expiration d’un bon de réduction OXXO, l’état de la PaymentIntent passe à `requires_payment_method`. Vous pouvez alors confirmer la PaymentIntent avec un autre moyen de paiement, ou l’annuler.


# API Direct

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

> Le contenu de cette section fait référence à un produit *antérieur* (Technology that's no longer recommended). Vous devez plutôt consulter le guide relatif à l’[acceptation d’un paiement](https://docs.stripe.com/payments/accept-a-payment.md) pour en savoir plus sur le chemin d’intégration le plus récent. Stripe prend toujours en charge ce produit, néanmoins cette prise en charge peut prendre fin si le produit devient obsolète.

Les utilisateurs de Stripe au Mexique peuvent accepter des paiements OXXO de clients situés au Mexique grâce aux API Payment Intents et Payment Methods. Les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) procèdent au paiement en espèces dans un commerce de proximité OXXO en fournissant un coupon OXXO doté d’un numéro généré automatiquement. Stripe vous informe lorsque le paiement est effectué.

## Configurer Stripe [Côté serveur]

Tout d’abord, il vous faut un compte Stripe. [S’inscrire](https://dashboard.stripe.com/test/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'
```

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

Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) qui suit les changements d’état du paiement, de la création du coupon OXXO à la finalisation du règlement.

Créez un PaymentIntent sur votre serveur avec un montant et la devise `mxn` (OXXO ne prendre en charge les autres devises). Si vous disposez déjà d’une intégration utilisant l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `oxxo` à 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

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

### 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 %>">
  <button id="submit">Submit</button>
</form>
```

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

### Options supplémentaires du moyen de paiement

Vous pouvez assigner à votre `PaymentIntent` un paramètre facultatif `expires_after_days` dans les [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days), afin de configurer le nombre de jours calendaires avant l’expiration d’un coupon OXXO. Par exemple, si vous créez un coupon OXXO le lundi avec un paramètre `expires_after_days` de&nbsp;2, le coupon OXXO expirera le mercredi suivant à 23&nbsp;h&nbsp;59, heure de la ville de Mexico (America/Mexico_City&nbsp;: UTC-6). La valeur du paramètre `expires_after_days` doit être comprise entre 1 et 7&nbsp;jours. Par défaut, elle est de 3&nbsp;jours.

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

Créez un formulaire de paiement côté client pour collecter les informations de facturation du client&nbsp;:

| Champ   | Valeur                                                                         |
| ------- | ------------------------------------------------------------------------------ |
| `name`  | Le nom et le prénom du client. Chacun doit comporter au moins deux caractères. |
| `email` | L’adresse e-mail complète du client.                                           |

```html
<form id="payment-form">
  <div class="form-row">
    <label for="name">
      Name
    </label>
    <input id="name" name="name" required>
  </div>

  <div class="form-row">
    <label for="email">
      Email
    </label>
    <input id="email" name="email" required>
  </div>

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

  <button id="submit-button">Pay with OXXO</button>
</form>
```

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

Lorsqu’un client clique pour payer avec OXXO, utilisez Stripe.js pour soumettre le paiement à Stripe. [Stripe.js](https://docs.stripe.com/payments/elements.md) est notre bibliothèque JavaScript de base pour la création de tunnels de paiement.

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 switch to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
```

Utilisez [stripe.confirmOxxoPayment](https://docs.stripe.com/js/payment_intents/confirm_oxxo_payment) et la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent` créé à l’étape&nbsp;2 pour envoyer les informations de facturation du client.

Après la confirmation, votre client verra automatiquement s’afficher une fenêtre modale contenant le coupon OXXO.

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const result = await stripe.confirmOxxoPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        billing_details: {
          name: document.getElementById('name').value,
          email: document.getElementById('email').value,
        },
      },
    });
  // Stripe.js will open a modal to display the OXXO voucher to your customer
  // This async function finishes when the customer closes the modal

  if (result.error) {
    // Display error to your customer
    const errorMsg = document.getElementById('error-message');
    errorMsg.innerText = result.error.message;
  }
});
```

> L’exécution de la méthode `stripe.confirmOxxoPayment` peut prendre plusieurs secondes. Pendant ce temps, bloquez le renvoi de votre formulaire et affichez un indicateur d’attente. Si vous recevez une erreur, montrez-la au client, réactivez le formulaire et masquez l’indicateur d’attente.

Lorsqu’un bon OXXO est créé avec succès, la valeur de la propriété `status` de PaymentIntent renvoyée est `requires_action`. Vérifiez le statut d’un PaymentIntent dans le [Dashboard](https://dashboard.stripe.com/test/payments) ou en inspectant la propriété status de l’objet. Si le bon OXXO n’a pas été créé avec succès, examinez la valeur `error` renvoyée pour en déterminer la cause (par exemple, format d’e-mail non valide).

### Facultatif&nbsp;: Envoyer à votre client un e-mail contenant un lien vers le coupon

Stripe envoie un événement [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) lors de la création d’un coupon OXXO. Si vous souhaitez envoyer à votre client un e-mail contenant un lien vers le coupon, vous pouvez [récupérer le PaymentIntent](https://docs.stripe.com/api/payment_intents/retrieve.md) afin d’obtenir un lien lors de la réception de l’événement. Le champ `hosted_voucher_url` de [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) contient un lien vers le coupon.

### Facultatif&nbsp;: Personnaliser votre coupon

Stripe permet de personnaliser les interfaces utilisateur sur la page [Adaptation à votre marque](https://dashboard.stripe.com/account/branding).

Vous pouvez appliquer les paramètres de marque suivants à vos coupons&nbsp;:

- **Icône**&nbsp;: image représentant votre marque et votre dénomination sociale publique
- **Couleur d’accentuation**&nbsp;: utilisée comme couleur du bouton Copier le numéro
- **Couleur de marque**&nbsp;: utilisée comme couleur d’arrière-plan

## Gérer les événements post-paiement [Côté serveur]

OXXO est un moyen de paiement [à notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ce qui signifie que les fonds ne sont pas disponibles immédiatement. Il est possible que les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) ne se rendent pas immédiatement dans un magasin pour régler le coupon OXXO.

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) le jour ouvrable suivant (du lundi au vendredi, sauf jours fériés mexicains) pour chaque coupon OXXO payé. Utilisez le Dashboard ou créez un gestionnaire de *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) pour recevoir ces événements et exécuter certaines actions (comme l’envoi par e-mail d’une confirmation de commande à votre client, l’enregistrement de la vente dans une base de données ou le lancement d’un flux de livraison).

Une fois la date d’expiration passée, l’état du PaymentIntent passe à `processing` et le client ne peut plus effectuer le règlement du coupon OXXO expiré. Si le coupon OXXO n’est pas payé avant 23&nbsp;h&nbsp;59, heure de la ville de Mexico (America/Mexico_City&nbsp;: UTC-6) le jour de son expiration, Stripe envoie un événement [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) au plus tard 10&nbsp;jours calendaires (et le plus souvent moins de 7&nbsp;jours) après la date d’expiration. Par exemple si le coupon OXXO expire le 1er&nbsp;septembre, l’évènement sera envoyé au plus tard le 10&nbsp;septembre.

| Événement                        | Description                                                  | Étapes suivantes                                                                                              |
| -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | Le coupon OXXO a bien été créé.                              | Attendez que le client règle le coupon OXXO.                                                                  |
| `payment_intent.processing`      | Le client ne peut plus régler le coupon OXXO.                | Attendez que le paiement réussisse ou échoue.                                                                 |
| `payment_intent.succeeded`       | Le client a réglé le coupon OXXO avant son expiration.       | Traitez la commande de biens ou de services de votre client.                                                  |
| `payment_intent.payment_failed`  | Le client n’a pas réglé le coupon OXXO avant son expiration. | Envoyez un e-mail ou une notification push au client pour lui demander d’utiliser un autre moyen de paiement. |

### Recevoir des événements et exécuter des actions métier

#### Manuellement

Utilisez le Dashboard Stripe pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements en échec.

- [Afficher vos paiements tests dans le Dashboard](https://dashboard.stripe.com/test/payments)

#### Code personnalisé

Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe.

- [Créez un webhook personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Tester l'intégration

Dans un environnement de test, définissez `payment_method.billing_details.email` sur les valeurs suivantes lorsque vous appelez [stripe.confirmOxxoPayment](https://docs.stripe.com/js/payment_intents/confirm_oxxo_payment) pour tester différents scénarios.

| Adresse e-mail                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simule un coupon OXXO réglé par le client au bout de 3&nbsp;minutes et pour lequel le webhook `payment_intent.succeeded` arrive après environ 3&nbsp;minutes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `{any_prefix}succeed_immediately@{any_domain}` | Simule un coupon OXXO immédiatement réglé par le client et pour lequel le webhook `payment_intent.succeeded` arrive en quelques secondes. En mode production, ce webhook arrive au bout d’un jour ouvrable.

  Exemple&nbsp;: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `{any_prefix}expire_immediately@{any_domain}`  | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive en quelques secondes.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur la date/heure du jour, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_immediately@test.com                |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout de 3&nbsp;minutes environ.

  Le champ `expires_after` de [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) est défini sur 3&nbsp;minutes plus tard, quelle que soit la valeur du paramètre `expires_after_days` des [options du moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemple&nbsp;: expire_with_delay@test.com |
| `{any_prefix}fill_never@{any_domain}`          | Simule un coupon OXXO qui expire avant le règlement du client et pour lequel le webhook `payment_intent.payment_failed` arrive au bout d’un jour ouvré et de deux jours calendaires. En mode production, ce webhook arrive à la même vitesse qu’en mode test.

  Exemple&nbsp;: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                               |

## Optional: Montrer les informations OXXO à votre client [Côté client]

Nous recommandons d’utiliser Stripe.js pour gérer l’affichage du coupon OXXO à l’aide de `confirmOxxoPayment`. Vous pouvez toutefois gérer manuellement l’affichage du coupon pour vos clients.

Vous pouvez spécifier `handleActions: false` lorsque vous appelez `stripe.confirmOxxoPayment` à l’étape&nbsp;4 afin d’indiquer que vous gérerez l’action suivante consistant à afficher les informations OXXO pour votre client.

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const result = await stripe.confirmOxxoPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        billing_details: {
          name: document.getElementById('name').value,
          email: document.getElementById('email').value,
        },
      },
    }, {handleActions: false},
  );

  if (result.error) {
    // Display error to your customer
    const errorMsg = document.getElementById('error-message');
    errorMsg.innerText = result.error.message;
  } else {
    // An OXXO voucher was successfully created
    const amount = result.paymentIntent.amount;
    const currency = result.paymentIntent.currency;

    const details = result.paymentIntent.next_action.oxxo_display_details;
    const number = details.number;
    const expires_after = details.expires_after;

    // Handle the next action by displaying the OXXO details to your customer

    // You can also use the generated hosted voucher
    const hosted_voucher_url = result.paymentIntent.next_action.oxxo_display_details.hosted_voucher_url;
  }
});
```

Incluez, au minimum, les éléments suivants&nbsp;:

| Détails                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Logo OXXO                | [Téléchargez](https://stripe.com/img/docs/payments/oxxo.png) et affichez le logo OXXO sur le bon.
oxxo                                                                                                                                                                                                                                                                                                                                                                         |
| Numéro                   | Repérez le numéro sur l’objet `PaymentIntent` dans [next_action.oxxo_display_details.number](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-number).                                                                                                                                                                                                                                                             |
| Date d’expiration        | Repérez l’horodatage UNIX indiquant la date d’expiration du coupon OXXO sur le `PaymentIntent`, dans [next_action.oxxo_display_details.expires_after](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after).                                                                                                                                                                                             |
| Montant                  | Le montant à encaisser.                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| Devise                   | Les coupons OXXO sont toujours libellés en pesos mexicains.                                                                                                                                                                                                                                                                                                                                                                                                                    |
| Code-barres              | Générez le code-barres à partir du numéro en utilisant le [Code 128](https://en.wikipedia.org/wiki/Code_128). Une fois imprimé, le code-barres devrait mesurer environ 7,5&nbsp;cm de long. Pour les affichages mobiles, assurez-vous que l’utilisateur puisse agrandir le code-barres. Cela permettra au caissier du magasin de proximité de le scanner plus facilement. Vous pouvez utiliser une bibliothèque externe, telle que [JSBarcode](https://lindell.me/JsBarcode/). |
| Instructions de paiement | Les instructions de paiement à l’intention du client. Voir les traductions en français et en espagnol ci-dessous.                                                                                                                                                                                                                                                                                                                                                              |

### Instructions de paiement OXXO

#### Anglais

Instructions de paiement OXXO&nbsp;:

1. Remettez le coupon en caisse pour scan du code-barres.
1. Réglez votre achat en espèces à la caisse.
1. Une fois le paiement effectué, conservez le reçu.
1. Pour toute question ou clarification, veuillez contacter l’entreprise.

#### HTML

```html
<!-- Include a library for generating OXXO bar codes, such as JsBarcode -->
<!-- <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/barcodes/JsBarcode.code128.min.js"></script> -->

<div class="result-oxxo">
  <img width="100px" src="/images/payments/oxxo.png">
  <div class="amount">MX <span class="order-amount"></span></div>
  <div>Expires <span class="oxxo-expiry-date"></span></div>
  <div class="oxxo-display"></div>

  <button onclick="window.print()">Print</button>

  <div class="instructions">
    Instructions to pay your OXXO:
    <ol>
      <li><p>Give the voucher to the cashier to scan the barcode.</p></li>
      <li><p>Provide cash payment to the cashier.</p></li>
      <li><p>After the payment is complete, keep the receipt of your payment for your records.</p></li>
      <li><p>For any questions or clarification, please contact the merchant.</p></li>
    </ol>
  </div>
</div>
```

#### Espagnol

Instrucciones de pago en OXXO:

1. Entregue el código al cajero en cualquier OXXO para que lo escanee.
1. Proporcione el pago en efectivo al cajero.
1. Una vez completado el pago, guarde el recibo de su pago para sus archivos.
1. Para cualquier duda o aclaración, por favor contacte al comerciante.

#### HTML

```html
<!-- Include a library for generating OXXO bar codes, such as JsBarcode -->
<!-- <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/barcodes/JsBarcode.code128.min.js"></script> -->

<div class="result-oxxo section-to-print">
  <img width="100px" src="/images/payments/oxxo.png">
  <div class="amount">MX <span class="order-amount"></span></div>
  <div>Expira el <span class="oxxo-expiry-date"></span></div>
  <div class="oxxo-display"></div>

  <button onclick="window.print()">Imprimir</button>

  <div class="instructions">
    Instrucciones de pago en OXXO:
    <ol>
      <li><p>Entregue el código al cajero en cualquier OXXO para que lo escanee.</p></li>
      <li><p>Proporcione el pago en efectivo al cajero.</p></li>
      <li><p>Una vez completado el pago, guarde el recibo de su pago para sus archivos.</p></li>
      <li><p>Para cualquier duda o aclaración, por favor contacte al comerciante.</p></li>
    </ol>
  </div>
</div>
```

Généralement, les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) impriment le coupon OXXO et l’apportent dans un magasin de proximité. Vous pouvez prévoir un bouton d’impression facile et/ou envoyer le bon OXXO par e-mail à votre client. Nous vous conseillons de tester l’impression du coupon OXXO afin de vérifier la taille du code-barres (qui devrait mesurer environ 7,5&nbsp;cm de long).

## Optional: Envoyer des instructions sur les paiements par e-mail

Vous pouvez activer l’envoi d’instructions sur les paiements OXXO et de rappels par e-mail sur la page [Paramètres des e-mails](https://dashboard.stripe.com/settings/emails) sur le Dashboard. Une fois activé, Stripe enverra par e-mail des instructions sur les paiements dès le PaymentIntent confirmé. Les e-mails contiennent le numéro OXXO et un lien vers la page coupon hébergée par Stripe.

> Dans les environnements de test, seules les adresses e-mail associées au compte Stripe reçoivent des instructions par e-mail.

## Expiration et annulation

Les coupons OXXO expirent après l’horodatage Unix `expires_after`. Une fois le coupon OXXO expiré, le client ne peut plus effectuer le règlement. Les coupons OXXO ne peuvent pas être annulés avant leur expiration.

Après expiration d’un bon de réduction OXXO, l’état de la PaymentIntent passe à `requires_payment_method`. Vous pouvez alors confirmer la PaymentIntent avec un autre moyen de paiement, ou l’annuler.