stripe-express doc logo
Launch Stripe Express

Contact Form 7 integration

How to use stripe-express elements in Contact form 7.


Prerequisites

why we need some customized fields for payment?

For all the build-in elements, they are fixed once it is created, including the fields like name, email, phone. However people always want to attach more fields or information along with the payment, no matter if these fields are static or collected by customers.

For example, you have a sport event registration form which includes events detail, athlates information, registration fees, tickets purchase, customer questions and so forth...

What you expect is as long as your customer registered, you can not only collect the registration information but also let customer pay these fees. At the same time, you can even send a customer confirmation email once it's done. Sounds good?

cf7form with stripe express

Why choose Contact Form 7?

Contact Form 7, As top 1 form builder plugin with over 5 million installations, we do like Contact Form 7, not because of popular, but simple, flexible, etc...

Create an CF7 Redirect Element button

This type button will eventually redirect to stripe hosted checkout-page.

Go to stripe-express plugin and choose CF7 Redirect type to create a payment button. cf7form with stripe express

Create CF7 form

After installing the CF7 plugin, there is a default form, so we use it to do our guide. Click the form to edit it.

if you have installed stripe-express plugin, you should see there is an new tag called stripe express element

cf7form with stripe express

Then click the stripe express element tag to insert, a configuration dialog will be shown. The key is we have to select an element which is required, if there is no one list here, then we have to create them first in stripe-express.

In this dialog, there are three fields we can configurate:

  1. Element ID: it's required to select one element created from our stripe-express plugin, if no, please go to previous step to create one.
  2. Amount field(optional): we can specify a field name from the current cf7 fields. If leave it empty, then the payment amount will be same as the value when you create the element button. But if specified, the payment amount will be used this field value(might be from customer typing or a hidden fixed field)
  3. Quantity field(optional): Similar with amount field, the value will used to calculate the total payment amount which is equal to amount * quantity.

don't worry this inserted tag [stripeexpresselement], this will be invisiable for end users and just used to link to our plugin's element button.

You can also manually type tag code instead of click tag to insert.

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

[stripe_express_element elementId:19]
[submit "Submit & Pay"]

Now save it and you are done!

cf7form tag dialog with stripe express ## Test your form In any of your pages or posts, insert your contact form 7 which you just created and you should see below! cf7form preview with stripe express

The validation is coming from contact form 7 self and if you fill all required values, click the pay button, contact form 7 will send your customer an email if you config the email during your creating form. Once the sending success(you can also turn the send email off), your customer will be redirected to the stripe checkout page and this behavior is the same as a standalone one-time button does.

Check the fields information

Three options you can touch these data:

  1. The form fields are sent to your customer with email already.
  2. Contact form 7 recommends to use Flamingo – With Flamingo, you can save submitted messages via contact forms in the database.
  3. Go to stripe dashboard => find the payment => check its metadata

Tips: you can also attach any read-only or hidden fields to help you to track payment like below contactFormId.

cf7-stripe-metadata

Submission flow

Continue to above, All of our widgets support inserting into any form from CF7 as its submission button. When customers submit the form, the CF7 original sending email submission does its own job(you can also turn it off), once its success, the payment workflow will be triggered then. After the payment, you should see these fields information in your payment details's metadata, never miss them.

Payment workflow might be different based on which widget you are using, if one-time payment or alipay, your customer will be redirected to the stripe checkout page. Otherwise, your customer will be always on current page.