Customize confirmation page (Pro)

Redirect to your custom a Confirmation or Thank you Page with receipt Information after payment

As you may know, we currently offer a confirmation summary element that displays a summary of the user's payment details after they complete a transaction. However, this section has a fixed design, allowing only limited customization of its styles. In many cases, users request the ability to display a fully customized confirmation or thank-you page.

To address this, we now provide a receipt shortcode that allows you to design a confirmation page that seamlessly aligns with your site's style and branding. This feature gives you the flexibility to create a completely tailored experience for your users.

Redirect to a Custom Confirmation Page

1. Create Your Confirmation Page

Create a new page where you want to display the detailed payment confirmation.

2. Add the Receipt Shortcode

Insert the following shortcode into your page:

[epa-receipt]

3. Insert merge fields

You can customize your confirmation page by incorporating various supported tags to display transaction details such as by using the below-supported merge fields:

Insert any of the below tags into your HTML pages:

{description}
{amount}
{currency}
{format_date}
{format_time}
{amount_currency}
{customer.email}
{customer.name}
{customer.phone}}
{customer.address.country}
{customer.address.state}
{customer.address.city}
{customer.address.line1}
{customer.address.line2}
{customer.address.postal_code}
{billing_detail.email}
{billing_detail.name}
{billing_detail.phone}
{billing_detail.address.country}
{billing_detail.address.state}
{billing_detail.address.city}
{billing_detail.address.line1}
{billing_detail.address.line2}
{billing_detail.address.postal_code}
{payment_method.type}
{payment_method.card.brand}
{payment_method.card.last4}
{receipt.url}

4. Metadata merge field (advanced)

Metadata is a powerful feature that allows you to store all the submitted form data, which can be leveraged to populate templates with field names. This information can also be found in the Stripe Dashboard.

The {metadata} is a formatted key-value string including the specified metadata (for checkout redirection) or form values (for payment form)

We can split them by giving an existing key. For example, if a form id key is called 'first_name', we can use it in email as {metadata.first_name}

Example overview

To implement a basic confirmation page, add a Custom HTML block with your desired layout. Here's a sample template:

<style>
  .epa-confirmation {
    max-width: 800px;
  }

  .epa-confirmation__thank-you {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .epa-confirmation__section {
    background-color: #f6f9fc;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 30px;
  }

  .payment-detail {
    display: flex;
  }

  .payment-detail>div {
    margin-right: 2em;
    text-transform: uppercase;
    font-size: .715em;
    line-height: 1;
    border-right: 1px dashed #d3ced2;
    padding-right: 2em;
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
  }

  .payment-detail>div:last-of-type {
    border: none;
  }

  .payment-detail>div strong {
    display: block;
    font-size: 1.4em;
    text-transform: none;
    line-height: 1.5;
  }
</style>
<section class="epa-confirmation">
  <h4 class="epa-confirmation__thank-you">Thank you. Your payment has been received.</h4>
  <h4>Summary</h4>
  {description}
  <h4>Payment details</h4>
  <div class="epa-confirmation__section payment-detail">
    <div>DATE: <strong>{format_time}</strong></div>
    <div>EMAIL: <strong>{customer.email}</strong></div>
    <div>TOTAL: <strong>{amount_currency}</strong></div>
    <div>PAYMENT METHOD: 
      <strong>
        {payment_method.card.brand} - {payment_method.card.last4}
      </strong>
    </div>
  </div>

  <h4>Billing details</h4>
  <div class="epa-confirmation__section">
    <div>{billing_detail.name}</div>
    <div>
      {billing_detail.address.line1} <br/>
      {billing_detail.address.line2} <br/>
      {billing_detail.address.city}, {billing_detail.address.state} {billing_detail.address.postal_code} <br/>
      {billing_detail.address.country}
    </div>
    <div>{billing_detail.email}</div>
    <div>{billing_detail.phone}</div>
  </div>
  <p></p>
  <p><span>You can download the </span><a href="{receipt.url}" target="_self"><span>receipt</span></a> here.</p>
</section>

Configure Success URL

All of our elements and forms are designed to allow you to specify a success redirection. You can easily assign your custom confirmation page by setting it as the success or return URL.