💰Stripe: One-time Payment

With our Stripe integration neither App Store, Google Play or Bravo will take commission rates. But note that it must be used for selling physical products or non digital services only. If your are trying to bypass with a digital service, they could reject your app to be published.

Requirements:

• A Stripe account

• Bravo Solo 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.

Related docs:

📝 Form input fields

Stripe payments are not available on Android if you app is targeted for children. Read more in the Android publication guide.

How to set up Stripe payment

1. In your Bravo app project, access Integrations > Stripe > Connect with stripe.

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 and requires postal code. [component:input-stripe-credit-card] (text box). In case you want to hide the postal code option, use [component:input-stripe-credit-card:no-postalcode] instead.

2. Checkout action element: this element triggers the payment action[action:stripe-checkout] (any layer type)

The input will contain all required fields such as card number, expiration date, CVC and postal code.

Example of how the card field looks on the app.

Checkout with set price

There are two ways of setting amount and currency:

Option 1. Using hidden fields.

Use this option if you want to set the amount and/or currency from the backend (binding):

[component:input-hidden][stripe:amount]

[component:input-hidden][stripe:currency]

Alternatively, you can set the values manually. Note that you can have one tag bound with data from backend (ie: amount) and the other with a manual value (ie: currency):

[component:input-hidden:10][stripe:amount]

[component:input-hidden:eur][stripe:currency]

Option 2. Adding values manually to the checkout tag.

Add the amount and currency values manually in the checkout action tag. (Data binding not supported).

[action:stripe-checkout:10:eur]

Donations

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

1. Amount input field:

   [stripe:amount][component:input-number]

2. Currency input field:

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

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 sent to Stripe:

Customer name:

[component-input-hidden][stripe:customer:name]

Customer email:

[component-input-hidden][stripe:customer:email]

Customer phone:

[component-input-hidden][stripe:customer:phone]

Payment description:

[component-input-hidden][stripe:description]

Metadata:

[component-input-hidden][stripe:metadata:<key>]

Fore any other information use this tag (without the <>).

I.e.: this metadata tag is set as [stripe:metadata:comments], and the user has input "Save the forest!"

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

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

Options for Response Actions:

• No action.

• Show Alert: Display a pop-up message.

• Go To Page: Redirects user to another page.

• Go back: Redirects the user to previous page.

• Open URL: Opens the web browser on the phone with the specified URL.

• Refresh: Refreshes the current page.

• Logout: End user's session.

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

About the sandbox environment

Currently it's not possible to test Stripe payments in sandbox mode. You can test the set up on Bravo Vision or Testflight using real cards and make refunds on Stripe.

💎 Resources

https://www.figma.com/community/file/1053371353399448979www.figma.com

984KB

Bravo Sample - Stripe payment.xd.zip

archive

Open

My Store: Sell physical products with Bravo and Stripe

That's it! 🥳