# Stripe Credit Card Purchase Popup

## Overview

This popup includes a standard UI for purchasing something with a credit card. A user can add a credit card, remove an existing credit on file, and click a button to confirm purchase. Please ensure that you have installed the **Stripe plugin by Bubble** (Bubble editor > Plugins tab > Add plugins > Add Stripe plugin) to your app before submitting your page request in Canvas Pages.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LhCgSH_MOBG9NEqNoWZ%2F-LhCiWuhfsyb00DIVE3K%2FScreen%20Shot%202019-06-12%20at%202.51.13%20PM.png?alt=media\&token=e115698f-e6bd-4366-880c-ee3995038ea5)

## Set up Stripe

To enable Stripe on your platform:

* Go to [Stripe](https://stripe.com/) and create an account. **You must officially activate the account before using payments in live mode**
* Enable Stripe Connect from the `Connect` tab
  * From the `Settings` tab, add the following redirect URI: `https://bubble.is/poststripeauth`
  * From the same tab, enter your branding details
* Add API keys to Bubble app
  * From the Stripe dashboard, go to `Developers` > `API keys`
  * Grab the **Publishable key** and the **Secret key** from the Standard keys section
  * In your Bubble app editor, go to `Plugins` and find `Stripe`. Add your API keys to Live Publishable Key and Live Secret Key inputs
  * Go back to your Stripe dashboard, from the same API keys section, toggle `View test data`. Grab the Publishable/Secret keys and add them to the same `Stripe` plugin
  * Lastly, return to the Bubble app editor, go to `Plugins` and find `Stripe (for Canvas templates)`. Add your **Live and Development Secret keys** to the Authorization (shared headers) and Authorization (shared headers) - dev. Inputs. Your values should follow this format: `Bearer sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx`
* Add client IDs to Bubble app
  * From your Stripe dashboard, go to `Settings` > `Connect Settings`
  * Grab the **Live mode client ID** as well as the **Test mode client ID** (by toggling `Viewing test data`in the top right corner) 
  * Go back to the `Stripe` plugin in your Bubble app and add both these IDs
* From the `Stripe` plugin, update the Stripe Checkout Image and Name with your own branding

## Structure

The popup includes the following:

* A title
* A multiline text for more information
* `Button CHANGE` to add a credit card
* `Button Remove` to remove a saved credit card
* `Button CONFIRM` MY SUBSCRIPTION to confirm purchase

## How to set up

* Update the title, button, and multiline text copy
* Add a workflow on the page to trigger show `Popup purchasePopup`

## Testing

When checking out with Stripe you can use 4242 4242 4242 4242 as the number, any future expiration date, and 123 as the security code.