# Apply hidden surcharges

You can add a hidden surcharge or a fee at the checkout with JavaScript code.

### Connect JS API

To apply the JavaScript code, you need to enable Ecwid JS API on your storefront. To do so, set up a self-hosted JavaScript file running on your server and use the code example below.

Jump into the [Quickstart guide](/storefronts/get-started/quickstart-customize-storefront-with-ecwid-js-api.md).

### Configure the hidden surcharge

With Ecwid JS API enabled, you can use extra fields to apply a hidden surcharge to the order, for example, as an extra processing cost for some shipping methods.

To do so, you need to create an extra field with only 4 attributes and no others:

* **`value`**  with an internal name for the surcharge (customers won't be able to see it).
* **`surchargeShortName`** with `showSurchargePercentValue` set to `false`.
* **`options`** with only one option that has a `surcharge` value.
* **`surchargeType`**  that defines if the surcharge is calculated as a flat value (`absolute`) or percentage from the order total (`percent`).

Code example:

```javascript
Ecwid.OnAPILoaded.add(function () {
	Ecwid.OnPageLoaded.add(function (page) {
		if (page.type == "CART") {
			// Initialize extra fields
			window.ec = window.ec || {};
			ec.order = ec.order || {};
			ec.order.extraFields = ec.order.extraFields || {};

			// Set order surcharge
			//'surcharge' part after the 'ec.order.extraFields.' becomes ID of the extra field
			ec.order.extraFields.surcharge = {
				'value': 'Custom charge',
				"options": [
					{
						"title": "Custom charge",
						"surcharge": 5
					},
				],
				"surchargeShortName": {
					"name": "Surcharge",
					"showSurchargePercentValue": false
				},
				'surchargeType': 'PERCENT'
			}
			window.Ecwid && Ecwid.refreshConfig();
		}
	});
});
```

This example applies a 5% surcharge at the checkout. The surcharge is invisible to the customers but visible to the store owner.

### See also

Full documentation on setting up extra fields with hidden surcharges:

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


---

# Agent Instructions: 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/discounts-and-tips/add-tips-or-surcharges-to-the-store/apply-hidden-surcharges.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.