Customize your success page

Learn how to customize your success_url.

Having a static success page is a good start, but what if you want to display something like Thanks for your order, <customer name> after the customer has paid?

To achieve this, you’ll need to:

Modify the success_url to add the Checkout Session id.
Look up the Checkout Session based on the id on your success page.
Use the session to customize your success page’s text.

1 Modify the success URL Server-side

Modify the success_url parameter you previously changed to add a session_id query parameter:

session = Stripe::Checkout::Session.create(
  success_url: "http://yoursite.com/order/success",
  success_url: "http://yoursite.com/order/success?session_id={CHECKOUT_SESSION_ID}",
  # other options...,
)
session = Stripe::Checkout::Session.create(
  success_url: "http://yoursite.com/order/success",
  success_url: "http://yoursite.com/order/success?session_id={CHECKOUT_SESSION_ID}",
  # other options...,
)

This passes the customer’s Checkout Session ID to your success page, which you can use to look up information about the purchase.

2 Modify your success page Server-side

Next, create a success page that looks up the order and prints out the customer’s name:

get '/order/success' do
  session = Stripe::Checkout::Session.retrieve(params[:session_id])
  customer = Stripe::Checkout::Customer.retrieve(session.customer)

  <<~HTML
    <html>
    <head><title>Thanks for your order!</title></head>
    <body>
      <h1>Thanks for your order, #{customer.name}!</h1>

      <p>
        We appreciate your business!
        If you have any questions, please email
        <a href="mailto:orders@example.com">orders@example.com</a>
      </p>
    </body>
    </html>
  HTML
end
get '/order/success' do
  session = Stripe::Checkout::Session.retrieve(params[:session_id])
  customer = Stripe::Checkout::Customer.retrieve(session.customer)

  <<~HTML
    <html>
    <head><title>Thanks for your order!</title></head>
    <body>
      <h1>Thanks for your order, #{customer.name}!</h1>

      <p>
        We appreciate your business!
        If you have any questions, please email
        <a href="mailto:orders@example.com">orders@example.com</a>
      </p>
    </body>
    </html>
  HTML
end

3 Test it out

Follow these steps:

Click your checkout button.
Fill the customer name in as “Jenny Rosen.”
Fill out the remaining payment details.
Click Pay.

You should be redirected to your success page, and see Thanks for your order, Jenny Rosen!