> For the complete documentation index, see [llms.txt](https://docs.ecwid.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ecwid.com/guides/payments/customize-payments/collect-additional-information-before-payment.md).

# Collect additional information before payment

If you need some additional information about the customer or order, you can collect it by adding a required extra field to the first or second checkout step through a JavaScript file assigned to the app.

Learn more:

[Set up self-hosted JS file](/storefronts/get-started/storefront-customization-options.md)

[Checkout extra fields](/api-reference/rest-api/checkout-extra-fields/add-checkout-extra-fields-with-javascript.md)

### Collect info at the checkout

Get started with a base script that adds an extra field at the checkout start. Collected information will be added to the payment request coming to your app’s `paymentUrl`.

Storefront JS code:

```javascript
//  write a function that adds an extra field
var CheckoutExtraFieldAdd = function () {
   window.ec = window.ec || {};
   ec.order = ec.order || {};
   ec.order.extraFields = ec.order.extraFields || {};

   //  define extra field name and its settings
   ec.order.extraFields.ef_for_payment = {  //  the “ef_for_payment” part is the Extra Field ID
      'title': 'Account ID in bonus payment program',  //  text displayed above the input field
      'textPlaceholder': 'ID00001',  //  text placeholder displayed inside input box
      'type': 'text',
      'tip': 'We will add bonuses to your account after the payment',  //  additional text displayed below the input field
      'required': true,
      'checkoutDisplaySection': 'cart'  //  must be `cart` to display extra field at first chectout step
   };

   window.Ecwid && Ecwid.refreshConfig();
}

// call function on the page load
Ecwid.OnAPILoaded.add(function () {
   Ecwid.OnPageLoaded.add(function (page) {
      if (page.type == "CART") {
         CheckoutExtraFieldAdd();  //  must be `cart` to load extra field at first chectout step
      }
   });
});
```

### Receive info in payment request

You can use any of the `extraFields` or `orderExtraFields` objects for collecting extra fields data. The latter offers more details about extra field storefront settings, but they both contain extra field ID (specified in JS file) and value filled in by a customer.

Extra field details in decoded payment request JSON:

<pre class="language-json"><code class="lang-json"><strong>{
</strong><strong>    ...,
</strong><strong>    "extraFields": {
</strong>    "ef_for_payment": "ID123456"
    },
    "orderExtraFields": [
        {
            "customerInputType": "TEXT",
            "title": "Account ID in bonus payment program",
            "id": "ef_for_payment",
            "value": "ID123456",
            "orderDetailsDisplaySection": "",
            "orderBy": "0"
        }
    ],
    ...
}
</code></pre>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ecwid.com/guides/payments/customize-payments/collect-additional-information-before-payment.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.