# Configurer un abonnement avec Pix
En savoir plus sur la création et la facturation d’un abonnement avec Pix.
Utilisez ce guide pour configurer un *abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) en utilisant [Pix](https://docs.stripe.com/payments/pix.md) comme moyen de paiement. Les abonnements Pix utilisent [Pix Automático](https://docs.stripe.com/payments/pix/pix-automatico.md) pour créer un mandat autorisé par le client pour les paiements récurrents automatiques.
# Page hébergée par Stripe
> This is a Page hébergée par Stripe for when api-integration is checkout. View the full page at https://docs.stripe.com/billing/subscriptions/pix?api-integration=checkout.
Vous pouvez utiliser l’[API Checkout](https://docs.stripe.com/api/checkout/sessions.md) pour créer et confirmer un abonnement avec une page de paiement préconfigurée.
## Créer un produit et un tarif [Dashboard]
Les [produits](https://docs.stripe.com/api/products.md) correspondent aux articles ou services que vous vendez. Les [tarifs](https://docs.stripe.com/api/prices.md) définissent le montant et la fréquence des paiements facturés pour un produit. Le tarif prend en compte la valeur du produit, la devise que vous acceptez et s’il s’agit d’un paiement ponctuel ou récurrent. Si vous n’avez que quelques produits et tarifs, créez-les et gérez-les dans le Dashboard.
Ce guide prend comme exemple un service de banque d’images qui débite ses clients d’un montant de 20 BRL pour un abonnement mensuel. Pour modéliser ceci :
1. Go to the [Products](https://dashboard.stripe.com/products?active=true) page and click **Create product**.
1. Saisissez un **Nom** pour le produit. Vous pouvez éventuellement ajouter une **Description** et télécharger une image du produit.
1. Select a **Product tax code**. Learn more about [product tax codes](https://docs.stripe.com/tax/tax-codes.md).
1. Sélectionnez **Récurrent**. Saisissez ensuite **** pour le prix et sélectionnez **** comme devise.
1. Choose whether to **Include tax in price**. You can either use the default value from your [tax settings](https://dashboard.stripe.com/test/settings/tax) or set the value manually. In this example, select **Auto**.
1. Pour **Période de facturation**, sélectionnez **Mensuel**.
1. Click **More pricing options**. Then select **Flat rate** as the pricing model for this example. Learn more about [flat rate](https://docs.stripe.com/products-prices/pricing-models.md#flat-rate) and other [pricing models](https://docs.stripe.com/products-prices/pricing-models.md).
1. Add an internal **Price description** and [Lookup key](https://docs.stripe.com/products-prices/manage-prices.md#lookup-keys) to organize, query, and update specific prices in the future.
1. Cliquez sur **Suivant**. Cliquez ensuite sur **Ajouter un produit**.
Après avoir créé le produit et le tarif, enregistrez l’ID de tarif de manière à pouvoir l’utiliser dans les étapes ultérieures. La page des tarifs affiche l’ID dont le format est similaire à ce qui suit : `price_G0FvDp6vZvdwRZ`.
## Créer une Checkout Session [Côté serveur]
Votre client doit autoriser un mandat Pix Automático pour l’abonnement via Stripe Checkout.
Ajoutez sur votre site Web un bouton de paiement qui appelle un endpoint côté serveur afin de créer une [session Checkout](https://docs.stripe.com/api/checkout/sessions.md).
```html
Checkout
```
Créez une Checkout Session en mode `subscription` avec [Pix Automático mandate options](https://docs.stripe.com/payments/pix/pix-automatico.md#pix-automtico-customization). Après avoir créé la Checkout Session, redirigez votre client vers l’[URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) renvoyée dans la réponse.
> Si vous souhaitez encourager les utilisateurs à passer à un forfait supérieur sans qu’ils aient besoin de se reconnecter, vous pouvez transmettre un montant plus élevé dans `payment_method_options.pix.mandate_options.amount`.
```curl
curl https://api.stripe.com/v1/checkout/sessions \
-u "<>:" \
--data-urlencode "success_url=https://example.com/success" \
-d "line_items[0][price]={{PRICE_ID}}" \
-d "line_items[0][quantity]=1" \
-d "payment_method_types[0]=pix" \
-d "payment_method_options[pix][mandate_options][amount]=2000" \
-d "payment_method_options[pix][mandate_options][payment_schedule]=monthly" \
-d mode=subscription
```
Une fois que le client a autorisé le mandat dans son application bancaire, l’abonnement s’active et les factures suivantes sont débitées automatiquement.
## Gérer la révocation des moyens de paiement réutilisables [Côté serveur]
Un client peut révoquer un mandat Pix dans son application bancaire. Dans ce cas, Stripe vous envoie un événement [mandate.updated](https://docs.stripe.com/api/events/types.md#event_types-mandate.updated). Pour gérer cela, abonnez-vous aux événements [webhook](https://docs.stripe.com/webhooks.md), et ramenez votre client dans une session pour créer un nouveau mandat.
## Tester votre intégration
Pour tester votre intégration :
1. Sélectionnez Pix.
1. Saisissez les informations du client et appuyez sur **Payer**. Dans un environnement de test, vous pouvez utiliser `000.000.000-00` comme identifiant fiscal de test (CPF ou CNPJ).
1. Cliquez sur **Simuler un scan** pour ouvrir une page de paiement test Pix hébergée par Stripe. À partir de cette page, vous pouvez autoriser ou faire expirer le paiement test.
En mode production, le bouton **Payer** affiche un QR code Pix. Pour finaliser ou annuler ce flux de paiement, vous devez disposer d’un compte bancaire brésilien avec Pix activé.
Vous pouvez également définir [payment_method.billing_details.email](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data-billing_details-email) sur les valeurs suivantes pour tester différents scénarios.
| E-mail | Description |
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}expire_immediately@{any_domain}` | Simule un Pix qui expire immédiatement. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ou [setup_intent.setup_failed](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.setup_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Aucun mandat actif n’est créé.
Exemple : `expire_immediately@test.com` |
| `{any_prefix}expire_with_delay@{any_domain}` | Simule un Pix qui expire après 3 minutes. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ou [setup_intent.setup_failed](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.setup_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes. Aucun mandat actif n’est créé.
Exemple : `expire_with_delay@test.com` |
| `{any_prefix}succeed_mandate_expire_payments_immediately@{any_domain}` | Simule un Pix que votre client paie immédiatement. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Un mandat actif est créé. Les paiements récurrents avec le même moyen de paiement expirent immédiatement. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes.
Exemple : `succeed_mandat_expire_payments_immediately@test.com` |
| `{any_prefix}succeed_mandate_expire_payments_with_delay@{any_domain}` | Simule un Pix qu’un client paie après 3 minutes. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Un mandat actif est créé. Les paiements récurrents avec le même moyen de paiement expirent après 3 minutes. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes.
Exemple : `succeed_mandat_expire_payments_with_delay@test.com` |
| `{any_prefix}succeed_immediately@{any_domain}` | Simule un Pix que votre client paie immédiatement. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Un mandat actif est créé. Tous les paiements récurrents effectués avec le même moyen de paiement réussissent immédiatement. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes.
Exemple : `succeed_immediately@test.com` |
| `{any_prefix}@{any_domain}` | Simule un Pix qu’un client paie après 3 minutes. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes. Un mandat actif est créé. Tous les paiements récurrents effectués avec le même moyen de paiement réussissent après 3 minutes. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes.
Exemple : `n’importe quoi@test.com` |
# API Setup Intents
> This is a API Setup Intents for when api-integration is setupintents. View the full page at https://docs.stripe.com/billing/subscriptions/pix?api-integration=setupintents.
Créez et confirmez un abonnement en utilisant deux appels à l’API. Le [premier appel à l’API](https://docs.stripe.com/billing/subscriptions/pix.md#create-setup-intent) utilise l’[API Setup Intents](https://docs.stripe.com/api/setup_intents.md) pour définir Pix comme moyen de paiement et créer un mandat. Le [deuxième appel à l’API](https://docs.stripe.com/billing/subscriptions/pix.md#create-subscription) envoie les informations relatives au client, au produit et au moyen de paiement à l’[API Subscriptions](https://docs.stripe.com/api/subscriptions.md) pour créer un abonnement et confirmer un paiement en un seul appel.
## Créer un produit et un tarif [Dashboard]
Les [produits](https://docs.stripe.com/api/products.md) correspondent aux articles ou services que vous vendez. Les [tarifs](https://docs.stripe.com/api/prices.md) définissent le montant et la fréquence des paiements facturés pour un produit. Le tarif prend en compte la valeur du produit, la devise que vous acceptez et s’il s’agit d’un paiement ponctuel ou récurrent. Si vous n’avez que quelques produits et tarifs, créez-les et gérez-les dans le Dashboard.
Ce guide prend comme exemple un service de banque d’images qui débite ses clients d’un montant de 20 BRL pour un abonnement mensuel. Pour modéliser ceci :
1. Go to the [Products](https://dashboard.stripe.com/products?active=true) page and click **Create product**.
1. Saisissez un **Nom** pour le produit. Vous pouvez éventuellement ajouter une **Description** et télécharger une image du produit.
1. Select a **Product tax code**. Learn more about [product tax codes](https://docs.stripe.com/tax/tax-codes.md).
1. Sélectionnez **Récurrent**. Saisissez ensuite **** pour le prix et sélectionnez **** comme devise.
1. Choose whether to **Include tax in price**. You can either use the default value from your [tax settings](https://dashboard.stripe.com/test/settings/tax) or set the value manually. In this example, select **Auto**.
1. Pour **Période de facturation**, sélectionnez **Mensuel**.
1. Click **More pricing options**. Then select **Flat rate** as the pricing model for this example. Learn more about [flat rate](https://docs.stripe.com/products-prices/pricing-models.md#flat-rate) and other [pricing models](https://docs.stripe.com/products-prices/pricing-models.md).
1. Add an internal **Price description** and [Lookup key](https://docs.stripe.com/products-prices/manage-prices.md#lookup-keys) to organize, query, and update specific prices in the future.
1. Cliquez sur **Suivant**. Cliquez ensuite sur **Ajouter un produit**.
Après avoir créé le produit et le tarif, enregistrez l’ID de tarif de manière à pouvoir l’utiliser dans les étapes ultérieures. La page des tarifs affiche l’ID dont le format est similaire à ce qui suit : `price_G0FvDp6vZvdwRZ`.
## Créer ou récupérer un client [Côté serveur]
Pour enregistrer un moyen de paiement Pix pour de futurs paiements, associez-le à un objet représentant votre client.
> #### Utiliser l’API Accounts v2 pour représenter les clients
>
> L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
>
> Pour demander l’accès à l’aperçu Accounts v2,
>
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).
Créez un [Account](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) ou un [Customer](https://docs.stripe.com/api/customers/create.md) configuré par le client lorsque votre client crée un compte auprès de votre entreprise, ou lors de l’enregistrement d’un moyen de paiement. Associez l’ID de l’objet à votre propre représentation interne d’un client.
Créez un nouveau client ou récupérez un client existant pour l’associer à ce paiement.
#### Accounts v2
```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
-H "Authorization: Bearer <>" \
-H "Stripe-Version: 2026-04-22.preview" \
--json '{
"contact_email": "jenny.rosen@example.com",
"display_name": "Jenny Rosen",
"configuration": {
"customer": {}
},
"include": [
"configuration.customer"
]
}'
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/customers \
-u "<>:" \
-d "name=Jenny Rosen" \
--data-urlencode "email=jenny.rosen@example.com"
```
## Créer un SetupIntent [Côté serveur]
Utilisez l’[API Setup Intents](https://docs.stripe.com/payments/setup-intents.md) pour collecter les informations du moyen de paiement Pix sans effectuer de paiement initial.
Un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) est un objet qui représente votre intention de configurer le moyen de paiement d’un client en vue de futurs paiements. Le SetupIntent suit les étapes de ce processus de configuration.
Créez un SetupIntent sur votre serveur avec [payment_method_types](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-payment_method_types) défini sur `pix`, spécifiez l’ID du client et fournissez les options de mandat Pix Automático. Les [options de mandat](https://docs.stripe.com/payments/pix/pix-automatico.md#pix-automtico-customization) dictent la manière dont le moyen de paiement peut être enregistré pour les paiements futurs.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/setup_intents \
-u "<>:" \
-d "payment_method_types[]=pix" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d "payment_method_options[pix][mandate_options][amount]=2000" \
-d "payment_method_options[pix][mandate_options][payment_schedule]=monthly"
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/setup_intents \
-u "<>:" \
-d "payment_method_types[]=pix" \
-d "customer={{CUSTOMER_ID}}" \
-d "payment_method_options[pix][mandate_options][amount]=2000" \
-d "payment_method_options[pix][mandate_options][payment_schedule]=monthly"
```
### Récupérer la clé secrète du client
Le SetupIntent 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 :
#### Ruby
```ruby
get '/secret' do
intent = # ... Create or retrieve the SetupIntent
{client_secret: intent.client_secret}.to_json
end
```
Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client :
```javascript
(async () => {
const response = await fetch('/secret');
const {client_secret: clientSecret} = await response.json();
// Render the form using the clientSecret
})();
```
#### Rendu côté serveur
Transmettez la clé secrète à 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/setup_intents/object.md#setup_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 SetupIntent :
#### Ruby
```erb
```
```ruby
get '/checkout' do
@intent = # ... Fetch or create the SetupIntent
erb :checkout
end
```
## Collecter les informations relatives au moyen de paiement [Côté client]
#### HTML + JS
Créez un formulaire de paiement côté client pour collecter les informations de facturation du client :
| Champ | Valeur |
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | Le nom complet du client. |
| `email` | L’adresse e-mail du client. |
| `tax_id` | L’identifiant fiscal du client : un CPF si le client est un particulier, ou un CNPJ si le client est une entreprise. Le gouvernement brésilien exige que les acheteurs fournissent un identifiant fiscal (CPF ou CNPJ) lors de la réalisation des transactions transfrontalières. |
```html
```
#### Réagir
#### npm
Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
#### umd
Nous fournissons également une version UMD pour les sites qui n’utilisent pas npm ni de modules.
Incluez le script Stripe.js, qui exporte une fonction `Stripe` globale, ainsi que la version UMD de React Stripe.js, qui exporte un objet `ReactStripe` global. Chargez toujours le script Stripe.js directement à partir de **js.stripe.com** pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.
```html
```
> La [démo de CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark) vous permet de tester React Stripe.js sans créer de projet.
### Ajoutez Stripe.js et Elements à votre page
Pour utiliser les composants Element, enveloppez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publiable et transmettez l’élément `Promise` renvoyé au fournisseur `Elements`.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import 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('<>');
function App() {
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
## Afficher le QR code Pix avec Stripe [Côté client]
Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML.
```html
Checkout
```
Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement :
```javascript
var stripe = Stripe('<>');
```
Appelez [stripe.confirmPixSetup](https://docs.stripe.com/js/setup_intents/confirm_pix_setup) pour confirmer le SetupIntent côté client. Incluez une `return_url` pour rediriger votre client après son autorisation du mandat.
```javascript
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPixSetup(
'{{SETUP_INTENT_CLIENT_SECRET}}',
{
payment_method: {
billing_details: {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
tax_id: document.getElementById('tax-id').value,
}
},
return_url: 'https://example.com/checkout/complete',
}
);
if (error) {
// Inform the customer that there was an error.
}
});
```
### Effectuer la redirection
Les paramètres de requête d’URL suivants sont fournis lorsque Stripe redirige le client vers l’URL `return_url`.
| Paramètre | Description |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `setup_intent` | L’identifiant unique du `SetupIntent`. |
| `setup_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) de l’objet `SetupIntent`. |
Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez `return_url`. Ceux-ci resteront activés pendant toute la durée du processus de redirection. Le paramètre `return_url` doit correspondre à une page de votre site web sur laquelle l’état de la configuration est fourni. Vérifiez l’état du `SetupIntent` lors de l’affichage de la page de retour en utilisant la fonction `retrieveSetupIntent` de Stripe.js et en transmettant `setup_intent_client_secret`.
```javascript
(async () => {
const url = new URL(window.location);
const clientSecret = url.searchParams.get('setup_intent_client_secret');
const {setupIntent, error} = await stripe.retrieveSetupIntent(clientSecret);
if (error) {
// Handle error
} else if (setupIntent && setupIntent.status === 'succeeded') {
// Handle successful setup
}
})();
```
Une fois que le client a autorisé le mandat dans son application bancaire, le SetupIntent passe à l’état `succeeded` et le PaymentMethod est associé au Customer.
## Optional: Afficher vous-même le QR code Pix [Côté client]
Nous recommandons l’utilisation de Stripe.js pour afficher les informations de Pix à l’aide de `confirmPixSetup`. Vous pouvez toutefois gérer manuellement l’affichage des chaînes ou des QR codes Pix pour vos clients.
Spécifiez `handleActions: false` lorsque vous appelez `stripe.confirmPixSetup` à l’étape 3 afin de gérer manuellement l’action suivante consistant à afficher les informations Pix pour votre client.
```javascript
var form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const result = await stripe.confirmPixSetup(
'{{SETUP_INTENT_CLIENT_SECRET}}',
{
// payment method details omitted for brevity
},
{
handleActions: false
}
);
if (result.error) {
// Display error to your customer
const errorMsg = document.getElementById('error-message');
errorMsg.innerText = result.error.message;
} else {
// Pix details were successfully created
const details = result.setupIntent.next_action.pix_display_qr_code;
// Pix string, also known as Pix “copy and paste”
const emvString = details.data;
// SVG image Pix QR code
const imageUrlSvg = details.image_url_svg;
// PNG image Pix QR code
const imageUrlPng = details.image_url_png;
// Pix expiration date as a unix timestamp
const expires_at = details.expires_at;
// Handle the next action by displaying the Pix details to your customer
// You can also use the generated hosted instructions
const hosted_instructions_url = details.hosted_instructions_url;
}
});
```
Nous vous suggérons d’afficher les éléments suivants :
| Détail | Description |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Chaîne Pix | Affichez la chaîne Pix pour que vos clients puissent la copier dans leur presse-papiers à l’aide de la chaîne [setup_intent.next_action.pix_display_qr_code.data](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-next_action-pix_display_qr_code-data) du SetupIntent. |
| Code QR au format SVG | Affichez le QR code Pix pour que vos clients puissent le scanner avec leur téléphone à l’aide de la chaîne [setup_intent.next_action.pix_display_qr_code.image_url_svg](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-next_action-pix_display_qr_code-image_url_svg) du SetupIntent. |
| Code QR au format PNG | Affichez le QR code Pix pour que vos clients puissent le scanner avec leur téléphone à l’aide de la chaîne [setup_intent.next_action.pix_display_qr_code.image_url_png](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-next_action-pix_display_qr_code-image_url_png) du SetupIntent. |
| Date d’expiration | Affichez la date d’expiration Pix. Utilisez [setup_intent.next_action.pix_display_qr_code.expires_at](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-next_action-pix_display_qr_code-expires_at) pour voir la date d’expiration. |
Vous pouvez également rediriger vos clients vers la page d’instructions hébergée par Stripe, qui est similaire à celle de la fenêtre modale ouverte par `confirmPixSetup`. Utilisez [setup_intent.next_action.pix_display_qr_code.hosted_instructions_url](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-next_action-pix_display_qr_code-hosted_instructions_url) pour trouver l’URL de la page d’instructions hébergée par Stripe sur l’objet SetupIntent.
## Créez un abonnement [Côté serveur]
Créez un abonnement avec un tarif et un client. Définissez la valeur du paramètre `default_payment_method` sur l’ID de PaymentMethod contenu dans la réponse SetupIntent.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/subscriptions \
-u "<>:" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d "items[0][price]={{PRICE_ID}}" \
-d default_payment_method={{PAYMENT_METHOD_ID}} \
-d "payment_settings[payment_method_types][0]=pix"
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/subscriptions \
-u "<>:" \
-d "customer={{CUSTOMER_ID}}" \
-d "items[0][price]={{PRICE_ID}}" \
-d default_payment_method={{PAYMENT_METHOD_ID}} \
-d "payment_settings[payment_method_types][0]=pix"
```
La création de l’abonnement entraîne le débit automatique du compte du client en raison du moyen de paiement par défaut. Une fois le paiement effectué, l’état dans le Dashboard Stripe passe à Actif. Le prix que vous avez précédemment défini détermine le montant des facturations futures.
> Pour créer un *abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) avec une période d’essai gratuite, consultez la documentation relative aux [périodes d’essai des abonnements](https://docs.stripe.com/billing/subscriptions/trials.md).
## Gérer la révocation des moyens de paiement réutilisables [Côté serveur]
Un client peut révoquer un mandat Pix dans son application bancaire. Dans ce cas, Stripe vous envoie un événement [mandate.updated](https://docs.stripe.com/api/events/types.md#event_types-mandate.updated). Pour gérer cela, abonnez-vous aux événements [webhook](https://docs.stripe.com/webhooks.md), et ramenez votre client dans une session pour créer un nouveau mandat.
## Tester votre intégration
Pour tester votre intégration :
1. Sélectionnez Pix.
1. Saisissez les informations du client et appuyez sur **Payer**. Dans un environnement de test, vous pouvez utiliser `000.000.000-00` comme identifiant fiscal de test (CPF ou CNPJ).
1. Cliquez sur **Simuler un scan** pour ouvrir une page de paiement test Pix hébergée par Stripe. À partir de cette page, vous pouvez autoriser ou faire expirer le paiement test.
En mode production, le bouton **Payer** affiche un QR code Pix. Pour finaliser ou annuler ce flux de paiement, vous devez disposer d’un compte bancaire brésilien avec Pix activé.
Vous pouvez également définir [payment_method.billing_details.email](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data-billing_details-email) sur les valeurs suivantes pour tester différents scénarios.
| E-mail | Description |
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}expire_immediately@{any_domain}` | Simule un Pix qui expire immédiatement. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ou [setup_intent.setup_failed](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.setup_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Aucun mandat actif n’est créé.
Exemple : `expire_immediately@test.com` |
| `{any_prefix}expire_with_delay@{any_domain}` | Simule un Pix qui expire après 3 minutes. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ou [setup_intent.setup_failed](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.setup_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes. Aucun mandat actif n’est créé.
Exemple : `expire_with_delay@test.com` |
| `{any_prefix}succeed_mandate_expire_payments_immediately@{any_domain}` | Simule un Pix que votre client paie immédiatement. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Un mandat actif est créé. Les paiements récurrents avec le même moyen de paiement expirent immédiatement. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes.
Exemple : `succeed_mandat_expire_payments_immediately@test.com` |
| `{any_prefix}succeed_mandate_expire_payments_with_delay@{any_domain}` | Simule un Pix qu’un client paie après 3 minutes. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Un mandat actif est créé. Les paiements récurrents avec le même moyen de paiement expirent après 3 minutes. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes.
Exemple : `succeed_mandat_expire_payments_with_delay@test.com` |
| `{any_prefix}succeed_immediately@{any_domain}` | Simule un Pix que votre client paie immédiatement. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Un mandat actif est créé. Tous les paiements récurrents effectués avec le même moyen de paiement réussissent immédiatement. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes.
Exemple : `succeed_immediately@test.com` |
| `{any_prefix}@{any_domain}` | Simule un Pix qu’un client paie après 3 minutes. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes. Un mandat actif est créé. Tous les paiements récurrents effectués avec le même moyen de paiement réussissent après 3 minutes. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes.
Exemple : `n’importe quoi@test.com` |
# API Subscriptions
> This is a API Subscriptions for when api-integration is subscription. View the full page at https://docs.stripe.com/billing/subscriptions/pix?api-integration=subscription.
Créez et confirmez un objet Subscription à l’aide de deux appels à l’API. Le [premier appel à l’API](https://docs.stripe.com/billing/subscriptions/pix.md#pi-create-subscription) envoie les informations relatives au client et au produit à l’[API Subscriptions](https://docs.stripe.com/api/subscriptions.md) pour créer à la fois un objet Subscription et un PaymentIntent. La réponse comprend un ID de PaymentIntent, que vous devez utiliser pour [confirmer un paiement](https://docs.stripe.com/billing/subscriptions/pix.md#display-qr-code-stripe).
## Créer un produit et un tarif [Dashboard]
Les [produits](https://docs.stripe.com/api/products.md) correspondent aux articles ou services que vous vendez. Les [tarifs](https://docs.stripe.com/api/prices.md) définissent le montant et la fréquence des paiements facturés pour un produit. Le tarif prend en compte la valeur du produit, la devise que vous acceptez et s’il s’agit d’un paiement ponctuel ou récurrent. Si vous n’avez que quelques produits et tarifs, créez-les et gérez-les dans le Dashboard.
Ce guide prend comme exemple un service de banque d’images qui débite ses clients d’un montant de 20 BRL pour un abonnement mensuel. Pour modéliser ceci :
1. Go to the [Products](https://dashboard.stripe.com/products?active=true) page and click **Create product**.
1. Saisissez un **Nom** pour le produit. Vous pouvez éventuellement ajouter une **Description** et télécharger une image du produit.
1. Select a **Product tax code**. Learn more about [product tax codes](https://docs.stripe.com/tax/tax-codes.md).
1. Sélectionnez **Récurrent**. Saisissez ensuite **** pour le prix et sélectionnez **** comme devise.
1. Choose whether to **Include tax in price**. You can either use the default value from your [tax settings](https://dashboard.stripe.com/test/settings/tax) or set the value manually. In this example, select **Auto**.
1. Pour **Période de facturation**, sélectionnez **Mensuel**.
1. Click **More pricing options**. Then select **Flat rate** as the pricing model for this example. Learn more about [flat rate](https://docs.stripe.com/products-prices/pricing-models.md#flat-rate) and other [pricing models](https://docs.stripe.com/products-prices/pricing-models.md).
1. Add an internal **Price description** and [Lookup key](https://docs.stripe.com/products-prices/manage-prices.md#lookup-keys) to organize, query, and update specific prices in the future.
1. Cliquez sur **Suivant**. Cliquez ensuite sur **Ajouter un produit**.
Après avoir créé le produit et le tarif, enregistrez l’ID de tarif de manière à pouvoir l’utiliser dans les étapes ultérieures. La page des tarifs affiche l’ID dont le format est similaire à ce qui suit : `price_G0FvDp6vZvdwRZ`.
## Créer ou récupérer un client [Côté serveur]
Pour enregistrer un moyen de paiement Pix pour de futurs paiements, associez-le à un objet représentant votre client.
> #### Utiliser l’API Accounts v2 pour représenter les clients
>
> L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
>
> Pour demander l’accès à l’aperçu Accounts v2,
>
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).
Créez un [Account](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) ou un [Customer](https://docs.stripe.com/api/customers/create.md) configuré par le client lorsque votre client crée un compte auprès de votre entreprise, ou lors de l’enregistrement d’un moyen de paiement. Associez l’ID de l’objet à votre propre représentation interne d’un client.
Créez un nouveau client ou récupérez un client existant pour l’associer à ce paiement.
#### Accounts v2
```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
-H "Authorization: Bearer <>" \
-H "Stripe-Version: 2026-04-22.preview" \
--json '{
"contact_email": "jenny.rosen@example.com",
"display_name": "Jenny Rosen",
"configuration": {
"customer": {}
},
"include": [
"configuration.customer"
]
}'
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/customers \
-u "<>:" \
-d "name=Jenny Rosen" \
--data-urlencode "email=jenny.rosen@example.com"
```
## Créez un abonnement [Côté serveur]
Créez un [abonnement](https://docs.stripe.com/api/subscriptions.md) avec un tarif et un client à l’état `incomplete` en attribuant au paramètre [payment_behavior](https://docs.stripe.com/api/subscriptions/create.md#create_subscription-payment_behavior) la valeur `default_incomplete`. Définissez le paramètre `payment_settings.save_default_payment_method=on_subscription` pour enregistrer un moyen de paiement lors de l’activation de l’abonnement.
Vous pouvez également fournir les [options de mandat Pix Automático](https://docs.stripe.com/payments/pix/pix-automatico.md#pix-automtico-customization).
#### Accounts v2
```curl
curl https://api.stripe.com/v1/subscriptions \
-u "<>:" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_behavior=default_incomplete \
-d "items[0][price]={{PRICE_ID}}" \
-d "payment_settings[save_default_payment_method]=on_subscription" \
-d "payment_settings[payment_method_types][0]=pix" \
-d "payment_settings[payment_method_options][pix][mandate_options][amount]=2000" \
-d "expand[0]=latest_invoice.payments" \
-d "expand[1]=latest_invoice.confirmation_secret"
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/subscriptions \
-u "<>:" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_behavior=default_incomplete \
-d "items[0][price]={{PRICE_ID}}" \
-d "payment_settings[save_default_payment_method]=on_subscription" \
-d "payment_settings[payment_method_types][0]=pix" \
-d "payment_settings[payment_method_options][pix][mandate_options][amount]=2000" \
-d "expand[0]=latest_invoice.payments" \
-d "expand[1]=latest_invoice.confirmation_secret"
```
La réponse inclut la première [facture](https://docs.stripe.com/api/invoices.md) de l’*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). Celui-ci contient les paiements de la facture, qui inclut un PaymentIntent par défaut que Stripe a généré pour cette facture et la clé secrète de confirmation que vous pouvez envoyer au client afin qu’il finalise le processus de paiement en toute sécurité au lieu de lui transmettre la totalité de l’objet PaymentIntent. Renvoyez le `latest_invoice.confirmation_secret.client_secret` au front-end pour finaliser le paiement.
Obtenez l’ID PaymentIntent que vous devez utiliser pour confirmer un paiement provenant de `latest_invoice.payments`.
> Pour créer un *abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) avec une période d’essai gratuite, consultez la documentation relative aux [périodes d’essai des abonnements](https://docs.stripe.com/billing/subscriptions/trials.md).
## Collecter les informations relatives au moyen de paiement [Côté client]
#### HTML + JS
Créez un formulaire de paiement côté client pour collecter les informations de facturation du client :
| Champ | Valeur |
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | Le nom complet du client. |
| `email` | L’adresse e-mail du client. |
| `tax_id` | L’identifiant fiscal du client : un CPF si le client est un particulier, ou un CNPJ si le client est une entreprise. Le gouvernement brésilien exige que les acheteurs fournissent un identifiant fiscal (CPF ou CNPJ) lors de la réalisation des transactions transfrontalières. |
```html
```
#### Réagir
#### npm
Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
#### umd
Nous fournissons également une version UMD pour les sites qui n’utilisent pas npm ni de modules.
Incluez le script Stripe.js, qui exporte une fonction `Stripe` globale, ainsi que la version UMD de React Stripe.js, qui exporte un objet `ReactStripe` global. Chargez toujours le script Stripe.js directement à partir de **js.stripe.com** pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.
```html
```
> La [démo de CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark) vous permet de tester React Stripe.js sans créer de projet.
### Ajoutez Stripe.js et Elements à votre page
Pour utiliser les composants Element, enveloppez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publiable et transmettez l’élément `Promise` renvoyé au fournisseur `Elements`.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import 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('<>');
function App() {
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
## Afficher le QR code Pix avec Stripe [Côté client]
Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML.
```html
Checkout
```
Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement :
```javascript
var stripe = Stripe('<>');
```
Appelez [stripe.confirmPixPayment](https://docs.stripe.com/js/payment_intents/confirm_pix_payment) pour afficher le QR code qui permet à votre client de finaliser son paiement. Incluez un `return_url` pour rediriger votre client une fois le paiement effectué.
```javascript
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPixPayment(
'{{PAYMENT_INTENT_CLIENT_SECRET}}',
{
payment_method: {
billing_details: {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
tax_id: document.getElementById('tax-id').value,
}
},
return_url: 'https://example.com/checkout/complete',
}
);
if (error) {
// Inform the customer that there was an error.
}
});
```
### Effectuer la redirection
Les paramètres de requête d’URL suivants sont fournis lorsque Stripe redirige le client vers l’URL `return_url`.
| Paramètre | Description |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent` | L’identifiant unique du `PaymentIntent`. |
| `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. |
Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez `return_url`. Ceux-ci resteront activés pendant toute la durée du processus de redirection. Le paramètre `return_url` doit correspondre à une page de votre site web sur laquelle l’état du paiement est fourni. Vous devez vérifier l’état du `PaymentIntent` lors de l’affichage de la page de retour. Vous pouvez le faire en utilisant la fonction `retrievePaymentIntent` de Stripe.js et en transmettant `payment_intent_client_secret`.
```javascript
(async () => {
const url = new URL(window.location);
const clientSecret = url.searchParams.get('payment_intent_client_secret');
const {paymentIntent, error} = await stripe.retrievePaymentIntent(clientSecret);
if (error) {
// Handle error
} else if (paymentIntent && paymentIntent.status === 'succeeded') {
// Handle successful payment
}
})();
```
Une fois que le client a autorisé le mandat dans son application bancaire, le paiement est confirmé et le `PaymentIntent` est défini sur l’état `succeeded`.
Une fois le paiement abouti, l’abonnement devient actif et le moyen de paiement est enregistré comme moyen de paiement par défaut.
## Optional: Afficher vous-même le QR code Pix [Côté client]
Nous recommandons l’utilisation de Stripe.js pour afficher les informations de Pix à l’aide de `confirmPixPayment`. Vous pouvez toutefois gérer manuellement l’affichage des chaînes ou des QR codes Pix pour vos clients.
Spécifiez `handleActions: false` lorsque vous appelez `stripe.confirmPixPayment` afin de gérer manuellement l’action suivante consistant à afficher les informations Pix pour votre client.
```javascript
var form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const result = await stripe.confirmPixPayment(
'{{PAYMENT_INTENT_CLIENT_SECRET}}',
{
// payment method details omitted for brevity
},
{
handleActions: false
}
);
if (result.error) {
// Display error to your customer
const errorMsg = document.getElementById('error-message');
errorMsg.innerText = result.error.message;
} else {
// Pix details were successfully created
const amount = result.paymentIntent.amount;
const currency = result.paymentIntent.currency;
const details = result.paymentIntent.next_action.pix_display_qr_code;
// Pix string, also known as Pix “copy and paste”
const emvString = details.data;
// SVG image Pix QR code
const imageUrlSvg = details.image_url_svg;
// PNG image Pix QR code
const imageUrlPng = details.image_url_png;
// Pix expiration date as a unix timestamp
const expires_at = details.expires_at;
// Handle the next action by displaying the Pix details to your customer
// You can also use the generated hosted instructions
const hosted_instructions_url = details.hosted_instructions_url;
}
});
```
Nous vous suggérons d’afficher les éléments suivants :
| Détail | Description |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Chaîne Pix | À l’aide de la chaîne [payment_intent.next_action.pix_display_qr_code.data](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-data) du PaymentIntent, affichez la chaîne Pix pour que vos clients puissent la copier dans leur presse-papiers. |
| Code QR au format SVG | À l’aide de la chaîne [payment_intent.next_action.pix_display_qr_code.image_url_svg](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-image_url_svg) du PaymentIntent, affichez le code QR Pix pour que vos clients puissent le scanner avec leur téléphone. |
| Code QR au format PNG | À l’aide de la chaîne [payment_intent.next_action.pix_display_qr_code.image_url_png](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-image_url_png) du PaymentIntent, affichez le code QR Pix pour que vos clients puissent le scanner avec leur téléphone. |
| Date d’expiration | Affiche la date d’expiration du pix. Utilisez [payment_intent.next_action.pix_display_qr_code.expires_at](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-expires_at) pour voir la date d’expiration. |
Vous pouvez également rediriger vos clients vers la page d’instructions hébergée par Stripe, qui est similaire à celle de la fenêtre modale ouverte par `confirmPixPayment`. Utilisez [payment_intent.next_action.pix_display_qr_code.hosted_instructions_url](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-hosted_instructions_url) pour trouver l’URL de la page d’instructions hébergée par Stripe sur l’objet PaymentIntent.
## Gérer la révocation des moyens de paiement réutilisables [Côté serveur]
Un client peut révoquer un mandat Pix dans son application bancaire. Dans ce cas, Stripe vous envoie un événement [mandate.updated](https://docs.stripe.com/api/events/types.md#event_types-mandate.updated). Pour gérer cela, abonnez-vous aux événements [webhook](https://docs.stripe.com/webhooks.md), et ramenez votre client dans une session pour créer un nouveau mandat.
## Tester votre intégration
Pour tester votre intégration :
1. Sélectionnez Pix.
1. Saisissez les informations du client et appuyez sur **Payer**. Dans un environnement de test, vous pouvez utiliser `000.000.000-00` comme identifiant fiscal de test (CPF ou CNPJ).
1. Cliquez sur **Simuler un scan** pour ouvrir une page de paiement test Pix hébergée par Stripe. À partir de cette page, vous pouvez autoriser ou faire expirer le paiement test.
En mode production, le bouton **Payer** affiche un QR code Pix. Pour finaliser ou annuler ce flux de paiement, vous devez disposer d’un compte bancaire brésilien avec Pix activé.
Vous pouvez également définir [payment_method.billing_details.email](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data-billing_details-email) sur les valeurs suivantes pour tester différents scénarios.
| E-mail | Description |
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}expire_immediately@{any_domain}` | Simule un Pix qui expire immédiatement. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ou [setup_intent.setup_failed](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.setup_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Aucun mandat actif n’est créé.
Exemple : `expire_immediately@test.com` |
| `{any_prefix}expire_with_delay@{any_domain}` | Simule un Pix qui expire après 3 minutes. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ou [setup_intent.setup_failed](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.setup_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes. Aucun mandat actif n’est créé.
Exemple : `expire_with_delay@test.com` |
| `{any_prefix}succeed_mandate_expire_payments_immediately@{any_domain}` | Simule un Pix que votre client paie immédiatement. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Un mandat actif est créé. Les paiements récurrents avec le même moyen de paiement expirent immédiatement. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes.
Exemple : `succeed_mandat_expire_payments_immediately@test.com` |
| `{any_prefix}succeed_mandate_expire_payments_with_delay@{any_domain}` | Simule un Pix qu’un client paie après 3 minutes. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Un mandat actif est créé. Les paiements récurrents avec le même moyen de paiement expirent après 3 minutes. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) ** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes.
Exemple : `succeed_mandat_expire_payments_with_delay@test.com` |
| `{any_prefix}succeed_immediately@{any_domain}` | Simule un Pix que votre client paie immédiatement. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes. Un mandat actif est créé. Tous les paiements récurrents effectués avec le même moyen de paiement réussissent immédiatement. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive en quelques secondes.
Exemple : `succeed_immediately@test.com` |
| `{any_prefix}@{any_domain}` | Simule un Pix qu’un client paie après 3 minutes. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ou [setup_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-setup_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes. Un mandat actif est créé. Tous les paiements récurrents effectués avec le même moyen de paiement réussissent après 3 minutes. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)** (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) arrive après environ 3 minutes.
Exemple : `n’importe quoi@test.com` |
## Optional: Modifier la tarification d’un abonnement existant
Vous pouvez [mettre à jour les tarifs d’un abonnement](https://docs.stripe.com/api/subscriptions/update.md) existant.
Si le nouveau montant total de l’abonnement est supérieur au montant prévu dans le mandat, les paiements récurrents risquent d’échouer et de déclencher un événement de webhook [payment failed](https://docs.stripe.com/billing/subscriptions/webhooks.md#payment-failures). Ces paiements pourraient échouer car les clients ont la possibilité de fixer une limite, dont Stripe n’a aucune visibilité. Le statut de l’abonnement peut changer en fonction de votre [configuration d’abonnement](https://docs.stripe.com/billing/subscriptions/overview.md#subscription-statuses).
Vous avez plusieurs options pour gérer ces scénarios :
- Vous pouvez demander à votre client d’augmenter le montant du mandat dans son application bancaire.
- Vous pouvez mettre à jour les options du mandat avec le nouveau montant en utilisant l’API [Update Subscription](https://docs.stripe.com/api/subscriptions/update.md) et créer une session [Customer Portal](https://docs.stripe.com/api/customer_portal/sessions/create.md) pour permettre à votre client de mettre à jour son moyen de paiement Pix.
- Vous pouvez mettre à jour les options du mandat avec le nouveau montant en utilisant l’API [Update Subscription](https://docs.stripe.com/api/subscriptions/update.md) et créer une [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) en mode `setup` (sans paiement initial), ou en mode `payment` avec [payment_method_options.pix.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-pix-setup_future_usage)=`off_session` (avec un paiement initial) pour créer un nouveau mandat avec un nouveau moyen de paiement, puis [mettre à jour le moyen de paiement de l’abonnement](https://docs.stripe.com/payments/checkout/subscriptions/update-payment-details.md#set-default-payment-method).
- Vous pouvez annuler et recréer l’abonnement.
## Optional: Changer le cycle de facturation d’un abonnement existant
Vous pouvez [mettre à jour le cycle de facturation d’un abonnement existant](https://docs.stripe.com/api/subscriptions/update.md).
Si le calendrier de paiement dans les options du mandat est plus restrictif que le nouvel intervalle de l’abonnement (par exemple, si le `payment_schedule=monthly` du mandat et le nouvel `interval=weekly`), les paiements récurrents échoueront et vous recevrez un événement de webhook [payment failed](https://docs.stripe.com/billing/subscriptions/webhooks.md#payment-failures). Le statut de l’abonnement peut changer en fonction de votre [configuration d’abonnement](https://docs.stripe.com/billing/subscriptions/overview.md#subscription-statuses).
Vous avez plusieurs options pour gérer ces scénarios :
- Vous pouvez mettre à jour les options du mandat avec le nouvel intervalle en utilisant l’API [Update Subscription](https://docs.stripe.com/api/subscriptions/update.md) et créer une session [Customer Portal](https://docs.stripe.com/api/customer_portal/sessions/create.md) pour permettre à votre client de mettre à jour son moyen de paiement Pix.
- Vous pouvez mettre à jour les options du mandat avec le nouvel intervalle en utilisant l’API [Update Subscription](https://docs.stripe.com/api/subscriptions/update.md) et créer une [session Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) en mode `setup` (sans paiement initial) ou en mode `payment` avec [payment_method_options.pix.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-pix-setup_future_usage)=`off_session` (avec un paiement initial) pour créer un nouveau mandat avec un nouveau moyen de paiement, puis [mettre à jour le moyen de paiement de l’abonnement](https://docs.stripe.com/payments/checkout/subscriptions/update-payment-details.md#set-default-payment-method).
- Vous pouvez annuler et recréer l’abonnement.
## Optional: Gérer les échecs de paiement
Si un paiement récurrent échoue et que la raison n’est pas liée aux scénarios de modification de prix ou de cycle de facturation décrits ci-dessus, Stripe réessaie d’initier le paiement comme indiqué dans la section [Retries](https://docs.stripe.com/payments/pix/pix-automatico.md#retries).
Si le paiement échoue après avoir épuisé toutes les tentatives de rappel, vous pouvez effectuer l’une des actions suivantes :
- Créer un paiement unique pour que votre client puisse régler la facture de l’abonnement.
- Créer une session [Customer Portal](https://docs.stripe.com/api/customer_portal/sessions/create.md) pour que votre client puisse régler la facture ou mettre à jour son moyen de paiement.
## Optional: Gérer les achats de modules complémentaires après la création de l’abonnement
En raison des restrictions du système, vous ne pouvez débiter un moyen de paiement Pix qu’une seule fois par cycle spécifié dans [payment_method_options.pix.mandate_options.payment_schedule](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-pix-mandate_options-payment_schedule). Si vos utilisateurs peuvent acheter des modules complémentaires après la création de l’abonnement, les options suivantes s’offrent à vous, selon votre cas d’utilisation :
- Si vous n’avez pas besoin d’un paiement immédiat et que vous souhaitez uniquement mettre à jour l’abonnement pour les paiements futurs, vous pouvez mettre à jour l’abonnement existant à l’aide de l’API [Update Subscription](https://docs.stripe.com/api/subscriptions/update.md). Les restrictions mentionnées dans la section [Changer le prix d’un abonnement existant](https://docs.stripe.com/billing/subscriptions/pix.md#change-pricing-of-subscription) s’appliquent toujours. Si les restrictions du mandat mentionnées dans cette section ne sont pas respectées, vos paiements récurrents pourraient échouer.
- Si vous exigez un paiement immédiat, vous pouvez créer un paiement unique en générant une session Checkout en mode `payment` et en ramenant votre utilisateur sur la session. Par ailleurs, si vous souhaitez également mettre à jour l’abonnement pour les paiements futurs, vous pouvez utiliser l’API [Update Subscription](https://docs.stripe.com/api/subscriptions/update.md).