Stripe form data API call structure

Hi there.

Is anyone able to assist in showing me how to send multiple items to a Stripe checkout session? I have it working with a single item but I don’t know how to handle that there will be a dynamic number of items in each basket.

I haven’t worked with the form data stuff that much but I’m assuming I need to create an array in the workflow but how do I send that given the need to have the [0] for the first item, [1] for the second etc?

1 Like

Hi. You’ll want to create a loop ideally.

Backend workflows: Create an API workflow, and then at the end of that workflow, “Schedule an API workflow” (the same exact one you just added the workflow to). It will allow you to use “Schedule API workflow on a List” in which you would do that with your list of orders/items.

Sorry, I’m not quite following how that would help in this case. I get the logic of the loop but won’t that just create 10 checkout sessions each with a unique id. I need to send it in a single payload don’t I?

So according to their docs, I’m not sure you’re using the right parameter.

It looks like items[0][price], items[0][quantity], and so-fourth.

Each item being a subscription, and quantity self-explanitory.

I’m not trying to do a subscription though. I was following the “create session” section here - https://docs.stripe.com/api/checkout/sessions/create?shell=true&api=true&resource=checkout%20sessions&action=create

image001.png

Same structure as follows.

Each consecutive item you add 1 with the first item always starting with 0 (as the initial index).
line_items[0][price]=price_1MotwRLkdIwHu7ixYcPLm5uZ
line_items[0][quantity]=2
line_items[1][price]=price_1MotwRLkdIwHe23D1dszzs133
line_items[1][quantity]=1

Ok so I’m following that but I guess my question is that when setting up the API to initialize it, say I create those 4 fields to send as part of the URL encoded call as Stripe doesn’t accept json body.

If the next customer has 3 items how to I create the new field “line_items[3]” to be able to send the third product? Apologies If I’m being super simple here - appreciate the help!

Ah. So get rid of everything except “success_url”, and “mode” in your parameters. Your “client_reference_id” should also be a shared and hidden header.

In your BODY:

{
  line_items: [
    {
      price: 'price_1MotwRLkdIwHu7ixYcPLm5uZ',
      quantity: 2,
    },
  ]
}

Now this is the basic structure non-dynamic, right? So, we’ll add the props:

{
  line_items: [
   <items>
  ]
}

Now it will need the same structure as the object above, separated by commas. Each item after will count as the next item. Make sure your objects are separated by commas.

Your “items” parameter should look like this:

{
  price: 'price_1MotwRLkdIwHu7ixYcPLm5uZ',
  quantity: 2
},
{
  price: 'price_1M433999439Lm5uZ',
  quantity: 1
},
{
  price: 'price_3LkdIw441PLm5uZ',
  quantity: 1
}

Thanks for sticking with me…

So I’ve set it up like this:

But I get the following error:

My understanding was you couldn’t use the json body section with the urlencoded type, but assuming I’m wrong there?

Change your content-type to “application/json”

Uncheck querystring on both as well. Try that out.

EDIT: Sorry I didn’t notice and scan for all that earlier, I should have re-read what you needed before jumping the gun on a response so quickly.

ALSO: Most of your calls will be application/json so ideally you just make that a shared header as well or it’ll be on each of your calls.


All good - appreciate your help. So Stripe docs and the bubble api connector throw an error when I do this.

type or paste code here

Let’s try this as your items:

[{"price":"price_1MotwRLkdIwHu7ixYcPLm5uZ","quantity":2},{"price":"price_1M433999439Lm5uZ","quantity":1},{"price":"price_3LkdIw441PLm5uZ","quantity":1}]

Use that array of objects, and your modified body:

{
  line_items: <items>
}

What is did was take the 3 items, and “JSON Minified” them to a single line. Then I wrapped them inside an array bracket “[ … ]”.

So that didn’t work either - I get an error saying it has to be the form-urlencoded Content-Type. I think I just need to know how to do an array inside the line_items “Key” section but not sure if that’s possible!

Yeah, I usually make my own plugin for this reason (I use Node.js as my go to for these scenarios).

Do none of the plugins work for your particular use-case?

This is what I’m referring to, you can easily build that structure if you used the node.js capabilities Bubble has to offer.

In particular, the “server.js” example provided:

It’s not specific for your use-case, but if you used node.js (a server-side action) via a plugin, you could use this:

const stripe = require('stripe')('

sk_test_51LAgcgEDF3575igK56ppk7HT6R3R6mxVVvr9AtcZqICyP5rJgmZimRG1r4kJ0hDxTgwffRxxCwwxbSsqCD9ZjyoS00xUTAfPfK');
const session = await stripe.checkout.sessions.create({
  success_url: 'https://example.com/success',
  line_items: [
    {
      price: 'price_1MotwRLkdIwHu7ixYcPLm5uZ',
      quantity: 2,
    },
  ],
  mode: 'payment',
});

With line items, success_url, and mode being dynamic properties you provide.

If you want I can guide you over this process to make everything custom for your use-case. Shoot me a DM and we can go over it.

@Jici is the API Connector wizard around here.

1 Like

This is the plugin you need: JSON Serialize to URL query Plugin | Bubble

Take a json and serialize it to URL that work with Stripe (and other API with similar request)

@Thimo didn’t make a new test page actually. But if we use the @GH5T example, the result will be:
line_items[0][price]=price_1MotwRLkdIwHu7ixYcPLm5uZ&line_items[0][quantity]=2&line_items[1][price]=price_1M433999439Lm5uZ&line_items[1][quantity]=1&line_items[2][price]=price_3LkdIw441PLm5uZ&line_items[2][quantity]=1

From json

{"line_items": [{"price":"price_1MotwRLkdIwHu7ixYcPLm5uZ","quantity":2},{"price":"price_1M433999439Lm5uZ","quantity":1},{"price":"price_3LkdIw441PLm5uZ","quantity":1}]}

It’s very complex with just plain Bubble action. But not impossible (mostly because actually, there’s no “index” of the current item for a list in Bubble function)

2 Likes

BTW, the reason why you got the error for Cannot parsed as JSON, is because you have missing double quotes around line_items. This is a Bubble error and not API response error (I think it’s a new feature…) However, from what I know, Stripe doesn’t accept json content-type

Yeah, I’m just seeing that now (always used node in my use-cases).

Knew I was missing something! :slight_smile:

1 Like

Thanks this is great. Just to check - so my thoughts are to have a payment button which:

  • Gets the list of products and formats the Json
  • Use the plugin to serialize it
  • Make the API call with that serialized

However, how do you setup a form-url encoded API call that allows me to pass that dynamic list into it? From what I can see, if I add a Parameter called “line_items” then have the serialised text it’s not going to work is it?

gets the list of pro

If I remember, you have two options
in url with ?[payload]
or with raw data body where you set
_*_payload_*_

Hey Alastair,

I encountered the same problem as you at the beginning. I manage to initialize the call and receive the data. But only in the API Connector.

My initialize call is correct, I have the data displayed.
key : line_items
value : line_items[0][price]=price_1Q16iIBG8gDoGKFTHszpB2SN&line_items[0][quantity]=2&line_items[1][price]=price_1Q16ioBG8gDoGKFTt6kpNWO3&line_items[1][quantity]=10&

As soon as I want to make the call in a workflow, it throws me this error.

image

image

Looks like the “querystring” isn’t working.
Do you have an idea of what I’m doing wrong ?

Thanks in advance,
Simon