# Étendre le paiement avec des composants personnalisés Affichez du texte personnalisé et collectez des informations supplémentaire sur les Checkout Sessions. # Page hébergée > This is a Page hébergée for when platform is web and payment-ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/checkout/custom-components?platform=web&payment-ui=stripe-hosted. ## Ajouter des champs personnalisés Vous pouvez ajouter des champs personnalisés au formulaire de paiement afin de recueillir des informations supplémentaires auprès de vos clients. Les informations seront disponibles une fois le paiement effectué et pourront servir à traiter la commande. Les champs personnalisés présentent les limites suivantes : - Jusqu’à trois champs autorisés. - Non disponible en mode `setup`. - Prise en charge de 255 caractères maximum dans les champs de texte. - Prise en charge de 255 chiffres maximum dans les champs numériques. - Prise en charge de 200 options maximum dans les champs des listes déroulantes. > N’utilisez pas de champs personnalisés pour collecter des données personnelles, protégées ou sensibles, ni des informations que la loi interdit de recueillir. ### Créer une Session Checkout Créez une session Checkout en spécifiant un tableau de [champs personnalisés](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields). Chaque champ doit être associé à une `key` unique que votre intégration utilise pour rapprocher le champ. Indiquez également le libellé du champ qui sera affiché pour votre client. Les libellés de champs personnalisés ne sont pas traduits, mais vous pouvez utiliser le paramètre [locale](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-locale) pour définir la langue de votre session Checkout correspondant à celle de vos libellés. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=engraving" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Personalized engraving" \ -d "custom_fields[0][type]=text" ``` ![](https://d37ugbyn3rpeym.cloudfront.net/videos/checkout/custom_fields_embedded.mov) ### Récupérer des champs personnalisés Lorsque votre client termine la session Checkout, nous lui envoyons un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) avec les champs renseignés. Exemple de charge utile `checkout.session.completed` : ```json { "id": "evt_1Ep24XHssDVaQm2PpwS19Yt0", "object": "event", "api_version": "2022-11-15", "created": 1664928000, "data": { "object": { "id": "cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k", "object": "checkout.session","custom_fields": [{ "key": "engraving", "label": { "type": "custom", "custom": "Personalized engraving" }, "optional": false, "type": "text", "text": { "value": "Jane" } }], "mode": "payment" } }, "livemode": false, "pending_webhooks": 1, "request": { "id": null, "idempotency_key": null }, "type": "checkout.session.completed" } ``` Vous pouvez également rechercher et modifier des valeurs de champ Custom depuis le Dashboard, en cliquant sur un paiement spécifique dans l’onglet [Transactions](https://dashboard.stripe.com/payments) ou en incluant des valeurs de champ Custom lors de l’exportation de vos paiements depuis le [Dashboard](https://dashboard.stripe.com/payments). ### Utiliser un champ personnalisé #### Marquer un champ comme facultatif Par défaut, les clients doivent remplir tous les champs avant d’effectuer le paiement. Pour marquer un champ comme facultatif, transmettez `optional=true`. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=engraving" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Personalized engraving" \ -d "custom_fields[0][type]=text" \ -d "custom_fields[0][optional]=true" ``` ![](https://b.stripecdn.com/docs-statics-srv/assets/optional.bf0c1564296ff02264bd5e8c066a6034.png) #### Ajouter un champ de liste déroulante Un champ sous forme de liste déroulante présente à vos clients une liste d’options à sélectionner. Pour créer un champ liste déroulante, indiquez `type=dropdown` ainsi qu’une liste d’options, chacune avec un `label` et une `value`. Le `label` est visible du client, tandis que votre intégration utilise la valeur `value` pour rapprocher l’option sélectionnée par le client. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=sample" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Free sample" \ -d "custom_fields[0][optional]=true" \ -d "custom_fields[0][type]=dropdown" \ -d "custom_fields[0][dropdown][options][0][label]=Balm sample" \ -d "custom_fields[0][dropdown][options][0][value]=balm" \ -d "custom_fields[0][dropdown][options][1][label]=BB cream sample" \ -d "custom_fields[0][dropdown][options][1][value]=cream" ``` ![Une page de paiement avec un champ déroulant](https://b.stripecdn.com/docs-statics-srv/assets/dropdown.4501d199ebe009030c2be6935cfdf2dd.png) #### Ajouter un champ de saisie numérique Un champ numérique permet à vos clients de saisir des valeurs numériques, jusqu’à 255 chiffres. Pour créer un champ numérique, spécifiez `type=numeric`. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=invoice" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Invoice number" \ -d "custom_fields[0][type]=numeric" ``` #### Récupérer les champs personnalisés d’un abonnement Vous pouvez récupérer les champs personnalisés associés à un abonnement en recherchant la session Checkout qui l’a créé à l’aide du paramètre [subscription](https://docs.stripe.com/api/checkout/sessions/list.md#list_checkout_sessions-subscription). ```curl curl -G https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "subscription={{SUBSCRIPTION_ID}}" ``` #### Ajouter des validations de limite de caractères Vous avez la possibilité de définir une [exigence](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields-numeric-maximum_length) en matière de longueur de caractères minimale et maximale pour les types de champs `text` et `numeric`. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=engraving" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Personalized engraving" \ -d "custom_fields[0][type]=text" \ -d "custom_fields[0][text][minimum_length]=10" \ -d "custom_fields[0][text][maximum_length]=20" \ -d "custom_fields[0][optional]=true" ``` ![Un champ avec un nombre maximum de caractères](https://b.stripecdn.com/docs-statics-srv/assets/between-validation.20431cd8e0c03a028843945d1f1ea314.png) #### Ajouter des valeurs par défaut Si vous le souhaitez, vous pouvez fournir une valeur par défaut pour les champs de [texte](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields-text-default_value), de [valeur numérique](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields-numeric-default_value) et avec [liste déroulante](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields-dropdown-default_value). Les valeurs par défaut sont renseignées automatiquement sur la page de paiement. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=engraving" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Personalized engraving" \ -d "custom_fields[0][type]=text" \ -d "custom_fields[0][text][default_value]=Stella" \ -d "custom_fields[1][key]=size" \ -d "custom_fields[1][label][type]=custom" \ -d "custom_fields[1][label][custom]=Size" \ -d "custom_fields[1][type]=dropdown" \ -d "custom_fields[1][dropdown][default_value]=small" \ -d "custom_fields[1][dropdown][options][0][value]=small" \ -d "custom_fields[1][dropdown][options][0][label]=Small" \ -d "custom_fields[1][dropdown][options][1][value]=large" \ -d "custom_fields[1][dropdown][options][1][label]=Large" ``` ## Personnalisez le texte et les politiques Lorsque les clients paient avec Stripe Checkout, vous pouvez afficher du texte supplémentaire, par exemple vos délais de traitement et de livraison. > Il vous est interdit d’utiliser cette fonctionnalité pour créer un texte personnalisé susceptible d’enfreindre ou de créer une ambiguïté avec le texte généré par Stripe dans Checkout, les obligations en vertu de votre contrat Stripe, les politiques de Stripe et les lois applicables. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "shipping_address_collection[allowed_countries][0]=US" \ --data-urlencode "custom_text[shipping_address][message]=Please note that we can't guarantee 2-day delivery for PO boxes at this time." \ --data-urlencode "custom_text[submit][message]=We'll email you instructions on how to get started." \ --data-urlencode "custom_text[after_submit][message]=Learn more about **your purchase** on our [product page](https://www.stripe.com/)." \ --data-urlencode "success_url=https://example.com/success" ``` ![Texte personnalisé à proximité des champs de collecte de l'adresse de livraison](https://b.stripecdn.com/docs-statics-srv/assets/shipping-address-custom-text.b0b578d66d2bd415d0b0fe03106d27df.png) Texte personnalisé à proximité des champs de collecte de l’adresse de livraison ![Texte personnalisé au-dessus du bouton Payer](https://b.stripecdn.com/docs-statics-srv/assets/submit-custom-text.bf46135c06b7c33c1ce9c9b09e4206c9.png) Texte personnalisé au-dessus du bouton **Payer** ![Texte personnalisé sous le bouton Payer](https://b.stripecdn.com/docs-statics-srv/assets/custom-text-after-submit.32dbd97008b3f189145bcd07c4562bb4.png) Texte personnalisé au-dessous du bouton **Payer** Votre texte personnalisé peut comporter jusqu’à 1 200 caractères. Cependant, gardez à l’esprit que Stripe Checkout est optimisé pour la conversion et que l’ajout d’informations supplémentaires peut affecter votre taux de conversion. Vous pouvez utiliser des caractères gras ou insérer un lien en utilisant la [syntaxe Markdown](https://www.markdownguide.org/cheat-sheet/). ### Personnaliser le bouton d’envoi Afin de mieux aligner Checkout sur votre modèle économique, configurez le texte affiché sur le bouton d’envoi de Checkout pour les achats ponctuels. Définissez un `submit_type` sur votre session. Dans cet exemple (pour un don de 5 USD), votre bouton d’envoi de paiement personnalisé affiche **Faire un don de \5,00 USD**. Consultez la [documentation de l’API](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-submit_type) pour obtenir la liste complète des options `submit_type`. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d submit_type=donate \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success" ``` ## Localisation et langues prises en charge Par défaut, Checkout détecte les paramètres régionaux du navigateur du client et affiche une version traduite de la page dans sa langue, si celle-ci est [prise en charge](https://support.stripe.com/questions/supported-languages-for-stripe-checkout). Vous pouvez remplacer les paramètres régionaux du navigateur pour Checkout en transmettant le [paramètre](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-locale) `locale` lors de la création d’une session Checkout. Checkout utilise également les paramètres régionaux pour la mise en forme des chiffres et des devises. Par exemple, lors de la vente d’un produit dont le prix est défini en EUR avec les paramètres régionaux définis sur `auto`, un navigateur configuré pour utiliser l’anglais (`en`) affichera €25.00, tandis qu’une configuration pour l’allemand (`de`) affichera 25,00 €. ### Personnalisez les politiques et les coordonnées Vous pouvez afficher votre politique de retour et de remboursement, vos politiques juridiques, ainsi que les coordonnées de votre service de support pour vos clients dans Checkout. Accédez aux [paramètres Checkout](https://dashboard.stripe.com/settings/checkout) pour configurer les informations que vous souhaitez afficher, y compris les éléments suivants : - Détails concernant vos politiques de retour et de remboursement - Site Web, e-mail et numéro de téléphone de votre service de support - Liens vers vos Conditions d’utilisation du service et votre Politique de confidentialité Présentées clairement, ces informations peuvent mettre vos clients en confiance et réduire le taux d’abandon des paniers. ### Configurer le service de support et les politiques juridiques Dans les [paramètres Checkout](https://dashboard.stripe.com/settings/checkout), ajoutez les coordonnées du service de support à vos sessions en activant les **Coordonnées**. De la même manière, ajoutez des liens vers vos **Conditions d’utilisation du service** et votre **Politique de confidentialité** en activant les **Politiques juridiques**. Si vous demandez à vos clients de consentir implicitement à vos politiques juridiques lorsqu’ils effectuent leur paiement, sélectionnez la case **Afficher le consentement aux conditions juridiques**. Vous devez ajouter les liens vers les coordonnées de votre service de support et vers vos politiques juridiques dans vos [Informations publiques sur l’entreprise](https://dashboard.stripe.com/settings/public). Les aperçus suivants montrent comment Checkout affiche une boîte de dialogue avec les coordonnées du service de support, les liens vers les politiques juridiques de la boutique, ainsi que les informations concernant les conditions de paiement. ![Une page de paiement avec des coordonnées.](https://b.stripecdn.com/docs-statics-srv/assets/contact-modal.2b81bc2e74657f7c94a45a743439c81f.png) Aperçu des coordonnées dans Checkout. ![Une page de paiement avec les politiques juridiques.](https://b.stripecdn.com/docs-statics-srv/assets/legal-modal.9351cb51408c2a9f5c0ae23aab03e138.png) Aperçu des politiques juridiques dans Checkout. ### Configurer les politiques de retour et de remboursement Affichez vos politiques de retour, de remboursement ou d’échange en activant **Politiques de retour et de remboursement**. Si les entreprises qui vendent des biens physiques utilisent des politiques de retour, celles qui vendent des biens numériques ou des biens physiques personnalisés utilisent généralement des politiques de remboursement. Comme elles ne s’excluent pas mutuellement, vous pouvez sélectionner les deux options si votre entreprise vend ces deux catégories de biens. Vous pouvez modifier les détails de vos retours et remboursements, en précisant notamment : - Si vous acceptez les retours, les remboursements ou les échanges - Si les retours, les remboursements ou les échanges sont gratuits ou s’ils sont soumis à des frais - Sous combien de jours après l’achat vous acceptez les retours, les remboursements ou les échanges - Comment les clients peuvent retourner les articles qui leur ont été expédiés - Si vous acceptez les retours en magasin - Un lien vers la politique complète de retour et de remboursement - Un message personnalisé Si vous acceptez les retours gratuits, les remboursements ou les échanges, Checkout met cette politique en évidence pour vos clients. Les aperçus suivants montrent comment Checkout affiche une politique de retour. Dans cet exemple, les achats à retourner peuvent être expédiés ou ramenés en magasin pour un remboursement total ou un échange jusqu’à 60 jours après l’achat. Vous pouvez afficher des informations similaires pour les remboursements. ![Aperçu des politiques de retour dans Checkout](https://b.stripecdn.com/docs-statics-srv/assets/return-policy-modal.0c7a9ff71b8bc2c155842532801e06a8.png) Aperçu des politiques de retour dans Checkout. ![Aperçu d'une politique mise en évidence dans Checkout](https://b.stripecdn.com/docs-statics-srv/assets/policy-highlight.334828420693a33d376977a2c0fe5851.png) Aperçu d’une politique mise en évidence dans Checkout. #### Recueillir le consentement aux conditions d’utilisation du service Les entreprises exigent souvent que leurs clients acceptent leurs conditions d’utilisation du service avant de pouvoir payer. Cela peut dépendre du type de produit ou d’abonnement. Checkout vous aide à obtenir les consentements nécessaires en demandant à vos clients d’accepter vos conditions avant de payer. ![Recueillir le consentement aux Conditions d'utilisation du service](https://b.stripecdn.com/docs-statics-srv/assets/terms-of-service-consent-collection.dec90bde6d1a3c5d4c0b3e7b8e644a52.png) Recueillir le consentement aux Conditions d’utilisation du service Vous pouvez recueillir le consentement aux Conditions d’utilisation du service avec Stripe Checkout quand vous créez une session : ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=2" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success" \ -d "consent_collection[terms_of_service]=required" \ --data-urlencode "custom_text[terms_of_service_acceptance][message]=I agree to the [Terms of Service](https://example.com/terms)" ``` Lorsque `consent_collection.terms_of_service='required'` est indiqué, Checkout affiche de manière dynamique une case à cocher pour demander le consentement du client concernant les conditions d’utilisation du service. Si `consent_collection.terms_of_service='none'` est indiqué, Checkout n’affichera pas la case à cocher et n’exigera pas que les clients acceptent les conditions d’utilisation du service. Avant d’exiger le consentement du client, définissez l’URL de vos conditions d’utilisation du service dans les [Informations publiques](https://dashboard.stripe.com/settings/public) de votre entreprise. Il n’est pas obligatoire de définir une URL de politique de confidentialité (Checkout renvoie également vers votre politique de confidentialité si une URL de politique de confidentialité est définie dans vos [Informations publiques](https://dashboard.stripe.com/settings/public)). Une fois qu’un client a finalisé son paiement, vous pouvez vérifier qu’il a accepté vos conditions d’utilisation du service en examinant l’objet Session dans le webhook `checkout.session.completed` ou en récupérant la session à l’aide de l’API. Lorsque les conditions sont acceptées, le champ [consent.terms_of_service](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-consent) de la session est défini sur `accepted`. Vous pouvez personnaliser le texte qui apparaît en regard de la case à cocher à l’aide de l’attribut `custom_text.terms_of_service_acceptance`. Vous devez définir `consent_collection.terms_of_service='required'` Pour utiliser vos propres termes, insérez un lien Markdown. Par exemple :`I agree to the [Terms of Service](https://example.com/terms)` > Consultez vos conseillers juridiques et de conformité avant d’apporter des modifications à ce texte. Vous ne pouvez pas utiliser cette fonctionnalité pour afficher un texte personnalisé qui enfreint ou crée une ambiguïté par rapport au texte généré par Stripe dans Checkout, aux obligations découlant de votre contrat Stripe, aux politiques de Stripe et aux lois en vigueur. #### Recueillir le consentement pour les e-mails promotionnels Vous pouvez envoyer des e-mails promotionnels pour informer les clients de vos nouveaux produits et leur proposer des bons de réduction ou des remises. Avant de le faire, vous devez [recueillir leur consentement](https://docs.stripe.com/payments/checkout/promotional-emails-consent.md) à recevoir des e-mails promotionnels. ## Personnaliser le contrat de réutilisation des moyens de paiement et les conditions d’abonnement Lorsqu’une session est en mode `setup` ou `subscription`, ou en mode `payment` avec `setup_future_usage` défini, Checkout affiche un message invitant à réutiliser le moyen de paiement du client. Le message peut inclure des informations spécifiques au moyen de paiement sélectionné. Vous pouvez masquer ou personnaliser le texte par défaut, mais pas le texte spécifique au moyen de paiement. Dans le cas d’un abonnement, le texte personnalisé peut inclure les informations suivantes : - Un lien vers vos conditions d’abonnement - Un lien vers votre portail client - Vos mécanismes et politiques d’annulation ![Affichage de l'accord de réutilisation du moyen de paiement par défaut en mode abonnement](https://b.stripecdn.com/docs-statics-srv/assets/default-subscription-mode-payment-method-reuse-agreement.caee311155d9948637a53aafded801af.png) Accord de réutilisation du moyen de paiement par défaut en mode abonnement > En personnalisant ce texte, vous assumez la responsabilité de la gestion de la conformité, ce qui inclut la mise à jour du texte en cas d’évolution des règles des réseaux de cartes et des réglementations locales. N’utilisez pas cette fonctionnalité sans consulter votre équipe juridique ou sans définir un texte personnalisé contenant des informations sur la réutilisation du moyen de paiement. Assurez-vous que votre texte personnalisé couvre tous les modes que vous prévoyez de prendre en charge. Pour masquer le texte de l’accord de réutilisation du moyen de paiement, définissez `consent_collection.payment_method_reuse_agreement.position='hidden'`. Checkout n’affichera pas les termes par défaut régissant la réutilisation du moyen de paiement. Pour définir votre propre texte à la place des termes par défaut de Stripe, définissez `custom_text.after_submit.message`. Vous pouvez également utiliser `custom_text.submit` ou `custom_text.terms_of_service_acceptance` pour afficher votre propre version de ces termes. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=subscription \ --data-urlencode "success_url=https://example.com/success" \ -d "consent_collection[payment_method_reuse_agreement][position]=hidden" \ --data-urlencode "custom_text[after_submit][message]=You can cancel your subscription at any time by [logging into your account](https://www.example.com/)" ``` # Page intégrée > This is a Page intégrée for when platform is web and payment-ui is embedded-form. View the full page at https://docs.stripe.com/payments/checkout/custom-components?platform=web&payment-ui=embedded-form. Vous pouvez ajouter des champs personnalisés sur le formulaire de paiement pour collecter des informations supplémentaires auprès de vos clients. Vous pouvez également personnaliser le texte que vos clients voient et les politiques affichées par Checkout. ## Ajouter des champs personnalisés Vous pouvez ajouter des champs personnalisés au formulaire de paiement afin de recueillir des informations supplémentaires auprès de vos clients. Les informations seront disponibles une fois le paiement effectué et pourront servir à traiter la commande. Les champs personnalisés présentent les limites suivantes : - Jusqu’à trois champs autorisés. - Non disponible en mode `setup`. - Prise en charge de 255 caractères maximum dans les champs de texte. - Prise en charge de 255 chiffres maximum dans les champs numériques. - Prise en charge de 200 options maximum dans les champs des listes déroulantes. > N’utilisez pas de champs personnalisés pour collecter des données personnelles, protégées ou sensibles, ni des informations que la loi interdit de recueillir. ### Créer une Session Checkout Créez une session Checkout en spécifiant un tableau de [champs personnalisés](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields). Chaque champ doit être associé à une `key` unique que votre intégration utilise pour rapprocher le champ. Indiquez également le libellé du champ qui sera affiché pour votre client. Les libellés de champs personnalisés ne sont pas traduits, mais vous pouvez utiliser le paramètre [locale](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-locale) pour définir la langue de votre session Checkout correspondant à celle de vos libellés. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=engraving" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Personalized engraving" \ -d "custom_fields[0][type]=text" ``` ![](https://d37ugbyn3rpeym.cloudfront.net/videos/checkout/custom_fields_embedded.mov) ### Récupérer des champs personnalisés Lorsque votre client termine la session Checkout, nous lui envoyons un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) avec les champs renseignés. Exemple de charge utile `checkout.session.completed` : ```json { "id": "evt_1Ep24XHssDVaQm2PpwS19Yt0", "object": "event", "api_version": "2022-11-15", "created": 1664928000, "data": { "object": { "id": "cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k", "object": "checkout.session","custom_fields": [{ "key": "engraving", "label": { "type": "custom", "custom": "Personalized engraving" }, "optional": false, "type": "text", "text": { "value": "Jane" } }], "mode": "payment" } }, "livemode": false, "pending_webhooks": 1, "request": { "id": null, "idempotency_key": null }, "type": "checkout.session.completed" } ``` Vous pouvez également rechercher et modifier des valeurs de champ Custom depuis le Dashboard, en cliquant sur un paiement spécifique dans l’onglet [Transactions](https://dashboard.stripe.com/payments) ou en incluant des valeurs de champ Custom lors de l’exportation de vos paiements depuis le [Dashboard](https://dashboard.stripe.com/payments). ### Utiliser un champ personnalisé #### Marquer un champ comme facultatif Par défaut, les clients doivent remplir tous les champs avant d’effectuer le paiement. Pour marquer un champ comme facultatif, transmettez `optional=true`. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=engraving" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Personalized engraving" \ -d "custom_fields[0][type]=text" \ -d "custom_fields[0][optional]=true" ``` ![](https://b.stripecdn.com/docs-statics-srv/assets/optional.bf0c1564296ff02264bd5e8c066a6034.png) #### Ajouter un champ de liste déroulante Un champ sous forme de liste déroulante présente à vos clients une liste d’options à sélectionner. Pour créer un champ liste déroulante, indiquez `type=dropdown` ainsi qu’une liste d’options, chacune avec un `label` et une `value`. Le `label` est visible du client, tandis que votre intégration utilise la valeur `value` pour rapprocher l’option sélectionnée par le client. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=sample" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Free sample" \ -d "custom_fields[0][optional]=true" \ -d "custom_fields[0][type]=dropdown" \ -d "custom_fields[0][dropdown][options][0][label]=Balm sample" \ -d "custom_fields[0][dropdown][options][0][value]=balm" \ -d "custom_fields[0][dropdown][options][1][label]=BB cream sample" \ -d "custom_fields[0][dropdown][options][1][value]=cream" ``` ![Une page de paiement avec un champ déroulant](https://b.stripecdn.com/docs-statics-srv/assets/dropdown.4501d199ebe009030c2be6935cfdf2dd.png) #### Ajouter un champ de saisie numérique Un champ numérique permet à vos clients de saisir des valeurs numériques, jusqu’à 255 chiffres. Pour créer un champ numérique, spécifiez `type=numeric`. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=invoice" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Invoice number" \ -d "custom_fields[0][type]=numeric" ``` #### Récupérer les champs personnalisés d’un abonnement Vous pouvez récupérer les champs personnalisés associés à un abonnement en recherchant la session Checkout qui l’a créé à l’aide du paramètre [subscription](https://docs.stripe.com/api/checkout/sessions/list.md#list_checkout_sessions-subscription). ```curl curl -G https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "subscription={{SUBSCRIPTION_ID}}" ``` #### Ajouter des validations de limite de caractères Vous avez la possibilité de définir une [exigence](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields-numeric-maximum_length) en matière de longueur de caractères minimale et maximale pour les types de champs `text` et `numeric`. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=engraving" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Personalized engraving" \ -d "custom_fields[0][type]=text" \ -d "custom_fields[0][text][minimum_length]=10" \ -d "custom_fields[0][text][maximum_length]=20" \ -d "custom_fields[0][optional]=true" ``` ![Un champ avec un nombre maximum de caractères](https://b.stripecdn.com/docs-statics-srv/assets/between-validation.20431cd8e0c03a028843945d1f1ea314.png) #### Ajouter des valeurs par défaut Si vous le souhaitez, vous pouvez fournir une valeur par défaut pour les champs de [texte](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields-text-default_value), de [valeur numérique](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields-numeric-default_value) et avec [liste déroulante](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-custom_fields-dropdown-default_value). Les valeurs par défaut sont renseignées automatiquement sur la page de paiement. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "custom_fields[0][key]=engraving" \ -d "custom_fields[0][label][type]=custom" \ -d "custom_fields[0][label][custom]=Personalized engraving" \ -d "custom_fields[0][type]=text" \ -d "custom_fields[0][text][default_value]=Stella" \ -d "custom_fields[1][key]=size" \ -d "custom_fields[1][label][type]=custom" \ -d "custom_fields[1][label][custom]=Size" \ -d "custom_fields[1][type]=dropdown" \ -d "custom_fields[1][dropdown][default_value]=small" \ -d "custom_fields[1][dropdown][options][0][value]=small" \ -d "custom_fields[1][dropdown][options][0][label]=Small" \ -d "custom_fields[1][dropdown][options][1][value]=large" \ -d "custom_fields[1][dropdown][options][1][label]=Large" ``` ## Personnalisez le texte et les politiques Lorsque les clients paient avec Stripe Checkout, vous pouvez afficher du texte supplémentaire, par exemple vos délais de traitement et de livraison. > Il vous est interdit d’utiliser cette fonctionnalité pour créer un texte personnalisé susceptible d’enfreindre ou de créer une ambiguïté avec le texte généré par Stripe dans Checkout, les obligations en vertu de votre contrat Stripe, les politiques de Stripe et les lois applicables. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "shipping_address_collection[allowed_countries][0]=US" \ --data-urlencode "custom_text[shipping_address][message]=Please note that we can't guarantee 2-day delivery for PO boxes at this time." \ --data-urlencode "custom_text[submit][message]=We'll email you instructions on how to get started." \ --data-urlencode "custom_text[after_submit][message]=Learn more about **your purchase** on our [product page](https://www.stripe.com/)." \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" ``` ![Texte personnalisé à proximité des champs de collecte de l'adresse de livraison](https://b.stripecdn.com/docs-statics-srv/assets/shipping-address-custom-text.b0b578d66d2bd415d0b0fe03106d27df.png) Texte personnalisé à proximité des champs de collecte de l’adresse de livraison ![Texte personnalisé au-dessus du bouton Payer](https://b.stripecdn.com/docs-statics-srv/assets/submit-custom-text.bf46135c06b7c33c1ce9c9b09e4206c9.png) Texte personnalisé au-dessus du bouton **Payer** ![Texte personnalisé sous le bouton Payer](https://b.stripecdn.com/docs-statics-srv/assets/custom-text-after-submit.32dbd97008b3f189145bcd07c4562bb4.png) Texte personnalisé au-dessous du bouton **Payer** Votre texte personnalisé peut comporter jusqu’à 1 200 caractères. Cependant, gardez à l’esprit que Stripe Checkout est optimisé pour la conversion et que l’ajout d’informations supplémentaires peut affecter votre taux de conversion. Vous pouvez utiliser des caractères gras ou insérer un lien en utilisant la [syntaxe Markdown](https://www.markdownguide.org/cheat-sheet/). ### Personnaliser le bouton d’envoi Afin de mieux aligner Checkout sur votre modèle économique, configurez le texte affiché sur le bouton d’envoi de Checkout pour les achats ponctuels. Définissez un `submit_type` sur votre session. Dans cet exemple (pour un don de 5 USD), votre bouton d’envoi de paiement personnalisé affiche **Faire un don de \5,00 USD**. Consultez la [documentation de l’API](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-submit_type) pour obtenir la liste complète des options `submit_type`. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d submit_type=donate \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" ``` ## Localisation et langues prises en charge Par défaut, Checkout détecte les paramètres régionaux du navigateur du client et affiche une version traduite de la page dans sa langue, si celle-ci est [prise en charge](https://support.stripe.com/questions/supported-languages-for-stripe-checkout). Vous pouvez remplacer les paramètres régionaux du navigateur pour Checkout en transmettant le [paramètre](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-locale) `locale` lors de la création d’une session Checkout. Checkout utilise également les paramètres régionaux pour la mise en forme des chiffres et des devises. Par exemple, lors de la vente d’un produit dont le prix est défini en EUR avec les paramètres régionaux définis sur `auto`, un navigateur configuré pour utiliser l’anglais (`en`) affichera €25.00, tandis qu’une configuration pour l’allemand (`de`) affichera 25,00 €. ### Personnalisez les politiques et les coordonnées Vous pouvez afficher votre politique de retour et de remboursement, vos politiques juridiques, ainsi que les coordonnées de votre service de support pour vos clients dans Checkout. Accédez aux [paramètres Checkout](https://dashboard.stripe.com/settings/checkout) pour configurer les informations que vous souhaitez afficher, y compris les éléments suivants : - Détails concernant vos politiques de retour et de remboursement - Site Web, e-mail et numéro de téléphone de votre service de support - Liens vers vos Conditions d’utilisation du service et votre Politique de confidentialité Présentées clairement, ces informations peuvent mettre vos clients en confiance et réduire le taux d’abandon des paniers. ### Configurer le service de support et les politiques juridiques Dans les [paramètres Checkout](https://dashboard.stripe.com/settings/checkout), ajoutez les coordonnées du service de support à vos sessions en activant les **Coordonnées**. De la même manière, ajoutez des liens vers vos **Conditions d’utilisation du service** et votre **Politique de confidentialité** en activant les **Politiques juridiques**. Si vous demandez à vos clients de consentir implicitement à vos politiques juridiques lorsqu’ils effectuent leur paiement, sélectionnez la case **Afficher le consentement aux conditions juridiques**. Vous devez ajouter les liens vers les coordonnées de votre service de support et vers vos politiques juridiques dans vos [Informations publiques sur l’entreprise](https://dashboard.stripe.com/settings/public). Les aperçus suivants montrent comment Checkout affiche une boîte de dialogue avec les coordonnées du service de support, les liens vers les politiques juridiques de la boutique, ainsi que les informations concernant les conditions de paiement. ![Une page de paiement avec des coordonnées.](https://b.stripecdn.com/docs-statics-srv/assets/contact-modal.2b81bc2e74657f7c94a45a743439c81f.png) Aperçu des coordonnées dans Checkout. ![Une page de paiement avec les politiques juridiques.](https://b.stripecdn.com/docs-statics-srv/assets/legal-modal.9351cb51408c2a9f5c0ae23aab03e138.png) Aperçu des politiques juridiques dans Checkout. ### Configurer les politiques de retour et de remboursement Affichez vos politiques de retour, de remboursement ou d’échange en activant **Politiques de retour et de remboursement**. Si les entreprises qui vendent des biens physiques utilisent des politiques de retour, celles qui vendent des biens numériques ou des biens physiques personnalisés utilisent généralement des politiques de remboursement. Comme elles ne s’excluent pas mutuellement, vous pouvez sélectionner les deux options si votre entreprise vend ces deux catégories de biens. Vous pouvez modifier les détails de vos retours et remboursements, en précisant notamment : - Si vous acceptez les retours, les remboursements ou les échanges - Si les retours, les remboursements ou les échanges sont gratuits ou s’ils sont soumis à des frais - Sous combien de jours après l’achat vous acceptez les retours, les remboursements ou les échanges - Comment les clients peuvent retourner les articles qui leur ont été expédiés - Si vous acceptez les retours en magasin - Un lien vers la politique complète de retour et de remboursement - Un message personnalisé Si vous acceptez les retours gratuits, les remboursements ou les échanges, Checkout met cette politique en évidence pour vos clients. Les aperçus suivants montrent comment Checkout affiche une politique de retour. Dans cet exemple, les achats à retourner peuvent être expédiés ou ramenés en magasin pour un remboursement total ou un échange jusqu’à 60 jours après l’achat. Vous pouvez afficher des informations similaires pour les remboursements. ![Aperçu des politiques de retour dans Checkout](https://b.stripecdn.com/docs-statics-srv/assets/return-policy-modal.0c7a9ff71b8bc2c155842532801e06a8.png) Aperçu des politiques de retour dans Checkout. ![Aperçu d'une politique mise en évidence dans Checkout](https://b.stripecdn.com/docs-statics-srv/assets/policy-highlight.334828420693a33d376977a2c0fe5851.png) Aperçu d’une politique mise en évidence dans Checkout. #### Recueillir le consentement aux conditions d’utilisation du service Les entreprises exigent souvent que leurs clients acceptent leurs conditions d’utilisation du service avant de pouvoir payer. Cela peut dépendre du type de produit ou d’abonnement. Checkout vous aide à obtenir les consentements nécessaires en demandant à vos clients d’accepter vos conditions avant de payer. ![Recueillir le consentement aux Conditions d'utilisation du service](https://b.stripecdn.com/docs-statics-srv/assets/terms-of-service-consent-collection.dec90bde6d1a3c5d4c0b3e7b8e644a52.png) Recueillir le consentement aux Conditions d’utilisation du service Vous pouvez recueillir le consentement aux Conditions d’utilisation du service avec Stripe Checkout quand vous créez une session : ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=2" \ -d mode=payment \ -d "consent_collection[terms_of_service]=required" \ --data-urlencode "custom_text[terms_of_service_acceptance][message]=I agree to the [Terms of Service](https://example.com/terms)" \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" ``` Lorsque `consent_collection.terms_of_service='required'` est indiqué, Checkout affiche de manière dynamique une case à cocher pour demander le consentement du client concernant les conditions d’utilisation du service. Si `consent_collection.terms_of_service='none'` est indiqué, Checkout n’affichera pas la case à cocher et n’exigera pas que les clients acceptent les conditions d’utilisation du service. Avant d’exiger le consentement du client, définissez l’URL de vos conditions d’utilisation du service dans les [Informations publiques](https://dashboard.stripe.com/settings/public) de votre entreprise. Il n’est pas obligatoire de définir une URL de politique de confidentialité (Checkout renvoie également vers votre politique de confidentialité si une URL de politique de confidentialité est définie dans vos [Informations publiques](https://dashboard.stripe.com/settings/public)). Une fois qu’un client a finalisé son paiement, vous pouvez vérifier qu’il a accepté vos conditions d’utilisation du service en examinant l’objet Session dans le webhook `checkout.session.completed` ou en récupérant la session à l’aide de l’API. Lorsque les conditions sont acceptées, le champ [consent.terms_of_service](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-consent) de la session est défini sur `accepted`. Vous pouvez personnaliser le texte qui apparaît en regard de la case à cocher à l’aide de l’attribut `custom_text.terms_of_service_acceptance`. Vous devez définir `consent_collection.terms_of_service='required'` Pour utiliser vos propres termes, insérez un lien Markdown. Par exemple :`I agree to the [Terms of Service](https://example.com/terms)` > Consultez vos conseillers juridiques et de conformité avant d’apporter des modifications à ce texte. Vous ne pouvez pas utiliser cette fonctionnalité pour afficher un texte personnalisé qui enfreint ou crée une ambiguïté par rapport au texte généré par Stripe dans Checkout, aux obligations découlant de votre contrat Stripe, aux politiques de Stripe et aux lois en vigueur. #### Recueillir le consentement pour les e-mails promotionnels Vous pouvez envoyer des e-mails promotionnels pour informer les clients de vos nouveaux produits et leur proposer des bons de réduction ou des remises. Avant de le faire, vous devez [recueillir leur consentement](https://docs.stripe.com/payments/checkout/promotional-emails-consent.md) à recevoir des e-mails promotionnels. ## Personnaliser le contrat de réutilisation des moyens de paiement et les conditions d’abonnement Lorsqu’une session est en mode `setup` ou `subscription`, ou en mode `payment` avec `setup_future_usage` défini, Checkout affiche un message invitant à réutiliser le moyen de paiement du client. Le message peut inclure des informations spécifiques au moyen de paiement sélectionné. Vous pouvez masquer ou personnaliser le texte par défaut, mais pas le texte spécifique au moyen de paiement. Dans le cas d’un abonnement, le texte personnalisé peut inclure les informations suivantes : - Un lien vers vos conditions d’abonnement - Un lien vers votre portail client - Vos mécanismes et politiques d’annulation ![Affichage de l'accord de réutilisation du moyen de paiement par défaut en mode abonnement](https://b.stripecdn.com/docs-statics-srv/assets/default-subscription-mode-payment-method-reuse-agreement.caee311155d9948637a53aafded801af.png) Accord de réutilisation du moyen de paiement par défaut en mode abonnement > En personnalisant ce texte, vous assumez la responsabilité de la gestion de la conformité, ce qui inclut la mise à jour du texte en cas d’évolution des règles des réseaux de cartes et des réglementations locales. N’utilisez pas cette fonctionnalité sans consulter votre équipe juridique ou sans définir un texte personnalisé contenant des informations sur la réutilisation du moyen de paiement. Assurez-vous que votre texte personnalisé couvre tous les modes que vous prévoyez de prendre en charge. Pour masquer le texte de l’accord de réutilisation du moyen de paiement, définissez `consent_collection.payment_method_reuse_agreement.position='hidden'`. Checkout n’affichera pas les termes par défaut régissant la réutilisation du moyen de paiement. Pour définir votre propre texte à la place des termes par défaut de Stripe, définissez `custom_text.after_submit.message`. Vous pouvez également utiliser `custom_text.submit` ou `custom_text.terms_of_service_acceptance` pour afficher votre propre version de ces termes. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=subscription \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "consent_collection[payment_method_reuse_agreement][position]=hidden" \ --data-urlencode "custom_text[after_submit][message]=You can cancel your subscription at any time by [logging into your account](https://www.example.com/)" ``` # Éléments Checkout > This is a Éléments Checkout for when platform is web and payment-ui is elements. View the full page at https://docs.stripe.com/payments/checkout/custom-components?platform=web&payment-ui=elements. Les composants personnalisés ne sont pas nécessaires lorsque vous utilisez des éléments Checkout. Vous pouvez composer les éléments dans votre propre interface et insérer vos propres composants personnalisés entre eux si nécessaire.