docs
  1. SCAYLE Resource Center
  2. Developer Guides
  3. Checkout
  4. Customization
  5. Configure JSON
  6. Feature configuration

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 key auth.continueWithFacebook for a localized message.

{
    "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 blur
    • input: 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 }
    }
}