> 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/contact-form-7-credit-card.md).

# Credit Card Form (Pro)

{% hint style="info" %}
In this sample, the Professional plan is required.
{% endhint %}

<div align="left"><figure><img src="/files/JlkyzWprEzN5apf124B3" alt=""><figcaption></figcaption></figure></div>

Navigate to Contact From -> Add New, we should see two parts:&#x20;

* Stripe Credit Card Field
* Stripe Checkout Form tab

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

### Build your Form with Credit Card Field

In the form editor, click the <mark style="color:red;">**Stripe Credit Card**</mark> button. Give a name and insert this field. Here we can see the shortcode **stripe\_credit\_card** is generated into the form.

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

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

<label> Event
    [select* event "running|10" "walking|20" "swimming|30"] </label>

<label> tickets
    [number ticket min:1 max:99 "1"] </label>

<label> Card information
    [stripe_credit_card my-card] </label>

[submit "Submit"]
```

### Checkout Configuration

After inserting the credit card field, we now can set up the pricing under **Stripe Checkout Form** tab.

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

Preview & Testing

<figure><img src="/files/7668IjEldFpzM2U70cbU" alt=""><figcaption></figcaption></figure>