Confirmation page (Pro)

Creating a Custom Confirmation Page with Receipt Information After Checkout

Overview

When using form checkout redirection, you can create a customized confirmation page that displays payment details, transaction information, and customer data after successful payment processing.

Default Behavior (Only success message)

By default, if no Success URL is configured, the stripe-hosted checkout page redirects back to the current form page and displays a basic success message confirming that:

• The email was sent successfully

• The payment was processed

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:

[cf7pa-receipt]

3. Design Your Confirmation Layout

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

{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}
{payment_method.card.brand}
{payment_method.card.last4}
{receipt.url}

Example overview:

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

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

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

  .cf7pa-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="cf7pa-confirmation">
  <h4 class="cf7pa-confirmation__thank-you">Thank you. Your payment has been received.</h4>
  <h4>Summary</h4>
  {description}
  <h4>Payment details</h4>
  <div class="cf7pa-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="cf7pa-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

In your checkout form settings, specify the URL of your new confirmation page as the Success URL. This ensures customers are redirected to your custom confirmation page after successful payment.

Testing

After the above settings, make a form checkout redirection submitting and see if the redirection is back on the confirmation page, if everything works, the confirmation page will be like bthe elow:

Notes

• All shortcode tags must be placed within a page containing the [cf7pa-receipt] shortcode to function properly

• You can style the confirmation page using your theme's CSS or custom styles

• Test the confirmation page thoroughly to ensure all dynamic content displays correctly