Stripe payments Workflow (any change if using Connect-API?)

Question

I have a question that I believe will be easy to answer for anybody who's currently using the Stripe API.

I have a page with 20 different items on and I'm using Stripe connect. Instead of having to create a form for each product item, does Stripe accept some sort of onClick event where if a Buy Now button is clicked it will just trigger the Stripe payment box (response handler)?

Last thing, I presume Stripe.js payments are exactly the same for Stripe connect, you create a token pass it to the back-end and I can put the author's Stripe user_id into the back-end code and pay that user?

On the documentation for Stripe.js payments, the example code is focused on a form, which I find not to be very helpful for any business that sells more than 1 product per page, and since I'm using Stripe Connect I would have thought Stripe would have accommodated for this in the documentation more.

Any help is greatly appreciated.

Updated question: Do I have to use a form for every product just to activate a Stripe payment popup?

Answer 1

A payment flow with Stripe (regardless of whether you're using Connect or not) is divided in two steps:

1. Client-side, in your frontend code, you collect and tokenize the customer's payment information using Elements or Checkout . You then send the resulting token to your backend.

2. Server-side, in your backend code, you use the token in API request, eg to create a charge .

When using Connect, only the second step changes. You can read more about the various ways to create charges with Connect here: https://stripe.com/docs/connect/charges .

If you're using Checkout to collect your customers' payment information, keep in mind that the amount and currency that are passed to Checkout are used for display purposes only. If you're selling multiple products with varying prices, you can use Checkout's custom integration to dynamically provide the amount to Checkout using Javascript.