> 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.