> For the complete documentation index, see [llms.txt](https://cf7-docs.payaddons.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cf7-docs.payaddons.com/basics/confirmation-page-pro.md).

# Confirmation page (Pro)

<figure><img src="/files/bHGnTpqMerCkEsgLOuJR" alt=""><figcaption></figcaption></figure>

### 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

<figure><img src="/files/fdSE8YjzhsnE82huIkSw" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Lrtvf9QHlDR1PhdFQBL4" alt=""><figcaption></figcaption></figure>

### 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:

<figure><img src="/files/FhNY4K4CoVfYbkRdPwU6" alt=""><figcaption></figcaption></figure>

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

{% code overflow="wrap" %}

```html
<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>
```

{% endcode %}

#### 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.

<figure><img src="/files/vOmYXswQMzFojcqEE9ep" alt=""><figcaption></figcaption></figure>

#### Testing

After the above settings, make a [form checkout redirection](/basics/contact-form-7-checkout-redirect.md) submitting and see if the redirection is back on the confirmation page, if everything works, the confirmation page will be like bthe elow:

<figure><img src="/files/bHGnTpqMerCkEsgLOuJR" alt=""><figcaption></figcaption></figure>

### 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