JavaScript SDK

Spark JS

spark-js
﻿
Type Aliases
Spark
Text
type Spark = {
  options: SparkLayerOptions;
  platform: Platform;
  switchImpersonatingCustomer: Promise<null | UserData>;
  getProduct: (parentProductId) => Promise<Product>;
  getVariant: (parentProductId, variantSku) => Promise<ProductVariant>;
  getPriceForProduct: (parentProductId) => Promise<SimplifiedProductPrice>;
  calculatePricingForVariantData: (variant, qty, qtyAcrossVariants?) => CalculatePricingForVariantDataResult;
  isLoggedIn: () => Promise<boolean>;
  updateCart: Promise<null | object>;
  externalClearBasket: Promise<void>;
  getPackSizeForVariant: Promise<number>;
  getRrpPriceForVariant: Promise<{
     rrp: number | null;
     currencyCode: string;
    }>;
  getPricingForVariant: Promise<{
     price: number | null;
     rrp: number | null;
     priceBreaks: VariantPriceBreak[];
     currencyCode: string;
    }>;
  calculatePricingForVariant: Promise<CalculatePricingForVariantDataResult>;
  getCart: Promise<null | Cart>;
  uploadFile: Promise<string>;
  fetch: (query, variables?, useImpersonatingCustomer?, bypassAppProxy?) => Promise<Response>;
};
type Spark = {
  options: SparkLayerOptions;
  platform: Platform;
  switchImpersonatingCustomer: Promise<null | UserData>;
  getProduct: (parentProductId) => Promise<Product>;
  getVariant: (parentProductId, variantSku) => Promise<ProductVariant>;
  getPriceForProduct: (parentProductId) => Promise<SimplifiedProductPrice>;
  calculatePricingForVariantData: (variant, qty, qtyAcrossVariants?) => CalculatePricingForVariantDataResult;
  isLoggedIn: () => Promise<boolean>;
  updateCart: Promise<null | object>;
  externalClearBasket: Promise<void>;
  getPackSizeForVariant: Promise<number>;
  getRrpPriceForVariant: Promise<{
     rrp: number | null;
     currencyCode: string;
    }>;
  getPricingForVariant: Promise<{
     price: number | null;
     rrp: number | null;
     priceBreaks: VariantPriceBreak[];
     currencyCode: string;
    }>;
  calculatePricingForVariant: Promise<CalculatePricingForVariantDataResult>;
  getCart: Promise<null | Cart>;
  uploadFile: Promise<string>;
  fetch: (query, variables?, useImpersonatingCustomer?, bypassAppProxy?) => Promise<Response>;
};
﻿
Type declaration
Name
Type
Description
   options
﻿SparkLayerOptions﻿﻿
-
   platform
Platform
-
   switchImpersonatingCustomer()
Promise<null | UserData>
Switch impersonating customer or end impersonation with null
   getProduct
(parentProductId) => Promise<Product>
Fetch the graphql product object for a given parent product id Throws If product not found or error occurred fetching product
   getVariant
(parentProductId, variantSku) => Promise<ProductVariant>
Fetch the graphql variant object for a given parent product id and variant sku Throws If product/variant not found or error occurred fetching product
   getPriceForProduct
(parentProductId) => Promise<SimplifiedProductPrice>
Fetch the pricing for a parent product includes price breaks, lowest price and the number of prices (used to note if from is needed to be shown) Throws If product not found or error occurred fetching product
   calculatePricingForVariantData
(variant, qty, qtyAcrossVariants?) => CalculatePricingForVariantDataResult
-
   isLoggedIn
() => Promise<boolean>
Check if user is logged in
   updateCart()
Promise<null | object>
Run an update cart mutation, shows appropriate toasts and returns result Throws Error If request fails
   externalClearBasket()
Promise<void>
Call SparkLayer to clear the basket, designed to be used on the thanks page
   getPackSizeForVariant()
Promise<number>
Fetch the pack size for a variant given parent product id and variant sku Throws If product/variant not found or error occurred fetching product
   getRrpPriceForVariant()
Promise<{ rrp: number | null; currencyCode: string; }>
Fetch the RRP price for a variant given parent product id and variant sku Throws If product/variant not found or error occurred fetching product
   getPricingForVariant()
Promise<{ price: number | null; rrp: number | null; priceBreaks: VariantPriceBreak[]; currencyCode: string; }>
Fetch the pricing for a variant given parent product id and variant sku Throws If product/variant not found or error occurred fetching product
   calculatePricingForVariant()
Promise<CalculatePricingForVariantDataResult>
Given a product id, sku and quantity, return the price for the product Throws If product/variant not found or error occurred fetching product
   getCart()
Promise<null | Cart>
Fetch the cart from GraphQL
   uploadFile()
Promise<string>
-
   fetch
(query, variables?, useImpersonatingCustomer?, bypassAppProxy?) => Promise<Response>
Run a GraphQL query (with the user authenticated)
﻿
SparkLayerOptions
Text
type SparkLayerOptions = {
  sparkDomain: "app.sparklayer.io" | "test.app.sparklayer.io";
  platform: "base" | "bigcommerce" | "shopify" | "wix";
  siteId: string;
  rootUrl: string;
  accountRedirect: {
     urlRegex: RegExp;
     goTo: string;
    };
  cartRedirect: {
     urlRegex: RegExp;
     goTo: string;
    };
  accountButtonSelectors: string;
  logoutButtonSelectors: string;
  cartButtonSelectors: string;
  loginButtonSelectors: string;
  display: DisplayOptions;
  termsAndConditionsLink: string;
  language: string;
  locale: null | string;
  translations: object;
  showTranslations: boolean;
  checkoutCustomElements: CustomCheckoutElementConfig[];
  paymentMethodsOrder: PaymentMethodName[];
  productLink: string;
  customAccountDetails: {
     title: string;
     value: string | number;
     displayText: string;
     type: CustomAccountDetailLinkType;
    }[];
  onCheckoutValidation: Promise<
     | null
     | {
     message: string;
    }[]>;
  onCartUpdate: Promise<void>;
  onCartLoad: Promise<void>;
  preCartUpdateListener: Partial<UpdateCart>;
  shopify: {
     useAppProxy: boolean;
    };
  onReady: Promise<void>;
  onLoad: Promise<void>;
  onLogout: Promise<void>;
  bigcommerce: {
     appClientId: string;
    };
  auth: {
     user: string;
     token: string;
    };
  authLogoutUri: string | null;
  analytics: AnalyticsOptions;
};
type SparkLayerOptions = {
  sparkDomain: "app.sparklayer.io" | "test.app.sparklayer.io";
  platform: "base" | "bigcommerce" | "shopify" | "wix";
  siteId: string;
  rootUrl: string;
  accountRedirect: {
     urlRegex: RegExp;
     goTo: string;
    };
  cartRedirect: {
     urlRegex: RegExp;
     goTo: string;
    };
  accountButtonSelectors: string;
  logoutButtonSelectors: string;
  cartButtonSelectors: string;
  loginButtonSelectors: string;
  display: DisplayOptions;
  termsAndConditionsLink: string;
  language: string;
  locale: null | string;
  translations: object;
  showTranslations: boolean;
  checkoutCustomElements: CustomCheckoutElementConfig[];
  paymentMethodsOrder: PaymentMethodName[];
  productLink: string;
  customAccountDetails: {
     title: string;
     value: string | number;
     displayText: string;
     type: CustomAccountDetailLinkType;
    }[];
  onCheckoutValidation: Promise<
     | null
     | {
     message: string;
    }[]>;
  onCartUpdate: Promise<void>;
  onCartLoad: Promise<void>;
  preCartUpdateListener: Partial<UpdateCart>;
  shopify: {
     useAppProxy: boolean;
    };
  onReady: Promise<void>;
  onLoad: Promise<void>;
  onLogout: Promise<void>;
  bigcommerce: {
     appClientId: string;
    };
  auth: {
     user: string;
     token: string;
    };
  authLogoutUri: string | null;
  analytics: AnalyticsOptions;
};
﻿
Type declaration
Name
Type
Description
   sparkDomain
"app.sparklayer.io" | "test.app.sparklayer.io"
The domain of the SparkLayer API (defaults to app.sparklayer.io)
   platform
"base" | "bigcommerce" | "shopify" | "wix"
Sets the default options for the platform
   siteId
string
The client specific site id
   rootUrl
string
The root URL used to pre-fix any created URLs - generally used for i18n
   accountRedirect
{ urlRegex: RegExp; goTo: string; }
Use SparkLayer auth
accountRedirect.urlRegex?
RegExp
-
accountRedirect.goTo?
string
-
   cartRedirect
{ urlRegex: RegExp; goTo: string; }
-
cartRedirect.urlRegex?
RegExp
-
cartRedirect.goTo?
string
-
   accountButtonSelectors
string
The selectors for the account button (defaults to [href="/account"], [data-spark-link=account])
   logoutButtonSelectors
string
The selectors for the logout button (defaults to [href="/account/logout"], [data-spark-link=logout])
   cartButtonSelectors
string
The selectors for the cart button (defaults to [href="/cart"], [data-spark-link=cart])
   loginButtonSelectors
string
The selectors for the login button (defaults to [href="/spark-b2b-login"], [data-spark-link=login])
   display
﻿DisplayOptions﻿﻿
The display options for the SparkLayer
   termsAndConditionsLink
string
Terms and conditions link (defaults to /terms-and-conditions)
   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
   translations
object
Override internal translations, keyed by language code
   showTranslations
boolean
Useful to debug translations, shows the translation key
   checkoutCustomElements
CustomCheckoutElementConfig[]
A list of custom elements to display in checkout
   paymentMethodsOrder
PaymentMethodName[]
The order of payment methods
   productLink
string
-
   customAccountDetails
{ title: string; value: string | number; displayText: string; type: CustomAccountDetailLinkType﻿; }[]
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.
   onCheckoutValidation()
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.
   onCartUpdate()
Promise<void>
A function called when the cart is updated, can be used to trigger analytics
   onCartLoad()
Promise<void>
A function called when the cart is loaded, can be used to trigger analytics
   preCartUpdateListener()
Partial<UpdateCart>
A function called before the cart is updated, can be used to modify the products before completing checkout.
   shopify?
{ useAppProxy: boolean; }
-
shopify.useAppProxy?
boolean
-
   onReady()?
Promise<void>
-
   onLoad()?
Promise<void>
-
   onLogout()?
Promise<void>
-
   bigcommerce?
{ appClientId: string; }
-
bigcommerce.appClientId?
string
-
   auth
{ user: string; token: string; }
-
auth.user?
string
-
auth.token?
string
-
   authLogoutUri
string | null
-
   analytics?
AnalyticsOptions
-
﻿
DisplayOptions
Text
type DisplayOptions = {
  orderListShowShippingAddress: boolean;
  customerReferenceHidden: boolean;
  customerReferenceRequired: boolean;
  customerReferenceMaxLength: number;
  darkTheme: boolean;
  savingsUseRrp: boolean;
  roundPriceBreakPercentages: boolean;
  showPriceBreakSavings: boolean;
  sectionConfiguration: DisplaySectionConfiguration;
  showSlots: string[];
  showRrpToggle: boolean;
  hideFinancials: boolean;
};
type DisplayOptions = {
  orderListShowShippingAddress: boolean;
  customerReferenceHidden: boolean;
  customerReferenceRequired: boolean;
  customerReferenceMaxLength: number;
  darkTheme: boolean;
  savingsUseRrp: boolean;
  roundPriceBreakPercentages: boolean;
  showPriceBreakSavings: boolean;
  sectionConfiguration: DisplaySectionConfiguration;
  showSlots: string[];
  showRrpToggle: boolean;
  hideFinancials: boolean;
};
﻿
Type declaration
Name
Type
   orderListShowShippingAddress
boolean
   customerReferenceHidden
boolean
   customerReferenceRequired
boolean
   customerReferenceMaxLength
number
   darkTheme
boolean
   savingsUseRrp
boolean
   roundPriceBreakPercentages
boolean
   showPriceBreakSavings
boolean
   sectionConfiguration
﻿DisplaySectionConfiguration﻿﻿
   showSlots
string[]
   showRrpToggle
boolean
   hideFinancials?
boolean
﻿
DisplaySectionConfiguration
Text
type DisplaySectionConfiguration = {
  my-account: {
     order: string[];
     hide: string[];
    };
};
type DisplaySectionConfiguration = {
  my-account: {
     order: string[];
     hide: string[];
    };
};
﻿
Type declaration
Name
Type
   my-account?
{ order: string[]; hide: string[]; }
my-account.order?
string[]
my-account.hide?
string[]
﻿
CustomAccountDetailLinkType
Text
type CustomAccountDetailLinkType = "email" | "phone" | "sms" | "website";
type CustomAccountDetailLinkType = "email" | "phone" | "sms" | "website";
﻿
﻿

Name	Type	Description
options	SparkLayerOptions	-
platform	Platform	-
switchImpersonatingCustomer()	Promise<null \| UserData>	Switch impersonating customer or end impersonation with null
getProduct	(parentProductId) => Promise<Product>	Fetch the graphql product object for a given parent product id Throws If product not found or error occurred fetching product
getVariant	(parentProductId, variantSku) => Promise<ProductVariant>	Fetch the graphql variant object for a given parent product id and variant sku Throws If product/variant not found or error occurred fetching product
getPriceForProduct	(parentProductId) => Promise<SimplifiedProductPrice>	Fetch the pricing for a parent product includes price breaks, lowest price and the number of prices (used to note if from is needed to be shown) Throws If product not found or error occurred fetching product
calculatePricingForVariantData	(variant, qty, qtyAcrossVariants?) => CalculatePricingForVariantDataResult	-
isLoggedIn	() => Promise<boolean>	Check if user is logged in
updateCart()	Promise<null \| object>	Run an update cart mutation, shows appropriate toasts and returns result Throws Error If request fails
externalClearBasket()	Promise<void>	Call SparkLayer to clear the basket, designed to be used on the thanks page
getPackSizeForVariant()	Promise<number>	Fetch the pack size for a variant given parent product id and variant sku Throws If product/variant not found or error occurred fetching product
getRrpPriceForVariant()	Promise<{ rrp: number \| null; currencyCode: string; }>	Fetch the RRP price for a variant given parent product id and variant sku Throws If product/variant not found or error occurred fetching product
getPricingForVariant()	Promise<{ price: number \| null; rrp: number \| null; priceBreaks: VariantPriceBreak[]; currencyCode: string; }>	Fetch the pricing for a variant given parent product id and variant sku Throws If product/variant not found or error occurred fetching product
calculatePricingForVariant()	Promise<CalculatePricingForVariantDataResult>	Given a product id, sku and quantity, return the price for the product Throws If product/variant not found or error occurred fetching product
getCart()	Promise<null \| Cart>	Fetch the cart from GraphQL
uploadFile()	Promise<string>	-
fetch	(query, variables?, useImpersonatingCustomer?, bypassAppProxy?) => Promise<Response>	Run a GraphQL query (with the user authenticated)

Name	Type	Description
sparkDomain	"app.sparklayer.io" \| "test.app.sparklayer.io"	The domain of the SparkLayer API (defaults to app.sparklayer.io)
platform	"base" \| "bigcommerce" \| "shopify" \| "wix"	Sets the default options for the platform
siteId	string	The client specific site id
rootUrl	string	The root URL used to pre-fix any created URLs - generally used for i18n
accountRedirect	{ urlRegex: RegExp; goTo: string; }	Use SparkLayer auth
accountRedirect.urlRegex?	RegExp	-
accountRedirect.goTo?	string	-
cartRedirect	{ urlRegex: RegExp; goTo: string; }	-
cartRedirect.urlRegex?	RegExp	-
cartRedirect.goTo?	string	-
accountButtonSelectors	string	The selectors for the account button (defaults to [href="/account"], [data-spark-link=account])
logoutButtonSelectors	string	The selectors for the logout button (defaults to [href="/account/logout"], [data-spark-link=logout])
cartButtonSelectors	string	The selectors for the cart button (defaults to [href="/cart"], [data-spark-link=cart])
loginButtonSelectors	string	The selectors for the login button (defaults to [href="/spark-b2b-login"], [data-spark-link=login])
display	DisplayOptions	The display options for the SparkLayer
termsAndConditionsLink	string	Terms and conditions link (defaults to /terms-and-conditions)
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
translations	object	Override internal translations, keyed by language code
showTranslations	boolean	Useful to debug translations, shows the translation key
checkoutCustomElements	CustomCheckoutElementConfig[]	A list of custom elements to display in checkout
paymentMethodsOrder	PaymentMethodName[]	The order of payment methods
productLink	string	-
customAccountDetails	{ title: string; value: string \| number; displayText: string; type: CustomAccountDetailLinkType; }[]	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.
onCheckoutValidation()	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.
onCartUpdate()	Promise<void>	A function called when the cart is updated, can be used to trigger analytics
onCartLoad()	Promise<void>	A function called when the cart is loaded, can be used to trigger analytics
preCartUpdateListener()	Partial<UpdateCart>	A function called before the cart is updated, can be used to modify the products before completing checkout.
shopify?	{ useAppProxy: boolean; }	-
shopify.useAppProxy?	boolean	-
onReady()?	Promise<void>	-
onLoad()?	Promise<void>	-
onLogout()?	Promise<void>	-
bigcommerce?	{ appClientId: string; }	-
bigcommerce.appClientId?	string	-
auth	{ user: string; token: string; }	-
auth.user?	string	-
auth.token?	string	-
authLogoutUri	string \| null	-
analytics?	AnalyticsOptions	-

Name	Type
orderListShowShippingAddress	boolean
customerReferenceHidden	boolean
customerReferenceRequired	boolean
customerReferenceMaxLength	number
darkTheme	boolean
savingsUseRrp	boolean
roundPriceBreakPercentages	boolean
showPriceBreakSavings	boolean
sectionConfiguration	DisplaySectionConfiguration
showSlots	string[]
showRrpToggle	boolean
hideFinancials?	boolean

Name	Type
my-account?	{ order: string[]; hide: string[]; }
my-account.order?	string[]
my-account.hide?	string[]

Updated 11 Mar 2025

Did this page help you?

Headless

Templates