# Personnaliser le comportement de redirection Affichez une page de confirmation contenant les informations de 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), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2. Si vous avez une intégration Checkout qui utilise une page hébergée par Stripe, Stripe redirigera votre client vers une page de confirmation de paiement que vous créez et hébergez sur votre site. Vous pouvez utiliser les informations d’une [session Checkout](https://docs.stripe.com/api/checkout/sessions.md) pour afficher une page de confirmation de commande pour votre client (par exemple, son nom ou le montant du paiement) après le paiement. ## Rediriger les clients vers une page de réussite Pour utiliser les détails d’une session Checkout : 1. Modifiez l’URL [success_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-success_url) de façon à 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 notifications HTTP en temps réel sont nécessaires au traitement > > Vous ne pouvez pas compter sur le déclenchement du traitement uniquement à partir de votre page de renvoi de paiement, car vos clients ne sont pas garantis de visiter cette page. Par exemple, quelqu’un peut payer avec succès, puis perdre sa connexion à Internet avant le chargement de votre page de renvoi. > > [Configurez un gestionnaire d’événements notification HTTP en temps réel](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=stripe-hosted#create-payment-event-handler) afin que Stripe puisse envoyer des événements de paiement directement à votre serveur, en contournant entièrement le client. Les notifications HTTP en temps réel fournissent le moyen le plus fiable de confirmer quand on se fait payer. Si la livraison d’événements notification HTTP en temps réel échoue, Stripe [tente plusieurs fois](https://docs.stripe.com/webhooks.md#automatic-retries). ## Modifier l’adresse URL de confirmation de paiement (Server-side) Ajoutez la variable de modèle `{CHECKOUT_SESSION_ID}` à l’URL `success_url` lorsque vous créez votre session Checkout. Veuillez noter qu’il s’agit d’une chaîne littérale, qui doit être ajoutée exactement telle qu’indiquée ici. Ne lui substituez pas un ID de session Checkout; cela s’effectue automatiquement une fois que votre client a réglé et est redirigé vers l’URL de confirmation de paiement. #### 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 confirmation de paiement (Server-side) Recherchez la session Checkout à partir de cet identifiant 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. Saisissez le nom du client et d’autres informations de paiement. 1. Cliquez sur **Payer**. Si la redirection fonctionne, vous serez redirigé vers la page de confirmation de paiement avec votre message personnalisé. Par exemple, si vous avez utilisé le message offert dans le modèle de code, la page de confirmation de paiement affichera ce message : **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), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2. Si vous avez une intégration Checkout qui utilise un formulaire intégré, vous pouvez personnaliser la façon dont Stripe redirige vos clients après qu’ils aient effectué le paiement. Vous pouvez demander à Stripe de toujours rediriger les clients, de rediriger uniquement certains moyens de paiement ou de désactiver complètement les redirections. Pour configurer les redirections, précisez la page de retour dans le paramètre `return_url`[.](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) Vous pouvez aussi : - [Ne rediriger les clients que 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 paiement par débit). - Ne pas utiliser de page de retour et [désactiver les moyens de paiement fondés sur la redirection](https://docs.stripe.com/payments/checkout/custom-success-page.md#disable-redirects). > #### Les notifications HTTP en temps réel sont nécessaires au traitement > > Vous ne pouvez pas compter sur le déclenchement du traitement uniquement à partir de votre page de renvoi de paiement, car vos clients ne sont pas garantis de visiter cette page. Par exemple, quelqu’un peut payer avec succès, puis perdre sa connexion à Internet avant le chargement de votre page de renvoi. > > [Configurez un gestionnaire d’événements notification HTTP en temps réel](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-form#create-payment-event-handler) afin que Stripe puisse envoyer des événements de paiement directement à votre serveur, en contournant entièrement le client. Les notifications HTTP en temps réel fournissent le moyen le plus fiable de confirmer quand on se fait payer. Si la livraison d’événements notification HTTP en temps réel échoue, Stripe [tente plusieurs fois](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), vous devez préciser l’URL de la page de retour dans le `return_url` [paramètre](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Incluez la variable de modèle `{CHECKOUT_SESSION_ID}` dans l’URL. Lorsque Checkout redirige un client, il remplace la variable par l’ID de session Checkout réel. Lorsque votre page de retour est présentée, récupérez l’état de la session Checkout à l’aide de l’ID de 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 }); }); ``` Gérez le résultat en fonction de l’état de la session comme suit : - `complete` : Le paiement a été effectué. Utilisez les informations de la session Checkout pour afficher une page de confirmation de paiement. - `open` : Le paiement a échoué ou a été annulé. Chargez de nouveau le paiement afin que votre client puisse réessayer. ```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 fondés sur la redirection Lors du paiement, certains moyens de paiement redirigent le client vers une page intermédiaire, telle qu’une page d’autorisation bancaire. Une fois que le client a terminé sur cette page, Stripe le redirige vers votre page de retour. ### Redirection uniquement pour les moyens de paiement fondés sur la redirection Si vous ne souhaitez pas rediriger les clients après des paiements qui ne nécessitent pas de redirection, ous pouvez définir [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) à `if_required`. Seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés. Pour les paiements par carte, Checkout affiche un état de réussite par défaut au lieu de rediriger. 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 se termine avec succès, ou lorsque l’événement 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 fondés sur la redirection Si vous ne souhaitez pas créer de page de retour, créez votre session Checkout avec [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) défini à `never`. Cela désactive les moyens de paiement fondés sur la 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 à partir du Dashboard, mais les moyens de paiement qui nécessitent une redirection ne peuvent pas être utilisés. - Si vous précisez 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 pourrez pas inclure de moyens de paiement fondés sur la redirection. Le paramètre `redirect_on_completion: never` supprime l’exigence `return_url`. Pour ces sessions, Checkout affiche un état de réussite par défaut au lieu de rediriger. 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 se termine avec succès, ou lorsque l’événement 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 ? ( ) : ( ) } ```