# Checkout / Additional Fields

When you need to pre-fill checkout form page by email, name, phone or your custom hidden/text fields which you've created on products settings page at product settings (5. Collected customer information then you can pass it as GET params to checkout or payment links

How a pre-filled payment link looks like:

<https://mel.store/jehkinen/165?email=eva.choo%40mel.store&name=Eva%20Choo&phone_number=%2B35796652114&text_0=%40TelegramTips>

You can open and check link above to see how it works

{% hint style="danger" %}
All params for link must be url encoded, please refer to  <https://www.w3schools.com/tags/ref_urlencode.ASP> if you don't know&#x20;
{% endhint %}

{% hint style="info" %}
You can pass additional parameters to the payment link or any custom additional fields, please see example below with hidden fields
{% endhint %}

* **email**
* **name**
* **phone\_number**
* **country**
* **zipcode**
* **promocode**

Additional parameters (for example, **text\_0**, **link\_0**, etc. - they can be taken from the **Product Settings -> 5. Collect customer information**

How to build a valid url with params

> *A "?" must be placed between the product number and the parameters:*&#x20;
>
> <pre><code><a data-footnote-ref href="#user-content-fn-1">https://mel.store/jehkinen/165?email=eva%40mel.store</a>
> </code></pre>

> *An "="  must follow the parameter:*
>
> ```
> https://mel.store/jehkinen/165?email=eva%40mel.store
> ```

> *An "&" must be placed between parameters:*&#x20;
>
> ```
> %2B - To insert a Plus sign (for example, for an international phone number),
> so phone number in our example is +35796652117, country would be autoselected based
> on country code of the phone, for e.g +357 is Cyprus
>
> %20 = equal space character, so name in our example is Eva Choo
> ```

<https://mel.store/jehkinen/165?phone_number=%2B35796652117&name=Eva%20Choo>

### Example of creating and using additional hidden field

For example you would like to pass your own unique order id with each sell and receive it in webhook at `additional_fields`

<figure><img src="https://3534572108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkbSgpG4ocaSynFBlJ9Qt%2Fuploads%2FGPDZczx35TB38uXHsbVW%2Fimage.png?alt=media&#x26;token=a8bb64ae-c629-4de2-abe6-335fa92963e6" alt=""><figcaption><p>Go to Product Settings -> 5. Collect customer information and click <span data-gb-custom-inline data-tag="emoji" data-code="2795">➕</span>Add Field</p></figcaption></figure>

Select the desired type of field to add to the checkout page for your customer. In our example, we selected hidden fields. This field won't be visible to the customer on the checkout page but can be pre-filled via GET parameters in the checkout link.

<figure><img src="https://3534572108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkbSgpG4ocaSynFBlJ9Qt%2Fuploads%2Ffc5ic04wySpofkEUPdVn%2Fimage.png?alt=media&#x26;token=63164d55-4745-44ae-9d98-f7c0f986fc85" alt=""><figcaption><p>After adding a custom hidden field you need to hover over text field with it to see field name, in our example field name is hidden_0</p></figcaption></figure>

&#x20;For example you have a checkout link such as

<https://mel.store/jehkinen/165>

To pre-fill and pass value via GET params you need to add it to your checkout link as in example below:

<https://mel.store/jehkinen/165?hidden_0=136754>

A customer won't see this field in the checkout page, but it will be passed to AfterSell Webhook inside additiona\_fields object

In our example we passed 136754 inside `hidden_0` field and it may be obtained inside payload after each sell, if you was setup After Sell Webhook

<pre><code>"additional_fields": {
        "hidden_0": { // text_0 is field name
            "text": "Order id", // field title
            "type": "hidden", // field type
            <a data-footnote-ref href="#user-content-fn-2">"value": "136754"</a>
        },
        "text_0": { // text_0 is field name
            "text": "Your telegram", // field title
            "type": "text", // field type
            <a data-footnote-ref href="#user-content-fn-3">"value": "@TelegramTips"</a>
        }
    },
</code></pre>

You can add more fields, for example text input for user which will be rendered and collected on the checkout form, hover on it to see the name, in our example name is `text_0`

<figure><img src="https://3534572108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkbSgpG4ocaSynFBlJ9Qt%2Fuploads%2Fbdimzi8gXXcFH8tlMUx5%2Fimage.png?alt=media&#x26;token=5999b57a-8b13-4259-a29a-a9063996a9b1" alt=""><figcaption><p>there are an example of adding two custom additional fields: hidden field and text field</p></figcaption></figure>

<figure><img src="https://3534572108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkbSgpG4ocaSynFBlJ9Qt%2Fuploads%2FWon27qwZfhrz1HB1prnV%2Fimage.png?alt=media&#x26;token=e1722c90-b86e-4093-9e4f-cafd279e03aa" alt=""><figcaption><p>In our example you will see a custom text filed called Your Telegram, you can pre-fill it using GET params or not, then your customer will place a telegram username in this field. You also can force to fill field by customer using required checkbox below to additional field on the product settings page</p></figcaption></figure>

{% hint style="info" %}
If you need to pass more specific metadata as an arbitrary JSON key-value pair to your webhook for a specific customer or group of customers, please see the Payment Links section.&#x20;
{% endhint %}

[^1]: character @ = %40 when url encode

[^2]: The value you've passed via GET params

[^3]: value value you've passed via GET params or customer fill out on checkout
