# Contact Form 7 Stripe Addon
Build your one-time and recurring payment form together with contact form 7 and Stripe without creating an entire online store.
Contact Form 7 Stripe Payment addons is a payment solution to build your payment page or form with contact form 7. It’s the easiest way to create any one-time or recurring order form, payment form, or subscription event with all kinds payment methods like Credit Cards, PayPal, Google Pay, ApplePay, Afterpay, Affirm, ACH, Klarna, iDEAL, and more.
With stripe payment addons for Contact Form 7, you can create custom payment forms and accept payments directly on your website using Stripe. Whether you're selling products, services, or accepting donations, Payment Addons for Contact Form 7 makes it easy to get paid.
# Download Plugin
Free to download plugin to getting start.
### Install from [wordpress.org](https://wordpress.org/plugins/accept-stripe-for-contact-form-7/) plugin (recommended)
Find the plugin and click Install Now. After the download is complete, click Activate.
* Log in to your WordPress dashboard and click Plugins on the left menu bar.
* Click the Add New button and Enter WooCommerce Stripe Payment in the Search Plugins bar.
* Find the plugin and click Install Now.
### Download Manually
Download it from
# Configuration
General settings for plugin
After you’ve Install and activated the plugin, navigate to Dashboard > **Contact Pay**
Before you start using the plugin, you need to ensure that you have a Stripe account set up. To set up your Stripe API keys after creating your Stripe account, follow this [link](https://stripe.com/docs/keys).
### Try a temporary Stripe API Key?
If you don't have a stripe account yet but still want to evaluate our plugin, you can simply click the **Import** button which will generate a temporary account from us. You can use it for short-term test purposes. However, since this key may limit some features and settings, we would recommend you to use your own key once you finish the evaluation.
### Webhooks
This step is **necessary** to enable Stripe-hosted checkout redirection and email notifications. For detailed instructions, please refer to this page to configure your Webhooks.
{% content-ref url="/pages/OxEXyNGHKRIOXUx3fjZ7" %}
[Webhook Configuration](/getting-started/webhook-configuration)
{% endcontent-ref %}
# Webhook Configuration
Webhooks allow Stripe to send messages back to your WordPress site. Setting up webhooks is required for cf7 email notification, delayed-notification payment methods such as SEPA.
### What is a webhook?
Webhooks allow Stripe to send notifications to your website when certain events occur. For example, if a payment is refunded in Stripe, Stripe can automatically send a notification to your webhook to let your website know.
### How to setup a webhook?
To get the endpoint URL, go back to the **Setting** tab in your WordPress dashboard and you should see a field labeled `Webhook URL`. Copy the URL or click the copy icon.
Paste the endpoint URL into the dialog box in your Stripe dashboard.
1. Open the [Webhooks](https://dashboard.stripe.com/webhooks) tab in Workbench.
2. Click **Create an event destination**.
3. Select the Your account tab.
Add the below events to listener
```
checkout.session.completed
checkout.session.async_payment_succeeded
checkout.session.async_payment_failed
checkout.session.expired
payment_intent.payment_failed
payment_intent.succeeded
payment_intent.amount_capturable_updated
payment_intent.requires_action
invoice.payment_succeeded
invoice.payment_failed
```
### Enable Webhook signatures (Strongly recommended)
Generating a signature for the webhook can greatly protect your endpoint from being abused by external parties.
In your Stripe dashboard, go to the webhook settings and click the `Signing secret` button to generate a signature.
### Webhook Connection Test
First of all, let's do some payments with our plugin under test mode, then go to the webhook URL and find any events such as a payment\_intent.succeeded. Now click the `Resend` button to trigger the event again.
If the response is 200 (OK), our plugin will process the event and display a connected status in the Webhook URL field.
# Form Checkout Redirect
Seamless redirection to Stripe-hosted checkout pages for one-time & subscription payments after submitting your form. Support multi payment methods, one-time, recurring pay, coupon, tax, etc.
Upon enabling this checkout method, the workflow proceeds as follows:
1. When the user submits the form, we initially validate the fields required by the contact form.
2. Next, we redirect to the Stripe-hosted checkout page to complete the transaction.
3. Once the payment succeeds, the form data will be saved and a success message will be sent out.
4. (optional) If you expect to send additional emails with payment details, please refer to [Email Notification (Pro)](/basics/email-notification-pro)
{% hint style="danger" %}
To trigger CF7 email notification after payment, the **webhook** setup is required. [Webhook Configuration](/getting-started/webhook-configuration)
{% endhint %}
### Features
* More custom fields, such as user email, price, frequency, quantity, currency, product, etc.
* More payment methods, like EPS, Giropay, Sofort, iDeal, Alipay, Apple/Google Pay, WeChat.
* Using a secure Stripe-Hosting checkout page that can be customized with your Brand.
* One-Time & Recurring Pay.
* Coupon, Stripe-Tax.
### Let's create a checkout redirect form
#### Installation and Configuration Steps
1. **Install the Plugin:** Ensure our plugin is installed.
2. \*\*Verify Stripe Settings:
### Create your Form
We are going to create a contact form with an amount field and quantity field to checkout.
```
[submit "Purchase"]
```
### Checkout configuration
In the form settings page, an additional tab titled "**Stripe Checkout Redirection**" should be visible. Once enabled, it will redirect the end user to the Stripe after submitting form.
* **Enable**: The form redirection only works if we enable this item.
* **Payment Methods**: Specify the supported payment methods (choose Automatic collect if you want to keep the same as Stripe Dashboard activations)
* **Payment Type:** the **Payment Type** field that consists of three options: **one-time**, **subscription**, and **flex**.
* One-time - For only standalone purchases
* Subscription - For only recurring subscriptions (Pro only)
* Flex - Collects either one-time or subscription based on conditional logic (Pro only)
* **Amount Field:** This option is a dynamic value, we can set a fixed value or a field name such as \[your-amount]
### Subscription **Payment Settings** (Pro)
To enable a subscription, make sure the premium version is installed first. When the Payment Type is chosen as Subscription or the subscription field condition is met under Flex mode, the payment will be considered a subscription. Configure the following settings:
```
[submit "Subscribe"]
```
### Test
After completing the configuration, preview, and test
# Credit Card Form (Pro)
In this tutorial we'll walk you through creating a straightforward payment form with a credit card field. This form is designed to facilitate event registrations, Here's a step-by-step guide.
{% hint style="info" %}
In this sample, the Professional plan is required.
{% endhint %}
Navigate to Contact From -> Add New, we should see two parts:
* Stripe Credit Card Field
* Stripe Checkout Form tab
### Build your Form with Credit Card Field
In the form editor, click the **Stripe Credit Card** button. Give a name and insert this field. Here we can see the shortcode **stripe\_credit\_card** is generated into the form.
```
[submit "Submit"]
```
### Checkout Configuration
After inserting the credit card field, we now can set up the pricing under **Stripe Checkout Form** tab.
Preview & Testing
# Payment Elements Form (Pro)
In this tutorial we'll walk you through creating a straightforward payment form with a payment element field. This form is designed to accept multiple payment methods, Here's a step-by-step guide.
{% hint style="danger" %}
In this sample, the Professional plan is required.
{% endhint %}
Navigate to Contact From -> Add New, we will use two parts:
* Stripe Payment Element Field
* Stripe Checkout Form tab
### Insert Stripe Payment Element Field
In the form editor, click the **Stripe Payment Element** button. Give a name and insert this field. Here we can see the shortcode **stripe\_payment\_element** is generated into the form.
Some examples:
{% code overflow="wrap" %}
```
[stripe_payment_element my-field payment_methods:automatic theme:stripe layout:tabs apple_pay google_pay]
```
{% endcode %}
{% code overflow="wrap" %}
```
[stripe_payment_element my-field payment_methods:card| payment_methods:sofort|google_pay|apple_pay theme:night layout:accordion apple_pay google_pay accordion_radio accordion_spaced]
```
{% endcode %}
#### **Payment Methods**
By default, the stripe checkout page will list all available payment methods in which your stripe account is activated. If you want only to allow some of them, you can choose them here.
#### Theme:
Three themes supported so far: Stripe, Night, Flat
#### Layout
Customize the Payment Element’s layout to fit your checkout flow: Two layouts supported so far: **Tabs**, **Accordion**
#### Default Collapsed
Controls if the Payment Element renders in a collapsed state.
#### Include Radio (Only for Accordion layout)
#### Include Spaces (Only for Accordion layout)
### Checkout Configuration
After inserting this field, we can now set up the pricing under the **Stripe Checkout Form** tab.
### Preview & Testing
# Email Notification (Pro)
How to set up email notifications and customer invoices for your payment.
In contrast to Contact Form 7's built-in email feature, which is only sent after a successful payment and does not include payment details, most site owners prefer to receive notifications during the payment process. This includes alerts for successful or failed payments, as well as the ability to automate tasks based on these notifications.
### Prerequisites
* [x] Plugin Professional Plan
* [x] WP SMTP provider works
* [x] [Webhook Configuration](/getting-started/webhook-configuration)
### Supported Emails
We currently offer notifications for three event types:
* Payment Succeeded
* Payment Failed
* Customer Invoice
These can be enabled/disabled and customized individually to match your site's style. Let us know if any other email notifications would be helpful for your workflow and we'll consider adding them.
{% hint style="info" %}
When specifying recipient(s), you can enter multiple emails separated by commas. For example:
{customer.email},
{% endhint %}
### Supported Merge Fields
The following merge tags can be used to dynamically insert data into the email content:
{% hint style="warning" %}
**Note**: Some fields may be empty depending on the payment type - for example, shipping details may be empty if no shipping is required when collecting payment information
{% endhint %}
```
{site_title}
{site_url}
{header_text}
{amount}
{description}
{currency}
{created}
{amount_currency}
{matedata}
{payment_method.type}
{payment_method.card.brand}
{payment_method.card.last4}
{customer.name}
{customer.email}
{customer.phone}
{customer.address.country}
{customer.address.state}
{customer.address.city}
{customer.address.line1}
{customer.address.line2}
{customer.address.postal_code}
{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}
{shipping_detail.address.country}
{shipping_detail.address.state}
{shipping_detail.address.city}
{shipping_detail.address.line1}
{shipping_detail.address.line2}
{shipping_detail.address.postal_code}
{error.message}
{receipt.url}
{payment_intent_id}
```
### Metadata merge field
Metadata is a powerful feature that allows you to store all the submitted form data, which can be leveraged to populate email templates with field names. This information can also be found in the Stripe Dashboard.
{% hint style="info" %}
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}**
{% endhint %}
# 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:
{% code overflow="wrap" %}
```html
```
{% 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.
#### Testing
After the above settings, make a [form checkout redirection](/basics/contact-form-7-checkout-redirect) 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
