# Personalizar comportamento de redirecionamento Exiba uma página de confirmação com os dados do pedido do seu cliente. # Página hospedada > This is a Página hospedada 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. Se a sua plataforma Connect utiliza [Contas configuradas pelo cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilize o nosso [guia](https://docs.stripe.com/connect/use-accounts-as-customers.md) para substituir as referências a `Cliente` e eventos no seu código pelas referências equivalentes da API Accounts v2. Se você tiver uma integração de checkout que usa uma página hospedada, a Stripe redireciona o cliente para uma página de sucesso que você cria e hospeda no seu site. Você pode usar os detalhes de uma [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) para exibir uma página de confirmação de pedido para o cliente (por exemplo, nome ou valor do pagamento) após o pagamento. ## Redirecionar os clientes para uma página de sucesso Para usar os detalhes de uma sessão do Checkout: 1. Modifique o [success_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-success_url) para passar o ID da sessão do Checkout para o lado do cliente. 1. Busque a Sessão do Checkout com o ID da sua página de finalização. 1. Use a Sessão do Checkout para personalizar o conteúdo da página de finalização. > #### Os webhooks são necessários para a execução > > Você não pode depender do acionamento do atendimento apenas na sua página de destino de checkout, pois não há garantia de que seus clientes acessarão essa página. Por exemplo, alguém pode pagar e perder a conexão com a Internet antes que sua página de destino carregue. > > [Configure um gerenciador de eventos de Webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=stripe-hosted#create-payment-event-handler) para que a Stripe envie eventos de pagamento diretamente ao seu servidor, ignorando totalmente o cliente. Os webhooks são a maneira mais confiável de confirmar quando você recebe pagamentos. Se a entrega de evento de Webhook falhar, a Stripe [tentará novamente várias vezes](https://docs.stripe.com/webhooks.md#automatic-retries). ## Modificar o URL de sucesso (Lado do servidor) Insira a variável de modelo `{CHECKOUT_SESSION_ID}` em `success_url` ao criar a Sessão do Checkout. Observe que essa string é literal e deve ser adicionada exatamente como está aqui. Não substitua por uma ID de Sessão de Checkout. Isso acontecerá automaticamente após seu cliente pagar e ser encaminhado para a página de finalização. #### Ruby ```ruby session = Stripe::Checkout::Session.create(success_url: "http://yoursite.com/order/success?session_id={CHECKOUT_SESSION_ID}", # other options..., ) ``` ## Criar a página de sucesso (Lado do servidor) Busque a sessão do Checkout usando o ID e crie uma página de sucesso mostrando os dados do pedido. Este exemplo também mostra o nome do 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 ``` ## Testar a integração Para confirmar que seu redirecionamento está funcionando como esperado: 1. Clique no botão de checkout. 1. Preencha o nome do cliente e outros dados de pagamento. 1. Clique em **Pagar**. Se funcionar, você será redirecionado para a página de sucesso com a mensagem personalizada. Por exemplo, se você usou a mensagem dos exemplos de código, a página de sucesso exibirá: **Obrigado pelo seu 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. Se a sua plataforma Connect utiliza [Contas configuradas pelo cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilize o nosso [guia](https://docs.stripe.com/connect/use-accounts-as-customers.md) para substituir as referências a `Cliente` e eventos no seu código pelas referências equivalentes da API Accounts v2. Se você tiver uma integração com o Checkout que usa um formulário integrado, pode personalizar como e se a Stripe redireciona seus clientes após o pagamento. Você pode fazer com que a Stripe redirecione sempre os clientes, redirecione apenas algumas formas de pagamento ou desative completamente os redirecionamentos. Para configurar redirecionamentos, especifique a página de retorno no [parâmetro](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) `return_url`. Como alternativa, você pode: - [Redirecione os clientes somente se a forma de pagamento exigir](https://docs.stripe.com/payments/checkout/custom-success-page.md#redirect-if-required) (por exemplo, uma página de autorização bancária para uma forma de débito). - Não usar uma página de retorno e [desativar formas de pagamento baseadas em redirecionamento](https://docs.stripe.com/payments/checkout/custom-success-page.md#disable-redirects). > #### Os webhooks são necessários para a execução > > Você não pode depender do acionamento do atendimento apenas na sua página de destino de checkout, pois não há garantia de que seus clientes acessarão essa página. Por exemplo, alguém pode pagar e perder a conexão com a Internet antes que sua página de destino carregue. > > [Configure um gerenciador de eventos de Webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-form#create-payment-event-handler) para que a Stripe envie eventos de pagamento diretamente ao seu servidor, ignorando totalmente o cliente. Os webhooks são a maneira mais confiável de confirmar quando você recebe pagamentos. Se a entrega de evento de Webhook falhar, a Stripe [tentará novamente várias vezes](https://docs.stripe.com/webhooks.md#automatic-retries). ## Redirecionar clientes para uma página de retorno Ao criar a [sessão do Checkout](https://docs.stripe.com/api/checkout/sessions.md), você especifica o URL da página de retorno no [parâmetro](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) `return_url`. Inclua a variável de modelo `{CHECKOUT_SESSION_ID}` no URL. Quando o Checkout redireciona um cliente, ele substitui a variável pelo ID de sessão do Checkout real. Ao exibir a página de retorno, recupere o status da sessão do Checkout usando o ID da sessão do Checkout no 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 }); }); ``` Processe o resultado de acordo com o status da sessão da seguinte forma: - `complete`: o pagamento foi bem-sucedido. Use as informações da sessão do Checkout para renderizar uma página de sucesso. - `open`: o pagamento falhou ou foi cancelado. Remonte o Checkout para que seu cliente possa tentar novamente. ```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 } ``` ## Formas de pagamento baseadas em redirecionamento Durante o pagamento, algumas formas de pagamento redirecionam o cliente para uma página intermediária, como uma página de autorização bancária. Quando concluem essa página, a Stripe os redireciona para sua página de retorno. ### Redirecionar somente para formas de pagamento baseadas em redirecionamento Se você não quiser redirecionar clientes após pagamentos que não exigem redirecionamento, defina [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) como `if_required`. Isso redireciona apenas clientes que fazem checkout com formas de pagamento baseadas em redirecionamento. Para pagamentos com cartão, o Checkout renderiza um estado de sucesso padrão em vez de redirecionar. Para usar seu próprio estado de sucesso, passe um retorno de chamada [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete)que destrói a instância do Checkout e renderiza seu estado de sucesso personalizado. `onComplete` é chamado quando a sessão do Checkout é concluída com êxito ou quando o evento de webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) é enviado. #### 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 ? ( ) : ( ) } ``` ### Desativar formas de pagamento baseadas em redirecionamento Se não quiser criar uma página de retorno, crie sua sessão do Checkout com [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) definido como `never`. Isso desativa as formas de pagamento baseadas em redirecionamento: - Se você usa [formas de pagamento dinâmicas](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), ainda pode gerenciar formas de pagamento do Dashboard, mas formas de pagamento que exigem redirecionamentos não são qualificadas. - Se você especificar formas de pagamento manualmente com [payment_method_types](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-payment_method_types), não poderá incluir nenhuma forma de pagamento baseada em redirecionamentos. Definir `redirect_on_completion: nunca` remove o `return_url`. Para essas sessões, o Checkout renderiza um estado de sucesso padrão em vez de redirecionar. Você pode usar seu próprio estado de sucesso ao passar um retorno de chamada [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete) que destrói a instância do Checkout e renderiza seu estado de sucesso personalizado. `onComplete` é chamado quando a sessão do Checkout é concluída com êxito ou quando o evento de webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) é enviado. #### 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 ? ( ) : ( ) } ```