# 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](https://app.gitbook.com/s/aRJpOy0U8IpbjUfcox4D/get-started/quickstart-customize-storefront-with-ecwid-js-api).

### 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](https://app.gitbook.com/s/G9n5VxMY9T0Ob3D56PSD/rest-api/checkout-extra-fields)