# Credit Card Form (Pro) {% 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. ``` Your name [text* your-name autocomplete:name] Your email [email* your-email autocomplete:email] Event [select* event "running|10" "walking|20" "swimming|30"] tickets [number ticket min:1 max:99 "1"] Card information [stripe_credit_card my-card] [submit "Submit"] ``` ### Checkout Configuration After inserting the credit card field, we now can set up the pricing under **Stripe Checkout Form** tab.

Preview & Testing