Feature configuration
Special checkout features (such as a guest checkout or address book) can be easily on and off using the following parameters (in the features
object). Some features cannot only be enabled or disabled but also take additional configuration. The code snippets listed within the feature explanation tabs below represent the default values.
Breadcrumbs
Object Key: breadcrumbs
When this feature is enabled, breadcrumbs will be visible at the top of the checkout that indicate which step the user is on.
Available Properties
enabled
:boolean
{
"breadcrumbs": {
"enabled": true
}
}
Customer Number Sign-in
Object Key: customerNumberSignIn
Enable or disable the ability to sign in with the customer number and birth date. This feature requires additional backend implementation to function properly.
Available Properties
enabled
:boolean
- This feature also includes the use of Field Validation to extend its functionality.
{
"customerNumberSignIn": {
"enabled": false,
"maxLength": 8,
"format": "^\\d+$"
}
}
Password Visibility Toggle
Object Key: passwordVisibilityToggle
Enable or disable the eye icon in the password fields to display the password in clear text.
Available Properties
enabled
:boolean
{
"passwordVisibilityToggle": {
"enabled": true
}
}
Second Email Field
Object Key: secondEmailField
Enable or disable a second email field for customers to enter to help prevent typos and ensure the desired email address is the one they are registering with.
Available Properties
enabled
:boolean
{
"secondEmailField": {
"enabled": false
}
}
Third Party Sign-in
Object Key: thirdPartySignIn
Enable or disable third party sign-in services as well as configure the provider options.
Available Properties
enabled
:boolean
disableFirstPartySignIn
:boolean
- Enable or disable the default authentication.
providers
:array
- Configure the providers (
[{ "key": "facebook","color": "#3377f2" }]
). In Crowdin you can use e.g. the keyauth.continueWithFacebook
for a localized message.
- Configure the providers (
{
"thirdPartySignIn": {
"enabled": false,
"disableFirstPartySignIn": false,
"providers": []
}
}
Guest Checkout
Object Key: guestCheckout
Enable or disable the option to use a guest checkout.
Available Properties
enabled
:boolean
{
"guestCheckout": {
"enabled": false
}
}
Full Country Names
Object Key: fullCountryNames
Enable or disable the option to show the full country names in the country dropdown of the address form instead of just the country code.
Available Properties
enabled
:boolean
{
"fullCountryNames": {
"enabled": false
}
}
Not Specified
Object Key: notSpecifiedGender
Enable or disable the ability to select a neutral gender / Not Specified option.
Available Properties
enabled
:boolean
{
"notSpecifiedGender": {
"enabled": false
}
}
Diverse Gender
Object Key: neutralGender
Enable or disable the ability to select a neutral gender / Not Specified option.
Available Properties
enabled
:boolean
{
"neutralGender": {
"enabled": false
}
}
Address Book
Object Key: addressBook
Enable or disable the ability show the address book on the shipping and billing address forms.
Available Properties
enabled
:boolean
{
"addressBook": {
"enabled": false
}
}
Voucher
Object Key: vouchers
Enable the ablity to show a voucher section within the payment step, as well as modify some of its other behavior.
Available Properties
enabled
:boolean
disableInitialVoucherNotification
:boolean
- Disable the initial voucher notification for pre-applied vouchers.
- This feature also includes the use of Field Validation to extend its functionality.
{
"vouchers": {
"enabled": false,
"maxLength": 10,
"disableInitialVoucherNotification": false
}
}
Gift Card
Object Key: giftCards
Enable the ablity to show a gift card section within the payment step, as well as modify some of its other behavior such as if it utilizes a PIN.
Available Properties
enabled
:boolean
- This feature also includes the use of Field Validation to extend its functionality.
pin
:Object
enabled
:boolean
- This feature also includes the use of Field Validation to extend its functionality.
{
"giftCards": {
"enabled": false,
"maxLength": 10,
"pin": {
"enabled": false,
"maxLength": 5
}
}
}
Sentry
Object Key: sentry
Enable or disable the utilization of sentry for frontend error logging. When this is disabled, we will have no access to monitor frontend performance and would recommend this be done independently.
Available Properties
enabled
:boolean
{
"sentry": {
"enabled": true
}
}
Add Deep Link Rewrites
Object Key: appDeepLinkRewrites
This feature is for internal use and enables or disables deep link rewrites in the app environment.
Available Properties
enabled
:boolean
{
"appDeepLinkRewrites": {
"enabled": true
}
}
Lowest Prior Price
Object Key: lowestPriorPrice
Enable or disable the display of the lowest prior price legend.
Available Properties
enabled
:boolean
{
"lowestPriorPrice": {
"enabled": false
}
}
Shipping Cost Tool Tip
Object Key: shippingCostToolTip
Enable or disable the shipping cost tool tip on the shipping line item in the basket.
Available Properties
enabled
:boolean
{
"shippingCostToolTip": {
"enabled": false
}
}
Duties and Taxes
Object Key: dutiesAndTaxes
Enable or disable showing the duties and taxes in the basket summary section.
Available Properties
enabled
:boolean
{
"dutiesAndTaxes": {
"enabled": false
}
}
Loyalty Program
Object Key: loyaltyProgram
Enable or disable the loyalty program in the payment step, as well as define a more advanced configuration.
Available Properties
enabled
:boolean
disableRemoval
:boolean
- Allow or disallow users to remove their loyalty program card once it is saved
type
:string
(e.g."payback"
, other types provided by SCAYLE)icon
enabled
:boolean
formatOnBlur
: Loyalty program field substitution on blurinput
:string
(group-capture regex string, e.g."^(308342)?(\\d{10})$"
)output
:string
(group-replace/substitute regex string, e.g."308342$2"
)
registration
:enabled
:boolean
- Allow customers to register for the loyalty program during the checkout process
disableForGuest
:boolean
- Hide the loyalty program registration for guest customers
redeemablePoints
enabled
:boolean
- Let customers redeem loyalty program points
{
"loyaltyProgram": {
"enabled": false,
"disableRemoval": false,
"minLength": 10,
"maxLength": 16,
"type": "payback",
"icon": { "enabled": false },
"redeemablePoints": { "enabled": false },
"registration": { "enabled": false, "disableForGuest": false }
}
}