# Stripe

> Learn how to configure the Stripe component, build a shopping cart, and run a reliable checkout flow in PandaSuite.

https://docs.pandasuite.com/essentials/components/stripe/

**The Stripe component lets you run web payments in PandaSuite with Stripe Checkout.**

> **Note**
>
> The Stripe component requires a Stripe account - you can [create an account
> for free](https://dashboard.stripe.com/register/).

## Insert and configure Stripe

Click **Components** and add the **Stripe** component.

In the **Properties** panel, enter:

- **Publishable key**
- **Secret key**

You can find both keys in your [Stripe dashboard](https://dashboard.stripe.com/).

[Image: Stripe component properties in PandaSuite Studio, with the Publishable key and Secret key fields filled in with test keys]

[Image: API keys page of the Stripe dashboard in test mode, showing the Publishable key and the hidden Secret key to copy into PandaSuite]

Then click **Get the products** to import your Stripe prices into the component.

Your products and prices must be created in Stripe first (in the Stripe Dashboard) before you can import them here.

> **Info**
>
> For security reasons, save your project at least once before retrieving
> products, and save again each time you update API keys.

[Image: Stripe component editor: the Save button of the toolbar and Get the products are framed, above the imported Artic Fox product at €250.00]

## Component characteristics

### Actions

Use **Interact with a component** on **Stripe** to access:

- **Purchase**: Opens Stripe Checkout with the current cart
- **Set product**: Sets quantity for one price ID
- **Increment product**: Adds quantity to one price ID
- **Decrement product**: Removes quantity from one price ID
- **Remove all products**: Clears all quantities in the cart
- **Open customer portal**: Opens Stripe Customer Portal for an existing customer ID

### Triggers

Select **Stripe** and open the **Interactivity** panel to use:

- **Payment complete**
- **Payment canceled**
- **Payment failed**

Use these triggers to show confirmation states, error messages, and post-payment navigation.

### Exposed properties

After loading products and running payments, the component exposes:

- `prices` (products/prices with selected quantities)
- `customer` (available after a successful payment)

## Build the cart before **Purchase**

> **Warning**
>
> **Purchase requires a non-empty cart.** In the component flow, checkout is
> built from products where quantity is greater than `0`. If no product is set,
> checkout cannot be created.

To build a valid cart:

1. Use **Set product** (or **Increment product**) with a Stripe **Price ID**
2. Keep quantity above `0`
3. Trigger **Purchase**

[Image: Buy button with a single tap/click that runs Set product (price ID, quantity 1) then Purchase on the Stripe component]

This action opens Stripe Checkout so users can enter payment information securely.

[Image: Stripe Checkout page on a smartphone for Artic Fox at €250.00, with the email, card information and name on card fields]

## Handle transaction outcomes

Use Stripe triggers to manage UX:

- **Payment complete**: unlock content, show success message, store customer ID
- **Payment canceled**: return to cart or show retry CTA
- **Payment failed**: display an error and keep the cart editable

For advanced business logic (stock update, CRM/email, external automation), use [Stripe webhooks](https://stripe.com/docs/billing/subscriptions/webhooks).

## Use the customer portal

After **Payment complete**, reuse `customer.id` with **Open customer portal** to let users manage subscriptions directly in Stripe.

[Image: Open Portal button in the payment success pop-up, running Open customer portal with the customer ID bound to the id data]

## Display Stripe data in your interface

You can display products and customer data dynamically in PandaSuite using data binding and collections.

[Image: App on a smartphone listing Stripe products with their quantity, Artic Fox (1) and Persian Cat (0), above Buy and Reset buttons]

Setup example:

[Image: Collection / List component whose Source is bound to the prices property of the Stripe component, an array of 2 products]

Need a refresher on bindings? See [Data binding](https://docs.pandasuite.com/essentials/data/data-binding/).