💸Collect Card Details

Creates a new customer in Stripe and saves their credit card details. Step by step.

Steps for Collecting Card Details

Step 1: Get your Keys

• Go to Stripe and get your Restricted Key and your Publishable Key.

• Set the following scopes:

Customers: Write
SetupIntent: Write

• Be aware that you can be in Test mode or in Live mode (you want to be in Live mode for this to really work)

• Be sure to create a Restricted Key and not a Secret Key.

• You might find this Stripe document Helpful.

Step 2: Go to the builder and set up the Stripe Component

• Create a new Stripe Integration component.

• Set the Action into the component's Option Panel to "Collect Details".

• Copy and paste your Publishable Key.

• Check the "Only collect details" box.

• Set the Billing Info variables with the according keys.

Step 3: Install Stripe on your Website

• Click the Share button on the top bar of the builder

• If you already had the code snippet on your website you'll only need to add the first line that says something like: "<script async src="https://js.stripe.com/v3/"></script>"

• If you didn't have the flow installed, copy the whole block of code on the head of your Site.

Step 4: Send your Restricted Key to us

• Send us a private message with your Restricted Key.

• We'll do the rest.

Common Errors

• Missing required secret key for...

  • The secret key for live mode has not been added to the above environment variable.