💳How to Set Up Stripe

How to Set up Stripe for your Flow

There are three different ways in which we could use Stripe:

• One time Payments: Creates a payment intent and immediately fulfills it using the Credit Card Details entered.

• Collect Card Details: Creates a new customer in Stripe and saves their credit card details.

• Subscription: Creates a customer, a subscription, and begins the subscription (with an optional trial period).

💰One Time Payments💸Collect Card Details🤑Subscription

General Steps for the Three Cases

Step 1: Get your Keys

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

• Select the necessary Scopes according to each case:

One Time Payments:
    PaymentIntents: Write 
    Customers: Write
    
Collect Card Details:
    Customers: Write
    SetupIntent: Write
    
Subscription:
    PaymentIntents: Write
    Customers: Write
    Credit notes: Read
    Subscriptions: 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

• Copy your Publishable Key into the component's Option Panel

• Set the Billing Info variables with the according keys

• In each case, configuration of the component will vary a little bit

Step 3: Install Stripe in 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

Testing

You'll be in test mode on the builder, on the standalone, and on the live flow if you add ?savvy_test=true at the end of the URL. For those cases, stripe will use savvy's test id keys. All you have to do is enter the test card credential: 4242424242...etc

Redirect to an URL on Payment Complete

Step 1: Create the Data Output

• Go to the Data Tab on the Left Sidebar

• Create a new Data Output

• Select Custom on the dropdown of the Options Tab

• Check the Manual Trigger box so you can select where to trigger it

Step 2: Add the Redirect Code

• We need a setTimeout() in case there are other processes that need to finish before redirecting

• Copy and paste this code but change the URL to the one you want to redirect to:

function output(userData, context) {
  setTimeout(() => window.location = "https://example-url.com", 1000)
}

Step 3: Trigger it!

• Select the Stripe Component

• Go to the Triggers Tab on the Right Sidebar

• Select your Data Output on the "Outputs to Trigger" input field:

• That's it, now enjoy redirecting new customers!