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:
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!