Stripe API - bubble.io toolset (API connector, ad-hoc CC payment

[rowntreerob]

prototype - setup POC on card payment dialog using stripe api and bubble api connector. POC mimics customer interaction for restaurant visit by cust with phone , where ... on viewing QR menu, selection of list of items for purchase , card purchase using default Stripe API protocols can close out restaurant-visitor interaction -> view menu items, select list of items for my meal, submit order for purchase and for credit card interaction on phone. Here, stripe controls paymnt page , controls card protocol. Then at end stripe returns to bubble apps, confirmed page.

Step 1 review stripe docs noting the parm list includes refs to other property/class types you will need to know how to create using stripe dev dashboard . In left tab, see products, prices. Using the dashboard or using curl , create product, create price saving the ids of both as these values ( ids ) will be required by Stripe api below. You can review the docs on stripe/session/create using POST. before moving on, note the url property at the very end of the sample response from call to ...sessions/create.

Step 2 open a term window and using curl, exec the stripe api post making sure to substitute ids from step 1 into the line items price parm value. in upper right corner of the pages for Stripe Api ref docs. When the response comes back, scroll to bottom of the json and get the url property value at the very end. Plug that url into your browser location to bring up the stripe pay dialog for the card.

Step 3 use card 42424242.... and any future exp. date fill in the req'd info and submit the payment ( all on dev ) . Use the stripe dashboard to verify the payment went through. At this point, using the Curl CLI , a test payment has been completed. In the next section, Bubble's API Connector is used to translate/ recode the steps from terminal session / Curl above. Now the curl call will be redone within a running , bubble test app utilizing api protocols exposed by the bubble connector.

Step 4 back to bubble editor. Install the API Connector in plugins tab if not installed. click to open a new api call and fill out the fields as seen here On completing the form , remember to click initialize which runs a test POST action over to stripe domain before parsing , presenting the json response. with that done, the action is ready to incorporate in workflows/ actions in the bubble app.

Most of the setup for this 1-time call (api-connector.initialize) makes sense with one big exception which is a need to translate from the Curl parm list to a jumbled workaround expression used as a string in the json body property near the end of the connection form.

  -d success_url="https://example.com/success" \
  -d cancel_url="https://example.com/cancel" \
  -d "payment_method_types[0]"=card \
  -d "line_items[0][price]"=price_1JNiGbIbp0VPMoWV5LF82m6l \
  -d "line_items[0][quantity]"=2 \
  -d mode=payment

for workaround, create a hybrid expression querystring of K-V pairs as a translation json value of the above ... success_url=https://example.com/success&cancel_url=https://example.com/cancel&payment_method_types[0]=card&line_items[0][price]=price_1JNiGbIbp0VPMoWV5LF82m6l&line_items[0][quantity]=2&mode=payment

and put that string in the json body field of the api config as show in the picture above.

Step 5 back in the designer tool, define the workflow actions and 2 collaborating flow steps that do the follow: 1 call the api (stripe session create) getting the response and finding url prop value in the response 2 open a new page on the external url from above and that will be on stripe's site to capture the payment

[PeterGrabec]

Great tutorial, thanks again @rowntreerob!