# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cf7-docs.payaddons.com/basics/confirmation-page-pro.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.