How to trigger the native stripe payment screen?

How do you trigger the native payment screen from stripe?

Can you do this from the stripe plugin provided by bubble or do you have to use @copilot stripe.js?

@copilot’s plugin does not trigger the native Stripe payment screen. (It requires placing the invisible stripe.js element on the page). However, Bubble’s Stripe integration does utilize the native payments screen.

Regardless, I recommend that you use exclusively Bubble’s or exclusively @copilot’s in any given application. (Ie. no hybrid use).

1 Like

Hey @mgray,

Stripe’s implementation structure is made up of two things:

  • Tokenization deals with converting sensitive information into a transportable, secure token. To be truly useful, you’ll likely exchange the generated token for a card token which Stripe stores in their PCI-compliant database.

  • API stands for application programming interface, and it allows applications to interact with Stripe’s slew of products and services. The Stripe API is what you’ll integrate into your application in order to make charges to cards, issue payments to sellers, create subscriptions for customers and more.

In order to make implementation easier, Stripe offers their Checkout library with tokenization built-in so applications can get payment experiences integrated quickly into their websites and applications. For some applications, however, using Stripe’s heavily-branded, pre-built experience isn’t a desirable option. Applications with more strict design and brand requirements may prefer to construct their own checkout experiences.

Bringing all of the above into the context of Bubble, you have three main options:

  • The Stripe plugin by Bubble offers Bubblers the same convenience of easily integrating Stripe by way of their Checkout experience. Bubble has also made it easy for users without knowledge of Stripe’s architecture to implement Stripe, with Bubble constructing and handling the necessary API calls.

  • The Stripe.js plugin brings the power of tokenization without the baggage of Checkout, so you can craft your own payment experience plus bank accounts and identity documents. The vast majority of Stripe’s available API calls come right out of the box as well. You’ll need the knowledge of Stripe’s architecture, but you’ll gain exposure to even more customizations for your use cases.

  • The API Connector allows you to construct the necessary API calls to interact with Stripe, though you’ll need to be aware of how API requests are structured and handled. You won’t be able to tokenize any information, but this serves as a great supplementary option.

If you need more fine-grained control over your payment flow and are willing to learn how Stripe works, try Stripe.js. For most users, a quick implementation with a simple checkout experience is all that’s required which is where Bubble’s Stripe plugin delivers. If you need even more customizations, supplement the API Connector as you see fit. There’s many resources like Stripe’s highly-regarded API documentation, our own course and the Bubble Forum to build your foundational knowledge! :slight_smile:

Thanks for stepping in @dan1


Thanks @dan1 how do you trigger it with bubbles plugin?


Thanks for the thorough explanation. It all makes sense now.

I need a simple subscription payment and I don’t mind stripes native checkout. Do you know how to trigger this in the plugin offered by bubble?

I actually found it in another thread. Thanks for your input though. It helped clarify things.

1 Like

@mgray Could you please link me to that thread? :slight_smile: