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.

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:

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