# Créer un bouton d'achat intégrable Utilisez Payment Links pour créer un bouton d'achat intégrable sur votre site Web. Créez un bouton d’achat intégrable pour vendre un produit ou un abonnement, ou accepter un paiement sur votre site Web. Commencez par sélectionner un lien existant dans la [liste des liens de paiement](https://dashboard.stripe.com/payment-links) ou par [créer un lien](https://dashboard.stripe.com/payment-links/create), ce qui vous permettra de décider des produits à vendre et de personnaliser l’interface utilisateur de paiement. Une fois votre lien créé, cliquez sur le **bouton Acheter** pour configurer le style du bouton d’achat et générer un code que vous pourrez copier et coller sur votre site Web. ## Personnaliser le bouton Par défaut, votre bouton d’achat utilise les mêmes attributs de marque et le même appel à l’action que ceux configurés pour votre lien de paiement. Vous pouvez : - Choisissez entre un bouton simple et un widget de carte. - Définissez des couleurs, formes et polices de caractères adaptées à votre site Web. - Définissez la langue du bouton et de la page de paiement pour qu’elle corresponde à celle de votre site Web. - Personnalisez l’appel à l’action de votre bouton. ![Personnaliser le bouton d'achat](https://b.stripecdn.com/docs-statics-srv/assets/buy-button-card-layout.4003c3e9ffe3ce4378092dbdcd456ed9.png) Personnaliser le bouton d’achat ## Intégrer le bouton Stripe fournit un code intégré composé d’une balise ` ``` ## Attributs pour personnaliser le paiement | Paramètre | Description | Syntaxe | | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `client-reference-id` | Utilisez `client-reference-id` pour associer une chaîne unique de votre choix à la `CheckoutSession`. La chaîne peut être un ID de client ou un ID de panier (ou similaire) que vous utilisez pour rapprocher la `CheckoutSession` de vos systèmes internes. Si vous transmettez ce paramètre à votre ``, il sera envoyé dans le [webhook checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) une fois le paiement exécuté. | `client-reference-id` peut comprendre des caractères alphanumériques, des tirets et des traits de soulignement, et prendre n’importe quelle valeur jusqu’à 200 caractères. Les valeurs non valides sont ignorées et votre page de paiement continue à fonctionner comme prévu. | | `customer-email` | Utilisez `customer-email` pour pré-remplir l’adresse e-mail sur la page de paiement. Lorsque la propriété est définie, le bouton d’achat la transmet à l’attribut `customer_email` de la `CheckoutSession`. Le client ne peut pas modifier l’adresse e-mail sur la page de paiement. | `customer-email` doit être une adresse e-mail valide. Les valeurs non valides sont ignorées et vos pages de paiement continuent de fonctionner comme prévu. | | `customer-session-client-secret` | Utilisez la `clé secrète du client` pour [transmettre un client existant](https://docs.stripe.com/payment-links/buy-button.md#pass-an-existing-customer). | La valeur `customer-session-client-secret` doit être générée à partir de la clé secrète du client [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret). | ## Transmettre un client existant > #### Utiliser l’API Accounts v2 pour représenter les clients > > The Accounts v2 API is generally available for Connect users, and in public preview for other Stripe users. If you’re part of the Accounts v2 preview, you need to specify a [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in your code. > > To request access to the Accounts v2 preview, > > 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/connect/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md). #### Accounts v2 Vous pouvez fournir un objet [customer-configured Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer) existant aux `CheckoutSessions` créées à partir du bouton d’achat. Authentifiez le client sur le serveur, puis créez sa `CustomerSession` et renvoyez-lui le [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret). ```curl curl https://api.stripe.com/v1/customer_sessions \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "components[buy_button][enabled]=true" ``` #### Customer v1 Vous pouvez fournir un objet [Customer](https://docs.stripe.com/api/customers.md) existant aux `CheckoutSessions` créées à partir du bouton d’achat. Authentifiez le client sur le serveur, puis créez sa `CustomerSession` et renvoyez-lui le [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret). ```curl curl https://api.stripe.com/v1/customer_sessions \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d "components[buy_button][enabled]=true" ``` Définissez l’attribut `customer-session-client-secret` du composant web `` sur le paramètre [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) de la CustomerSession. Vous devez fournir le [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) dans un délai de 30 minutes. Après avoir fourni la clé secrète du client, vous disposez de 30 minutes supplémentaires jusqu’à l’expiration de la `CustomerSession`. Après son expiration, le bouton d’achat ne peut créer aucune `CheckoutSessions`. Ne mettez pas en cache la clé secrète du client. Générez-en plutôt une nouvelle chaque fois que vous affichez un bouton d’achat. #### HTML ```html ``` ## Politique de sécurité du contenu Si vous avez établi une [politique de sécurité du contenu](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), les obligations associées au bouton d’achat sont les suivantes : - frame-src, https://js.stripe.com - script-src, https://js.stripe.com ## Limitations L’affichage du bouton d’achat nécessite un domaine de site Web. Pour tester le bouton d’achat en local, exécutez un serveur HTTP local pour héberger le fichier `index.html` de votre site Web sur le domaine localhost. Pour exécuter un serveur HTTP local, utilisez le [SimpleHTTPServer](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server) de Python ou le module npm [http-server](https://www.npmjs.com/package/http-server). ## Suivre les paiements Une fois que votre client a effectué un paiement à l’aide d’un lien de paiement, il s’affiche dans [l’aperçu des paiements](https://dashboard.stripe.com/payments) dans le Dashboard. Si vous débutez sur Stripe, vous recevrez un e-mail suite à votre premier paiement. Pour recevoir des e-mails pour tous les paiements aboutis, mettez à jour vos préférences de notification dans vos paramètres d’[informations personnelles](https://dashboard.stripe.com/settings/user). Lorsque vous proposez un abonnement ou [enregistrez un moyen de paiement pour un usage futur](https://docs.stripe.com/payment-links/customize.md#save-payment-details-for-future-use) sans spécifier de client existant, la Checkout Session crée automatiquement un nouveau [client](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation). Pour les paiements ponctuels, la session utilise un [client invité](https://docs.stripe.com/payments/checkout/guest-customers.md). En savoir plus sur la gestion des [liens de paiement après le paiement](https://docs.stripe.com/payment-links/post-payment.md), comme la configuration du comportement des boutons d’achat ou des liens de paiement après le paiement.