# 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.&#x20;
* **Collect Card Details:** Creates a new customer in Stripe and saves their credit card details.&#x20;
* **Subscription:** Creates a customer, a subscription, and begins the subscription (with an optional trial period).&#x20;

{% content-ref url="how-to-set-up-stripe/one-time-payments" %}
[one-time-payments](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/how-to-set-up-stripe/one-time-payments)
{% endcontent-ref %}

{% content-ref url="how-to-set-up-stripe/collect-card-details" %}
[collect-card-details](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/how-to-set-up-stripe/collect-card-details)
{% endcontent-ref %}

{% content-ref url="how-to-set-up-stripe/subscription" %}
[subscription](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/how-to-set-up-stripe/subscription)
{% endcontent-ref %}

## General Steps for the Three Cases

### Step 1: Get your Keys

* Go to [Stripe](https://stripe.com/) 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](https://stripe.com/docs/keys) 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/">\\](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

{% hint style="success" %}
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\\

{% endhint %}

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

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FykbkPmEtOMsmlWjzbB5Z%2Fimage%20\(93\).png?alt=media\&token=927e70cf-a1c6-4041-a8e8-ce8438a257a5)

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

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2Fo2z4EpXuGVa2fWT4ZHUk%2Fimage%20\(94\).png?alt=media\&token=68421500-e442-4643-b520-dc3486e7b2fc)

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

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2Fh3rj9ohFvT0FAmPVZeHW%2Fimage.png?alt=media\&token=b19fe914-3fd9-4fe8-851f-281149f7bccb)

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