# Personaliza el comportamiento de redireccionamiento Muestra una página de confirmación con la información del pedido del cliente. # Página alojada > This is a Página alojada 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 tu plataforma Connect utiliza [Cuentas configuradas por el cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utiliza nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias del `cliente` y de los eventos en tu código por las referencias equivalentes de la API Accounts v2. Si tienes una integración de Checkout que utiliza una página alojada, Stripe redirige a tu cliente a una página de pago efectuado correctamente que crees y alojes en tu sitio web. Puedes usar los detalles de una [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) para mostrar una página de confirmación del pedido para tu cliente (por ejemplo, su nombre o el importe del pago) después del pago. ## Redirigir a los clientes a una página de pago correcto Para usar los detalles de una Checkout Session: 1. Modifica la [success_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-success_url) para pasar el ID de la Checkout Session al lado del cliente. 1. Busca la sesión de Checkout usando el ID en tu página de confirmación. 1. Usa la sesión de Checkout para personalizar lo que se verá en la página de confirmación. > #### Los webhooks son necesarios para la gestión logística > > No puedes confiar en que la gestión logística se complete solo desde tu página de proceso de compra, ya que no hay garantía de que tus clientes visiten esa página. Por ejemplo, alguien puede pagar correctamente y luego perder la conexión a Internet antes de que se cargue tu página de destino. > > [Configura un controlador de eventos webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=stripe-hosted#create-payment-event-handler) para que Stripe pueda enviar los eventos de pago directamente a tu servidor, evitando por completo al cliente. Los webhooks proporcionan la forma más fiable para confirmar cuándo recibe pagos. Si falla la entrega del evento webhook, Stripe [lo vuelve a intentar varias veces](https://docs.stripe.com/webhooks.md#automatic-retries). ## Modificar la URL correcta (Server-side) Al crear la sesión de Checkout, añade la variable de plantilla `{CHECKOUT_SESSION_ID}` a la URL `success_url`. Ten en cuenta que es una cadena literal y que debe añadirse exactamente como la ves aquí. No la sustituyas con un ID de sesión de Checkout (esto sucede automáticamente después de que el cliente paga y se le redirige a la página de confirmación). #### Ruby ```ruby session = Stripe::Checkout::Session.create(success_url: "http://yoursite.com/order/success?session_id={CHECKOUT_SESSION_ID}", # other options..., ) ``` ## Crear la página de pago correcto (Server-side) Busca la sesión de Checkout usando el ID y crea una página de pago correcto para mostrar la información del pedido. En el siguiente ejemplo, aparece el nombre del cliente: #### 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 ``` ## Prueba la integración Para confirmar que tu redireccionamiento está funcionando como se esperaba: 1. Haz clic en el botón del proceso de pago. 1. Completa el nombre del cliente y otros datos de pago. 1. Haz clic en **Pagar**. Si funciona, se te redirige a la página de pago correcto con tu mensaje personalizado. Por ejemplo, si has usado el mensaje de los ejemplos de código, la página de éxito mostrará este mensaje: **¡Gracias por tu pedido, Jenny Rosen!** # Página integrada > This is a Página integrada 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 tu plataforma Connect utiliza [Cuentas configuradas por el cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utiliza nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias del `cliente` y de los eventos en tu código por las referencias equivalentes de la API Accounts v2. Si tienes una integración de pago que utiliza un formulario integrado, puedes personalizar cómo redirige Stripe a tus clientes (y si lo hace) después de que completen el pago. Puedes hacer que Stripe siempre redirija a los clientes, que solo redirija para algunos métodos de pago o que deshabilite completamente los redireccionamientos. Para configurar los redireccionamientos, especifica la página de retorno en el [parámetro](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) `return_url`. Como alternativa, puedes: - [Redirigir a los clientes solo si el método de pago lo requiere](https://docs.stripe.com/payments/checkout/custom-success-page.md#redirect-if-required) (por ejemplo, una página de autorización bancaria para un método basado en el débito). - No utilizar una página de retorno y [deshabilitar los métodos de pago basados en el redireccionamiento](https://docs.stripe.com/payments/checkout/custom-success-page.md#disable-redirects). > #### Los webhooks son necesarios para la gestión logística > > No puedes confiar en que la gestión logística se complete solo desde tu página de proceso de compra, ya que no hay garantía de que tus clientes visiten esa página. Por ejemplo, alguien puede pagar correctamente y luego perder la conexión a Internet antes de que se cargue tu página de destino. > > [Configura un controlador de eventos webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-form#create-payment-event-handler) para que Stripe pueda enviar los eventos de pago directamente a tu servidor, evitando por completo al cliente. Los webhooks proporcionan la forma más fiable para confirmar cuándo recibe pagos. Si falla la entrega del evento webhook, Stripe [lo vuelve a intentar varias veces](https://docs.stripe.com/webhooks.md#automatic-retries). ## Redirige a los clientes a una página de retorno Cuando creas la [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md), especificas la URL de la página de retorno en el [parámetro](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) `return_url`. Incluye la variable de plantilla `{CHECKOUT_SESSION_ID}` en la URL. Cuando Checkout redirija a un cliente, reemplaza la variable con el ID real de la Checkout Session. Cuando muestres tu página de retorno, recupera el estado de la Checkout Session utilizando el ID de la Checkout Session en la 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 }); }); ``` Gestiona el resultado de acuerdo con el estado de la sesión de la siguiente manera: - `complete`: El pago se ha realizado correctamente. Usa la información de la Checkout Session para mostrar una página de pago efectuado correctamente. - `open`: El pago ha fallado o se ha cancelado. Vuelve a montar el proceso de pago para que tu cliente pueda volver a intentarlo. ```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 } ``` ## Métodos de pago basados en el redireccionamiento Durante el pago, algunos métodos de pago redirigen al cliente a una página intermedia, como una página de autorización bancaria. Cuando completan esa página, Stripe los redirige a tu página de retorno. ### Redirecciona solo en los métodos de pago basados en el redireccionamiento Si no quieres redireccionar clientes después de pagos que no requieren un redireccionamiento, establece [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) como `if_required`. Eso solo redirige a los clientes que finalizan su compra con métodos de pago basados en el redireccionamiento. En el caso de los pagos con tarjeta, Checkout muestra un estado de éxito predeterminado en lugar de redirigirte. Para usar tu propio estado de éxito, pasa una función de devolución de llamada [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete) que elimine la instancia de Checkout y muestre tu estado de éxito personalizado. Se llama a `onComplete` cuando la Checkout Session se completa correctamente o cuando se envía el evento de webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed). #### 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 ? ( ) : ( ) } ``` ### Deshabilita los métodos de pago basados en el redireccionamiento Si no quieres crear una página de retorno, crea tu Checkout Session con [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) establecido en `never`. De este modo se deshabilitan los métodos de pago basados en redireccionamientos: - Si utilizas [métodos de pago dinámicos](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), puedes seguir gestionando los métodos de pago desde el Dashboard, pero los métodos de pago que requieran redireccionamientos no cumplen los requisitos. - Si especificas manualmente métodos de pago con [payment_method_types](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-payment_method_types), no puedes incluir ningún método de pago basado en el redireccionamiento. Al configurar `redirect_on_completion: never` se elimina el requisito de `return_url`. En estas sesiones, Checkout muestra un estado de éxito predeterminado en lugar de redirigir. Puedes usar tu propio estado de éxito pasando una función de devolución de llamada [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete) que destruya la instancia de Checkout y muestre tu estado de éxito personalizado. Se llama a `onComplete` cuando la Checkout Session se completa correctamente o cuando se envía el evento de webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed). #### 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 ? ( ) : ( ) } ```