๐Ÿ’ณ
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).

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:
1
One Time Payments:
2
PaymentIntents: Write
3
Customers: Write
4
5
Collect Card Details:
6
Customers: Write
7
SetupIntent: Write
8
9
Subscription:
10
PaymentIntents: Write
11
Customers: Write
12
Credit notes: Read
13
Subscriptions: Write
14
SetupIntent: Write
15
โ€‹
Copied!
  • 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:
1
function output(userData, context) {
2
setTimeout(() => window.location = "https://example-url.com", 1000)
3
}
Copied!

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!