Spark Options
CustomCheckoutElement: Object
Name | Type | Description |
|---|---|---|
attributes | object | HTML attributes to be applied to the element |
name | string | Name for the element. For fields, this name matches the name of the field on the order |
onChange | (value: string, element: HTMLInputElement) => CustomCheckoutElementOnChangeReturn | Function called when the input changes, can be used to validate the input value |
translations | { [x: string]: TranslationStrings; } | Translations for user-facing text |
CustomCheckoutElementOnChangeReturn: Object
Name | Type | Description |
|---|---|---|
messageTranslationKey | string | The validation message to show if the input value is not valid |
valid | boolean | Whether the input value is valid |
DisplayOptions: Object
Name | Type |
|---|---|
customerReferenceHidden | boolean |
customerReferenceMaxLength | number | boolean |
customerReferenceRequired | boolean |
darkTheme | boolean |
orderListShowShippingAddress | boolean |
roundPriceBreakPercentages | boolean |
savingsUseRrp | boolean |
showPriceBreakSavings | boolean |
stock |
DisplayStockOptions: Object
Name | Type | Description |
|---|---|---|
last | number | false | The count of stock left of a product that would trigger the last stock message. Set to false to disable |
low | number | The count of stock left of a product that would trigger the low stock message |
max | number | The count of stock above which the stock status states this number with a + after. e.g. 50+ |
show | boolean | Determines whether to display the stock status of products. This is necessary if you're using the Spark backend to retrieve stock levels for product cards. |
SparkLayerOptions: Object
Name | Type | Description |
|---|---|---|
accountButtonSelectors | string | The selectors for the account button (defaults to [href="/account"], [data-spark-link=account]) |
auth | { token?: string ; user?: string } | - |
auth.token? | string | - |
auth.user? | string | - |
bigcommerce? | { appClientId?: string } | - |
bigcommerce.appClientId? | string | - |
cartButtonSelectors | string | The selectors for the cart button (defaults to [href="/cart"], [data-spark-link=cart]) |
checkoutCustomElements | A list of custom elements to display in checkout | |
customAccountDetails | { displayText?: string ; title: string ; type?: "phone" | "email" | "website" ; value: string | number }[] | An array of objects containing title, value pairs of data to show on the My Details panel for a customer. Optionally can contain a type field to identify special formatting for values. |
display | The display options for the SparkLayer | |
language | string | The language to use for the SparkLayer (defaults to en) |
locale | null | string | The locale to use for formatting, currently only used for dates (defaults to the user's browser locale) - examples: en-GB, en-US, de-DE |
loginButtonSelectors | string | The selectors for the login button (defaults to [href="/spark-b2b-login"], [data-spark-link=login]) |
logoutButtonSelectors | string | The selectors for the logout button (defaults to [href="/account/logout"], [data-spark-link=logout]) |
paymentMethodsOrder | PaymentMethodName[] | The order of payment methods |
platform | "base" | "bigcommerce" | "shopify" | Sets the default options for the platform |
productLink | string | - |
rootUrl | string | The root URL used to pre-fix any created URLs - generally used for i18n |
shopify? | { useAppProxy?: boolean } | - |
shopify.useAppProxy? | boolean | - |
showTranslations | boolean | Useful to debug translations, shows the translation key |
siteId | string | The client specific site id |
sparkDomain | "app.sparklayer.io" | "test.app.sparklayer.io" | The domain of the SparkLayer API (defaults to app.sparklayer.io) |
termsAndConditionsLink | string | Terms and conditions link (defaults to /terms-and-conditions) |
translations | object | Override internal translations, keyed by language code |
onCartUpdate | (cart: object, results: object) => Promise<void> | A function called when the cart is updated, can be used to trigger analytics |
onCheckoutValidation | (cart: object) => Promise<null | { message: string }[]> | An asynchronous function to validate whether the user is allowed to checkout with their current cart contents. Returns an array of error objects or null if no errors. Note: this function must be asynchronous. |
TranslationStrings: Object
Name | Type | Description |
|---|---|---|
detail | string | Additional detail about the element, such as validation requirements |
title | string | Title of the element. Used as the label for checkboxes |
Private buildOptions(platformDefaultOptions, options): SparkLayerOptions
Name | Type |
|---|---|
platformDefaultOptions | Partial<SparkLayerOptions> |
options |