[Bug]: Unable to send dynamic "application/x-www-form-urlencoded" request body with REST API query

[FractalMind]

Is there an existing issue for this?

• I have searched the existing issues

Description

I am trying to integrate Stripe REST API with Appsmith 2.1 to create a Quote using the /v1/quotes endpoint.

Stripe requires the request body to be sent as:

Content-Type: application/x-www-form-urlencoded

with nested parameters using bracket notation:

customer=cus_xxx
line_items[0][price]=price_xxx
line_items[0][quantity]=1

The request works correctly when I manually configure the Form URL Encoded fields inside the Appsmith REST API query editor.

However, I cannot dynamically generate the request body from a JavaScript object.

Example dynamic payload:

{
  customer: "cus_UrSInvlqDVfVdz",
  "line_items[0][price]": "price_1TtWzu7M0ZqS39f7MOhzp9Kv",
  "line_items[0][quantity]": 1
}

When using the Form URL Encoded body editor manually, Stripe receives the request correctly and creates the quote.

However, when trying to pass a dynamic body using:

{{ this.params.payload }}

or using a Raw body with:

{{ this.params.body }}

Appsmith does not send the body content.

The Appsmith request log shows:

{
  "headers": {
    "Content-Type": [
      "application/x-www-form-urlencoded"
    ]
  },
  "body": ""
}

The same encoded payload works when entered manually in the Form URL Encoded editor:

customer=cus_UrSInvlqDVfVdz&line_items[0][price]=price_1TtWzu7M0ZqS39f7MOhzp9Kv&line_items[0][quantity]=1

This seems to be a limitation with dynamically generating application/x-www-form-urlencoded bodies in Appsmith 2.1.

I need a way to dynamically generate form-urlencoded fields because Stripe uses indexed parameters like:

line_items[0][price]
line_items[1][price]
line_items[2][price]

and the number of line items is dynamic.

Steps To Reproduce

## Steps To Reproduce

1. Create a REST API query in Appsmith 2.1.

2. Configure the query:

   - Method: `POST`
   - URL:

https://api.stripe.com/v1/quotes

- Header:

Content-Type: application/x-www-form-urlencoded

3. Configure the body as `Form URL Encoded`.

4. Add the following fields manually:

| Key | Value |
|---|---|
| customer | cus_UrSInvlqDVfVdz |
| line_items[0][price] | price_1TtWzu7M0ZqS39f7MOhzp9Kv |
| line_items[0][quantity] | 1 |

5. Execute the query.

Result:

The Stripe API successfully creates the quote.

6. Create a JSObject that generates the payload dynamically:

```javascript
export default {
createPayload() {
 return {
   customer: "cus_UrSInvlqDVfVdz",
   "line_items[0][price]": "price_1TtWzu7M0ZqS39f7MOhzp9Kv",
   "line_items[0][quantity]": 1
 };
}
}

7. Call the query dynamically:

Stripe_CreateQuote.run({
  payload: StripeService.createPayload()
});

8. Try to use the dynamic payload in the query body:

{{ this.params.payload }}

9. Execute the query.

   Result:

   The request body is not sent correctly.

10. Try using the Raw body type instead:

    Body:

{{ this.params.body }}

Pass:

Stripe_CreateQuote.run({
  body: "customer=cus_UrSInvlqDVfVdz&line_items[0][price]=price_1TtWzu7M0ZqS39f7MOhzp9Kv&line_items[0][quantity]=1"
});

11. Execute the query.

    Result:

    The Appsmith request log shows an empty body:

{
  "body": ""
}

Stripe receives no parameters and creates an empty quote.

12. Expected behavior:

The dynamic payload should be sent exactly like the manually configured Form URL Encoded fields:

customer=cus_UrSInvlqDVfVdz&line_items[0][price]=price_1TtWzu7M0ZqS39f7MOhzp9Kv&line_items[0][quantity]=1

Public Sample App

No response

Environment

Production

Severity

Critical (Broken Production apps)

Issue video log

No response

Version

Self-hosted v2.1

[linear-code]

APP-15698

[FractalMind]

If I may make a suggestion, allowing us to inject the body directly into the page with a parameter like {{ this.params.mybody }} would solve the problem entirely.

Right now, the header and body are much more constrained than they need to be. If I choose the Raw option, I expect to have complete control over both the header and the body, without those restrictions.

No need to hold our hand everywhere

[tomjose92]

@FractalMind , so javascript allows you to use the spread syntax for these cases.

For passing a dynamic payload, instead of sending {{ this.params.payload }}, you need to send it like below
{{
{
...this.params.payload
}
}}

This will ensure that it gets dynamically translated as
{
customer: "cus_UrSInvlqDVfVdz",
"line_items[0][price]": "price_1TtWzu7M0ZqS39f7MOhzp9Kv",
"line_items[0][quantity]": 1
}
and sent as part of the body

Let me know if this helps