💰

Payment with Stripe

☝

Requirement: - A Stripe account - Olé or Bravissimo account in Bravo

Add a custom checkout page to your app with our Stripe integration.

With a set of Stripe-specific Bravo Tags, you can turn form input fields into checkout fields that are automatically connected to your Stripe account.

Stripe handles identity verification to meet Know Your Customer (KYC) and compliance requirements.

image

Related docs:

🏗 How to set up Stripe payment

  1. In your Bravo app project, access Settings > Stripe > Connect with stripe
  2. image

2. Once connected, we'll focus on the UI needed in the app. There are 2 required elements:

  1. Credit card input field: this field gathers the credit card data. [component:input-stripe-credit-card] (text box)
  2. Checkout action element: this element triggers the payment action [action:stripe-checkout] (any layer type)

image

Checkout with set price

If you want to set the payment amount, you need to specify amount and currency.

This data needs to be included in the form, there are two ways to add it.

  1. Add these two "hidden fields". These tags support data binding, so you can choose to connect API data to override the amount (10) and currency (eur) values. [component:input-hidden:10][stripe:amount] [component:input-hidden:eur][stripe:currency]
  2. Add the amount and currency value into the checkout action tag. (Data binding is currently not supported for this tag.)
  3. [action:stripe-checkout:10:eur]

image

Checkout where the app user sets the price

If you want to allow the end app user to set the amount they pay (ex: a donation), you can add a visible input text field for the amount or the currency.

  1. Amount input field: this field gathers the amount to be paid.
  2. [stripe:amount][component:input-number]

  3. Currency input field: this field gathers the currency type.
  4. [stripe:currency][component:input-text]

💡

You don't need to have both input fields in the form, you can specify either one in the checkout action tag. Ex: If you just have a visible amount input field, then include the currency in the checkout tag like this: [action:stripe-checkout::eur] Make sure you have a double colon :: in the tag if the amount is not included.

In this example, we allow the user to input the amount, and we specify the currency in the checkout button.
In this example, we allow the user to input the amount, and we specify the currency in the checkout button.

Extra information fields

It's recommended to add extra fields that will serve as context for each payment and add information about the customer.

These will be saved in the payment detail page.

  1. Customer name: [stripe:customer:name]
  2. Customer email: [stripe:customer:email]
  3. Customer phone: [stripe:customer:phone]
  4. Payment description: [stripe:description]
  5. Any other information: [stripe:metadata:<whatevername>]
  6. This will be saved under the Metadata section in the payment detail page in Stripe. The value you put in <whatevername> will appear as the label for this information.

    Ex: this metadata tag is set as

⚠️

If you want the app user to input the information themselves, you need to add an input field tag with these information tags. Ex: [component:input-text][stripe:customer:name]

image

Checkout response actions

After you have added the checkout action tag to the UI, you can configure the response actions. The response action is what happens after the user triggers the checkout action, in the case it succeeds or fails.

  1. In Bravo Studio, go to your project and select the app page to open data binding mode.
  2. Locate the layer with the checkout action tag. It will have a data icon next to it.
  3. Click on the layer to open the element binding panel, there you can configure the response action for on success and on error.
💡

If you don't set up any response action, these are the default responses: - On success: a pop-up dialog that says "Payment success" - On error: No response

image

💡

Options for Response Actions: - Show Alert: Display a pop-up message. - Go To Page: Redirects user to another page in the app. - Open URL: Opens the web browser on the phone with the specified URL. - Refresh: Refreshes the current page

image

After you have completed these three steps:

  1. Connect your Stripe account to Bravo.
  2. Add the Bravo Tags to your checkout page.
  3. Configure the response actions after the checkout action.

The checkout page is complete! Your app users can now use the checkout page in your app to make payments to your Stripe account.

💎 Resources

1️⃣ Sample Figma file

1️⃣ Sample Adobe XD file

Bravo Sample - Stripe payment.xd1010.8KB

1️⃣ Creating an e-commerce app

🛒
Sell physical products with Bravo and Stripe

That's it! 🥳