# Personnaliser le comportement de redirection Affichez une page de confirmation contenant les informations relatives à la commande de votre client. # Page hébergée > This is a Page hébergée for when payment-ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/checkout/custom-success-page?payment-ui=stripe-hosted. Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), consultez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer dans votre code les références `Customer` et événements par les références équivalentes de l’API Comptes v2. Si vous avez une intégration Checkout qui utilise une page hébergée, Stripe redirige votre client vers une page de réussite que vous créez et hébergez sur votre site. Vous pouvez utiliser les détails d’une[Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) afficher une page de confirmation commande pour votre client (par exemple, leur nom ou leur paiement nombre) après le paiement. ## Rediriger les clients vers une page de réussite Pour utiliser les informations d’une session Checkout : 1. Modifiez le [success_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-success_url) pour transmettre l’ID de session Checkout côté client. 1. Recherchez la session Checkout à partir de l’ID de votre page de confirmation de paiement. 1. Utilisez la session Checkout pour personnaliser l’affichage de votre page de confirmation de paiement. > #### Les webhooks sont requis pour l'exécution > > Vous ne pouvez pas compter uniquement sur votre page d’accueil de paiement pour déclencher le traitement, car il n’est pas garanti que vos clients visitent cette page. Par exemple, quelqu’un peut effectuer avec succès un paiement, puis perdre sa connexion à Internet avant le chargement de votre page d’accueil. > > [Configurez un gestionnaire d’événements de webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=stripe-hosted#create-payment-event-handler) pour que Stripe puisse envoyer des événements de paiement directement à votre serveur, sans passer par le client. Les webhooks constituent le moyen le plus fiable de confirmer le moment où vous recevez le paiement. Si la livraison de l’événement de webhook échoue, Stripe effectue [plusieurs tentatives](https://docs.stripe.com/webhooks.md#automatic-retries). ## Modifier l’URL de réussite (Server-side) Ajoutez la variable de modèle `{CHECKOUT_SESSION_ID}` au paramètre `success_url` lorsque vous créez la Checkout Session. Notez qu’il s’agit d’une chaîne littérale et qu’elle doit être ajoutée exactement telle qu’elle apparaît ici. Ne la remplacez pas par un ID de Checkout Session : cela se fait automatiquement une fois que votre client a payé et est redirigé vers la page de confirmation. #### Ruby ```ruby session = Stripe::Checkout::Session.create(success_url: "http://yoursite.com/order/success?session_id={CHECKOUT_SESSION_ID}", # other options..., ) ``` ## Créer la page de réussite (Server-side) Recherchez la session Checkout à partir de cet ID et créez une page de confirmation de paiement qui affiche les informations de commande. L’exemple ci-dessous affiche le nom du client : #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key = '<>' require 'sinatra' get '/order/success' dosession = Stripe::Checkout::Session.retrieve(params[:session_id]) customer = Stripe::Customer.retrieve(session.customer) "

Thanks for your order, #{customer.name}!

" end ``` ## Tester l’intégration Pour confirmer que votre redirection fonctionne comme prévu : 1. Cliquez sur le bouton de paiement. 1. Renseignez le nom du client et d’autres informations de paiement. 1. Cliquez sur **Payer**. Si cela fonctionne, vous êtes redirigé(e) vers la page de confirmation et votre message personnalisé s’affiche. Par exemple, si vous avez utilisé le message dans les exemples de code, la page de confirmation affiche le message suivant : **Merci pour votre commande, Jenny Rosen !** # Page intégrée > This is a Page intégrée for when payment-ui is embedded-form. View the full page at https://docs.stripe.com/payments/checkout/custom-success-page?payment-ui=embedded-form. Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), consultez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer dans votre code les références `Customer` et événements par les références équivalentes de l’API Comptes v2. Si vous disposez d’une intégration Checkout qui utilise un formulaire intégré, vous pouvez personnaliser la manière dont Stripe redirige ou non vos clients une fois le paiement effectué. Vous pouvez demander à Stripe de rediriger systématiquement les clients, de les rediriger uniquement pour certains moyens de paiement, ou de désactiver complètement les redirections. Pour configurer des redirections, indiqueez la page de retour dans le [paramètre](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) `return_url`. Vous pouvez également : - [Rediriger uniquement les clients si le moyen de paiement l’exige](https://docs.stripe.com/payments/checkout/custom-success-page.md#redirect-if-required) (par exemple, une page d’autorisation bancaire pour un moyen de paiement par prélèvement). - Ne pas utiliser de page de retour et [désactiver les moyens de paiement basés sur la redirection](https://docs.stripe.com/payments/checkout/custom-success-page.md#disable-redirects). > #### Les webhooks sont requis pour l'exécution > > Vous ne pouvez pas compter uniquement sur votre page d’accueil de paiement pour déclencher le traitement, car il n’est pas garanti que vos clients visitent cette page. Par exemple, quelqu’un peut effectuer avec succès un paiement, puis perdre sa connexion à Internet avant le chargement de votre page d’accueil. > > [Configurez un gestionnaire d’événements de webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-form#create-payment-event-handler) pour que Stripe puisse envoyer des événements de paiement directement à votre serveur, sans passer par le client. Les webhooks constituent le moyen le plus fiable de confirmer le moment où vous recevez le paiement. Si la livraison de l’événement de webhook échoue, Stripe effectue [plusieurs tentatives](https://docs.stripe.com/webhooks.md#automatic-retries). ## Rediriger les clients vers une page de retour Lorsque vous créez la [session Checkout](https://docs.stripe.com/api/checkout/sessions.md), indiquez l’URL de la page renvoyée dans le [paramètre](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) `return_url`. Incluez la variable de modèle `{CHECKOUT_SESSION_ID}` dans l’URL. Lorsque Checkout redirige un client, la variable est remplacée par l’ID de session Checkout. Lors du rendu de votre page de retour, récupérez l’état de la session Checkout à l’aide de l’ID de la session Checkout dans l’URL. ```javascript app.get('/session_status', async (req, res) => { const session = await stripe.checkout.sessions.retrieve(req.query.session_id); const customer = await stripe.customers.retrieve(session.customer); res.send({ status: session.status, payment_status: session.payment_status, customer_email: customer.email }); }); ``` Traitez le résultat en fonction de l’état de la session comme suit : - `complete` : le paiement a abouti. Utilisez les informations de la session Checkout pour afficher une page de confirmation. - `open` : le paiement a échoué ou a été annulé. Montez à nouveau Checkout pour que votre client puisse effectuer une nouvelle tentative. ```javascript const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page } ``` ## Moyens de paiement avec redirection Lors du paiement, certains moyens de paiement redirigent le client vers une page intermédiaire, comme la page d’autorisation de sa banque. Une fois qu’il a renseigné cette page, Stripe le redirige vers votre page de retour. ### Rediriger uniquement pour les moyens de paiement avec redirection Si vous ne souhaitez pas rediriger les clients après les paiements qui ne nécessitent pas de redirection, définissez [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) sur `if_required`. Cela redirige uniquement les clients qui paient à l’aide de moyens de paiement avec redirection. Pour les paiements par carte, Checkout affiche un état de réussite par défaut au lieu d’effectuer une redirection. Pour utiliser votre propre état de réussite, transmettez un rappel [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete) qui détruit l’instance Checkout et affiche votre état de réussite personnalisé. `onComplete` est appelé lorsque la session Checkout aboutit ou lorsque l’événement de webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) est envoyé. #### HTML + JS ```javascript const stripe = Stripe('<>'); initialize(); async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Example `onComplete` callback const handleComplete = async function() { // Destroy Checkout instance checkout.destroy() // Retrieve details from server (which loads Checkout Session) const details = await retrievePurchaseDetails(); // Show custom purchase summary showPurchaseSummary(details); } const checkout = await stripe.createEmbeddedCheckoutPage({ fetchClientSecret, onComplete: handleComplete }); checkout.mount('#checkout'); } ``` #### React ```jsx const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; const [isComplete, setIsComplete] = useState(false); const handleComplete = () => setIsComplete(true); return isComplete ? ( ) : ( ) } ``` ### Désactiver les moyens de paiement avec redirection Si vous ne souhaitez pas créer de page de retour, définissez [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) sur `never` lors de la création de votre session Checkout. Cela désactive les moyens de paiement avec redirection : - Si vous utilisez des [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), vous pouvez toujours gérer les moyens de paiement depuis le Dashboard. Cependant, les moyens de paiement avec redirection ne sont pas admissibles. - Si vous indiquez manuellement des moyens de paiement avec [payment_method_types](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-payment_method_types), vous ne pouvez pas inclure de moyen de paiement avec redirection. Définir `redirect_on_completion: never` supprime l’obligation de fournir une `return_url`. Pour ces sessions, Checkout affiche un état de réussite par défaut au lieu de rediriger l’utilisateur. Vous pouvez utiliser votre propre état de réussite en transmettant un rappel [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete), qui détruit l’instance Checkout et affiche votre état de réussite personnalisé. `onComplete` est appelé lorsque la session Checkout aboutit ou lorsque l’événement de webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) est envoyé. #### HTML + JS ```javascript const stripe = Stripe('<>'); initialize(); async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Example `onComplete` callback const handleComplete = async function() { // Destroy Checkout instance checkout.destroy() // Retrieve details from server (which loads Checkout Session) const details = await retrievePurchaseDetails(); // Show custom purchase summary showPurchaseSummary(details); } const checkout = await stripe.createEmbeddedCheckoutPage({ fetchClientSecret, onComplete: handleComplete }); checkout.mount('#checkout'); } ``` #### React ```jsx const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; const [isComplete, setIsComplete] = useState(false); const handleComplete = () => setIsComplete(true); return isComplete ? ( ) : ( ) } ```