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

![](/files/-LhCiWuhfsyb00DIVE3K)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas-pages-and-modules/master-1/popups/stripe-credit-card-purchase-popup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.