# Stripe Payment

*Skill Level: Intermediate*

## Before You Begin

* Ensure you have created a [Stripe](https://stripe.com) account, added your business information and bank account information, and completed any required verification.
* ***Users must be Logged in*** for the Component to work.

## Walkthrough

### Stripe Payment

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-LhM9gMvVPSaGc_StDj9%2F-LhM9ivPaIf8fqGwm3XQ%2FScreenshot%202019-06-14%2013.04.11.png?alt=media\&token=2060c10b-5576-410d-bc52-e91a9b880b0a)

#### To add the Stripe component

1\) Click the "+" button to open the Add Panel

2\) Scroll down to *Installed*

3\) Drag the Stripe Payment component onto your checkout screen

#### To configure the Stripe Payment component

1. Click the "Connect with Stripe" button and follow the prompt to connect your Stripe account to your Adalo account by entering your Stripe Credentials
2. In the Stripe Payment section:&#x20;
   * Enter the amount you want to charge your users.  This can be the same amount for everyone, or you can use Magic Text or a [Custom Formula](https://help.adalo.com/component-basics/inserting-dynamic-text/how-to-create-a-custom-math-formula) to set a variable amount.
3. In the Charge Description section:
   * Enter the text that should appear on your user's credit card statements to explain the change.  You can also use Magic Text here such as "Current Product Name"
4. In the Receipt Email section:
   * You **must** specify the email address of the User that should receive email confirmation of the purchase. This is also how you will identify the customer in your [Stripe Dashboard](https://dashboard.stripe.com/).
5. In the Submit Button section:
   * You can edit the text and styles of the submit button as well as add Actions like linking to the next screen or Custom Action to get the Stripe information and attach it to your User.
6. Test Mode section:
   * Allows you to enter your Stripe Test Secret Key and Test Publishable Key and toggle on/off to test transactions.
   * [Configure Test Mode](https://help.adalo.com/component-basics/marketplace-components/stripe/configuring-stripe-test-mode) to use this feature.

{% hint style="info" %}
Note: Stripe is supported in many countries but not all.  Check out the latest list [here](https://stripe.com/global).
{% endhint %}

#### Payment Failed

1. **Payment Declined**

   1. When a payment is declined, the User will receive the error below.

      ![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F6SUKAm162d78TAcQcQhm%2FScreenshot%202024-11-11%20at%209.58.41%E2%80%AFAM.png?alt=media\&token=8dad6d6c-6364-49e7-8e2f-dd2be27039b4)
   2. This error is caused by an issue with Payment such as incorrect card details or insufficient funds.
   3. The User will remain on the Screen so they can attempt to pay again in the event there is an issue with the Payment Details.
   4. You can log into the [Stripe Dashboard](https://dashboard.stripe.com/test/payments) to see the reason for the error.

2. **Payment Error**
   1. When a payment cannot be completed, the User will receive the error below.

      <div align="left"><figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FmGcyrwFT42PTIGmHxq6I%2FScreenshot%202026-03-05%20at%209.25.48%E2%80%AFAM.png?alt=media&#x26;token=a16ea165-3fe0-4d69-9aa7-842a4bde8702" alt="" width="256"><figcaption></figcaption></figure></div>
   2. This issue is caused by an error with the Component setup such as invalid amount, issue with the Product Settings, incorrect or invalid User Email Address, User is not Logged into app, or Test Mode product used in Live Mode.&#x20;
   3. Please verify setup of the component, validity of the amount, and User Flow before contacting Support.

### Test Mode

1. Toggle on *Test Mode* in component
2. Enter your Stripe Test Secret Key and Test Publishable Key into Payment component.
   * [Stripe | API Keys Documentation](https://stripe.com/docs/keys) can walk you through setting this up in your Stripe Account
3. Open Previewer and complete payment flow as normal.
4. Select appropriate [Stripe | Test Mode Card](https://stripe.com/docs/testing#cards) for the scenario you want to test.&#x20;
5. Enter card info and select 'Pay Now'

### Testing Successful

When you have finished testing your Payment component and want to go Live, you will have to disable the Test mode.

## Help

If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well!


---

# 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://help.adalo.com/component-basics/marketplace-components/stripe/adding-payments-using-stripe.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.
