# Add tips selection to the checkout

You can add a configurable block with tip selections for customers at the end of 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 tips block with the code

Start easily with the code example below:

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

			ec.order.extraFields.tips = {
				'type': 'toggleButtonGroup',
				'options': [
					{
						'title': 'No tip',
					},
					{
						'title': '5%',
						'surcharge': 5
					},
					{
						'title': '10%',
						'surcharge': 10
					}
				],
				'surchargeType': 'PERCENT',
				'surchargeShortName': {
					'name': 'Tip',
					'showSurchargePercentValue': true,
					'nameTranslated': {
						'en': 'Tip',
						'nl': 'Tip'
					}
				},
				'showZeroSurchargeInTotal': false,
				'required': true,
				'checkoutDisplaySection': 'payment_details'
			};

			window.Ecwid && Ecwid.refreshConfig();
		}
	});
});
```

This example adds a required extra field where customers must choose one of the tip options specified in the code (0%, 5%, 10%). By default, the last option is chosen when the extra field is required (`'required': true`).

For customers, it will look like this:

<figure><img src="https://2472323273-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpZxwtrnfjGn9RK75zT5A%2Fuploads%2FINJZFCsEkwn0HAGjtyOe%2Fextrafield_tips.png?alt=media&#x26;token=959cf5b1-504b-4038-b6b2-c5553d3b85f2" alt=""><figcaption></figcaption></figure>

You can specify your tip values by changing numbers and adding/removing objects in the `options` array.

### See also

Full documentation on setting up extra fields with tips selection:

[Checkout extra fields](https://app.gitbook.com/s/G9n5VxMY9T0Ob3D56PSD/rest-api/checkout-extra-fields)