Add checkout extra fields with JavaScript
Last updated
Was this helpful?
Last updated
Was this helpful?
With JavaScript, you have full control and flexibility over checkout extra fields. For example, you can call extra fields based on certain store/cart conditions or set up a datepicker tuned for your store's working hours and delivery schedule.
To set up checkout extra fields on the storefront and manage their content, you need:
Custom application. You need a private app to be installed in your store. Without the app, it's impossible to ensure that your JS file always loads and executes on the storefront.
Access scope. Your custom app requires the following access scope: customize_storefront
.
Endpoint. The app requires one endpoint: customJsUrl
leading to your JavaScript file. It is required for using the extra fields feature, and additionally grants access to Storefront JS API.
Let's start with a basic text input in the shipping address form at checkout. This would be an optional request for a package sign. If customers type something in that field and place an order, you'll get the field in the extraFields
field in order details. Optionally, you can make the field visible in order details for customers and in Ecwid admin.
Checkout extra fields can be created from any store page with Ecwid
object, for example, from category pages. However, you need to ensure that the function creating extra fields is not called at the checkout, as it can rewrite the customer's input.
Ecwid offers flexible configuration settings for checkout customizations with extra fields. Build a unique UX with different field types, translations, and overrides.
Full description of available config settings for checkout extra fields:
title
string
Title visible at the checkout above the extra field. Also appears in Ecwid admin and customer notifications (if added).
Required
titleTranslated
Available translations for the extra field title.
type
string
Extra field type that defines its functionality.
One of:
text
- Single-line text input. Supports placeholders and pre-defined values (default).
textarea
- Multiple-line text input. Supports placeholders and pre-defined values.
select
- Drop-down list, where customers can choose only one value. Requires options
array.
radio_buttons
- A group of radio buttons, where customers can choose only one value. Requires options
array.
checkbox
- A group of checkboxes, where customers can choose multiple values. Requires options
array.
toggle_button_group
- A group of buttons, where customers can choose only one value. Requires options
array.
datetime
- Customizable date and time picker in the form of a calendar widget on the checkout.
empty
- Non-editable text visible at the checkout and unavailable in customer notifications and Ecwid admin.
Required
checkoutDisplaySection
string
Defines at which checkout step extra field shows to customers.
One of:
email
- First checkout step where customers enter their email and apply discounts.
shipping_address
- Second checkout step where customers enter their shipping address.
pickup_details
- Second checkout step where customers choose when and where they want to pick up an order.
shipping_methods
- Third checkout step where customers choose a shipping method.
pickup_methods
- Third checkout step where customers choose a pickup method.
payment_details
- Final checkout step where customers choose payment method and proceed to the payment.
If not specified, the extra field won't appear at the checkout, allowing you to store hidden order data or apply hidden extra charges to the order.
orderDetailsDisplaySection
string
Defines at which section the extra field shows in customer notifications and Ecwid admin.
One of:
shipping_info
- Shipping/pickup details.
billing_info
- Billing details.
customer_info
- Customer details.
order_comments
- Order comments left by a customer.
hidden
- Extra field is hidden from customer notifications and Ecwid admin.
If not specified, the extra field appears in the order_comments
section.
textPlaceholder
string
Placeholder text for text
and textarea
field types. Does not affect the actual extra field value.
If not specified, the extra field won't have a placeholder.
textPlaceholderTranslated
Available translations for the text placeholder.
value
string
Default value for the extra field. Any changes by customers or your scripts on the storefront override it.
If not specified, the extra field won't have any default value.
valueTranslated
Available translations for the extra field value.
subtitle
string
Subtitle visible under the extra field name at the checkout. If not specified, the extra field won't have a subtitle.
subtitleTranslated
Available translations for the extra field subtitle.
tip
string
Extra field tip for text
and textarea
field types visible inside the input at the checkout.
If not specified, the extra field won't have a tip.
tipTranslated
Available translations for the extra field tip.
available
boolean
Set false
to disable the extra field.
If not specified, the extra field is enabled.
showInInvoice
boolean
Set true
to display the extra field in order tax invoices generated by Ecwid.
If not specified, the extra field will not be displayed in order tax invoices.
showInNotifications
boolean
Set true
to display the extra field in customer emails generated by Ecwid. If true
, requires orderDetailsDisplaySection
.
If not specified, the extra field will not be displayed in order tax invoices.
required
boolean
Set true
, to make the extra field required at the checkout. This way, customers won't be able to continue checkout until they type/select a value in the field.
If not specified, the extra field is not required at the checkout.
showForPaymentMethodIds
array of strings
Make extra field available to only some payment methods by setting a list of payment method IDs.
For example, you can collect additional data only for the specific online payment method by adding it alone to the list: "showForPaymentMethodIds": ["4959-2345934622523"]
.
If not specified, the extra field is not limited by any payment methods.
showForShippingMethodIds
array of strings
Make extra field available to only some shipping methods by setting a list of shipping method IDs.
For example, you can collect additional data only for the store pickup method by adding it alone to the list: "showForShippingMethodIds": ["4959-2345934622523"]
.
If not specified, the extra field is not limited by any shipping methods.
showForCountry
array of strings
Make extra field available only for some countries by setting a list of country codes. Ecwid will automatically check customer's address details to display the field.
For example, "showForCountry": ["BE", "US"]
.
If not specified, the extra field is not limited by the customer's address details.
options
Defines a list of available options for select
, checkbox
, radio_buttons
, andtoggle_button_group
field types.
If not specified, the field type is transformed to text
.
datePickerOptions
Defines settings and conditions for the datepicker at the checkout. For example, limited working hours or disable weekends for the calendar.
Affects only datetime
extra field type.
overrides
Defines overrides for extra fields. This setting allows setting up logic and conditional changes for extra fields on the checkout without actual JavaScript code.
Object with text field translations in the "lang": "text"
format, where the "lang"
is an ISO 639-1 language code. For example:
Translations are available for all active store languages. Only the default language translations are returned if no other translations are provided for the field. Find active store languages with GET
/profile
request > languages
> enabledLanguages
.
The select
, checkbox
, radio_buttons
, andtoggle_button_group
field types allow you to set up a drop-down list, block of radio buttons, checkboxes, or buttons for customers. Use it to ask customers for additional delivery details or to add a "Leave a tip" block to the checkout.
The options
field contains an array of objects, where each option can have the following fields:
title
string
Option name visible at the checkout.
titleTranslated
Available translations for the option name.
subtitle
string
Subtitle visble under the option name at the checkout.
subtitleTranslated
Available translations for the option subtitle.
surcharge
number
Tip/surcharge value added to the order total cost.
surchargeType
string
Defines if a surcharge applies a fixed sum or a percentage increase to the cart total.
One of:
ABSOLUTE
- Adds a fixed sum.
PERCENT
- Adds percentage increase.
surchargeTaxable
boolean
Defines if surcharge/tip is taxable.
showZeroSurchargeInTotal
boolean
Defines if zero-sum surcharge shows in order total breakdown.
Set false
to hide zero-sum surcharges from customers at the checkout.
surchargeShortName
Defines how the surcharge shows in the "Shopping cart" block where the order total is calculated.
name
string
Name of the surcharge for the "Shopping cart" block.
nameTranslated
Available translations for the surcharge short name.
showSurchargePercentValue
boolean
Defines if surcharge percentage value shows next to name
. Default: true
.
Works only with PERCENT
value in surchargeType
.
With extra fields, you can 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
).
You can customize datepicker settings with the datePickerOptions
setting: set up your working hours, limit shipping dates, disable weekdays and holidays, etc.
With overrides
, you can further customize datepicker settings based on the selected shipping/pickup method. For example, set up different schedules for pickup points.
minDate
date
The earliest selectable date. Users can choose dates starting from this minimum date. Use a valid Date object.
maxDate
date
The latest selectable date. Users cannot choose dates beyond this maximum date. Use a valid Date object.
showtime
boolean
Defines if datepicker allows users to select the time. If true
, time selection is enabled.
incrementMinuteBy
number
Increments for datepicker time frames (in minutes). For example, 30
means that customers can only choose from 17:00, 17:30, 18:00...
on the checkout.
limitAvailableHoursWeekly
Set working hours for each day of the week. If this setting is added but some days are missing, Ecwid counts such days as disabled.
disallowDates
Disables specific ranges of date and time. For example, you can make the datepicker required and disable or limit holiday working hours.
Limit working hours by setting daily time ranges when the store is open. You can add several time ranges to one day if you have a lunch hour, for example.
Format: JSON object with one or several weekdays, each having an array of time ranges (also in the array format).
Disable specific dates or date ranges to close the store for holidays, for example.
Format: JSON array with one or several arrays, each having a date or datetime range formatted to the "YYYY-MM-DD HH:MM:SS", "YYYY-MM-DD HH:MM:SS"
string.
conditions
Conditions for the override. When conditions are met, override happens automatically.
fieldsToOverride
Set up the datePickerOptions object with a new logic inside. When conditions are met, it will override defult datepicker behavior.
shippingMethod
string
Selected shipping method name, for example. 'Pickup at North st'
When using checkout extra fields, do not exceed the following limits:
The length of a specific setting in the JavaScript configuration of an extra field must not exceed 255 characters.
The total data size saved as extra fields for one order must not exceed 8Kb.
With the JavaScript code, you can dynamically call checkout extra fields. However, if you need the same extra field to always appear at the checkout, it is easier to set up with REST API once.
Find a list of available methods below.
object
object
object
object
object
array of objects
object
object
object
object
object
object
object
array
object
object
You can add order extra fields to customer notifications manually. The field could be optional (the code will check if it exists in the order), but it must have a title
and orderDetailsDisplaySection
value (any value other than hidden
).
Read more on the .