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.

In this sample, the Professional plan is required.

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.

<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.

Preview & Testing