# Personaliza el comportamiento de redireccionamiento Muestra una página de confirmación con la información del pedido del cliente. # Hosted page > This is a Hosted page 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 usa [Cuentas configuradas por clientes](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), usa nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias de `Clientes` y eventos en tu código con las referencias de la API Accounts v2 equivalentes. If you have a Checkout integration that uses a hosted page, Stripe redirects your customer to a success page that you create and host on your site. You can use the details from a [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) to display an order confirmation page for your customer (for example, their name or payment amount) after the payment. ## Redirige a los clientes a una página de éxito Para usar los detalles de una sesión de Checkout: 1. Modifica la [success_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-success_url) para pasar el ID de sesión de Checkout 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 puede confiar en activar la gestión logística solo desde su página de aterrizaje de proceso de compra porque no se garantiza que sus clientes visiten esa página. Por ejemplo, alguien puede pagar con éxito y luego perder su conexión a Internet antes de que se cargue su página de destino. > > [Configuración de un controlador de eventos de webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=stripe-hosted#create-payment-event-handler) para que Stripe pueda enviar eventos pago directamente a su servidor, omitiendo el cliente por completo. Los webhooks proporcionan la forma más confiable de confirmar cuándo recibir pagos. Si se produce un error en la entrega de eventos de webhook, Stripe [reintenta varias veces](https://docs.stripe.com/webhooks.md#automatic-retries). ## Modifica la URL correcta (Server-side) Cuando crees la sesión de Checkout, agrega la variable de plantilla `{CHECKOUT_SESSION_ID}` a la `success_url`. Ten en cuenta que es una cadena literal y que debe agregarse 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 es redirigido 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..., ) ``` ## Crea la página de confirmación (Server-side) Busca la sesión de Checkout usando el ID y crea una página de confirmación 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 ``` ## Probar la integración Para confirmar que tu redireccionamiento está funcionando como se esperaba, haz lo siguiente: 1. Haz clic en el botón de finalización de compra. 1. Completa el nombre del cliente y otros datos de pago. 1. Haz click en **Pagar**. Si funciona, se te redirigirá a la página de éxito con tu mensaje personalizado. Por ejemplo, si usaste el mensaje en los ejemplos de código, la página de éxito muestra este mensaje: **¡Gracias por tu pedido, Carmen Rodríguez!** # Embedded page > This is a Embedded page 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 usa [Cuentas configuradas por clientes](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), usa nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias de `Clientes` y eventos en tu código con las referencias de la API Accounts v2 equivalentes. Si tienes una integración de Checkout que utiliza un formulario integrado, puedes personalizar si Stripe redirigirá a tus clientes después de que completen el pago y cómo lo hará. Puedes hacer que Stripe redirija a los clientes en todos los casos, que solo los redirija para algunos métodos de pago, o puedes desactivar por completo las redirecciones. Para configurar las redirecciones, especifica la página de retorno en el `return_url` [parámetro](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Como alternativa, puedes: - [Redirige 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 débito). - No usar una página de devolución y [deshabilitar los métodos de pago basados en redirecciones](https://docs.stripe.com/payments/checkout/custom-success-page.md#disable-redirects). > #### Los webhooks son necesarios para la gestión logística > > No puede confiar en activar la gestión logística solo desde su página de aterrizaje de proceso de compra porque no se garantiza que sus clientes visiten esa página. Por ejemplo, alguien puede pagar con éxito y luego perder su conexión a Internet antes de que se cargue su página de destino. > > [Configuración de un controlador de eventos de webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-form#create-payment-event-handler) para que Stripe pueda enviar eventos pago directamente a su servidor, omitiendo el cliente por completo. Los webhooks proporcionan la forma más confiable de confirmar cuándo recibir pagos. Si se produce un error en la entrega de eventos de webhook, Stripe [reintenta varias veces](https://docs.stripe.com/webhooks.md#automatic-retries). ## Redirigir a los clientes a una página de retorno Cuando creas la [sesión de Checkout](https://docs.stripe.com/api/checkout/sessions.md), especificas la URL de la página de retorno en el `return_url` [parámetro](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Incluye la variable de plantilla `{CHECKOUT_SESSION_ID}` en la URL. Cuando Checkout redirige a un cliente, reemplaza la variable con la ID de sesión de Checkout real. Al renderizar tu página de retorno, recupera el estado de la sesión de Checkout utilizando la ID de la sesión de Checkout 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 }); }); ``` Maneja el resultado de acuerdo con el estado de la sesión de la siguiente manera: - `complete`: el pago se efectuó correctamente. Usa la información de la sesión de Checkout para mostrar una página que indique que el pago se realizó correctamente. - `open`: el pago falló o se canceló. Vuelve a montar Checkout 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 redirecciones Durante el proceso de 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. ### Solo redirecciona los métodos de pago que requieran redireccionamiento Si no quieres redirigir a los clientes después de haber realizado pagos que no requieren un redireccionamiento, configura [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) como `if_required`. Eso redirige solo a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento. Para los pagos con tarjetas, Checkout muestra un estado de éxito predeterminado en lugar de redirigir al cliente. Para usar tu propio estado de éxito, pasa una devolución de llamada [onComplete](https://docs.stripe.com/js/embedded_checkout/init#embedded_checkout_init-options-onComplete) que destruya la instancia de Checkout y represente tu estado de éxito personalizado. Se llama a `onComplete` cuando la sesión de Checkout 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.initEmbeddedCheckout({ fetchClientSecret, onComplete: handleComplete }); checkout.mount('#checkout'); } ``` #### Reaccionar ```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 que requieran redireccionamientos Si no quieres crear una página de retorno, crea tu sesión de Checkout con [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) establecido en `never`. Esto deshabilita los métodos de pago que requieran redireccionamientos: - Si usas los [métodos de pago dinámicos](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), puedes administrar los métodos de pago desde el Dashboard, pero aquellos que requieren redireccionamiento no cumplen los requisitos. - Si especificas manualmente los 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 que requiera redireccionamientos. Establecer `redirect_on_completion: never` elimina el requisito `return_url`. Para estas sesiones, Checkout muestra un estado de éxito predeterminado en lugar de redirigir al cliente. Para usar tu propio estado de éxito, pasa una devolución de llamada [onComplete](https://docs.stripe.com/js/embedded_checkout/init#embedded_checkout_init-options-onComplete) que destruya la instancia de Checkout y represente tu estado de éxito personalizado. Se llama a `onComplete` cuando la sesión de Checkout 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.initEmbeddedCheckout({ fetchClientSecret, onComplete: handleComplete }); checkout.mount('#checkout'); } ``` #### Reaccionar ```jsx const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; const [isComplete, setIsComplete] = useState(false); const handleComplete = () => setIsComplete(true); return isComplete ? ( ) : ( ) } ```