- createCheckoutButtonInitializer
- createCheckoutService
- createCurrencyService
- createEmbeddedCheckoutMessenger
- createLanguageService
- createStepTracker
- embedCheckout
ΤAddressKey: keyof Address
ΤAnalyticStepType: * "customer" | "shipping" | "billing" | "payment" *
ΤCheckoutIncludeParam: object
ΤConsignmentsRequestBody: ConsignmentCreateRequestBody[]
ΤFormFieldFieldType: * "checkbox" | "date" | "text" | "dropdown" | "radio" | "multiline" *
ΤFormFieldType: * "array" | "date" | "integer" | "string" *
ΤInstrument: CardInstrument
ΤOmit: Pick
<T
, Exclude
<keyof T
, K
>>
ΤOrderPayments: Array
< GatewayOrderPayment | GiftCertificateOrderPayment>
ΤPaymentInstrument: * CardInstrument | AccountInstrument *
▸ createCheckoutButtonInitializer(options?: CheckoutButtonInitializerOptions): CheckoutButtonInitializer
Creates an instance of CheckoutButtonInitializer
.
const initializer = createCheckoutButtonInitializer();
initializer.initializeButton({
methodId: 'braintreepaypal',
braintreepaypal: {
container: '#checkoutButton',
},
});
alpha: Please note that CheckoutButtonInitializer
is currently in an early stage of development. Therefore the API is unstable and not ready for public consumption.
Parameters:
Param | Type | Description |
---|---|---|
Optional options |
CheckoutButtonInitializerOptions | A set of construction options. |
Returns: CheckoutButtonInitializer
an instance of CheckoutButtonInitializer
.
▸ createCheckoutService(options?: CheckoutServiceOptions): CheckoutService
Creates an instance of CheckoutService
.
const service = createCheckoutService();
service.subscribe(state => {
console.log(state);
});
service.loadCheckout();
Parameters:
Param | Type | Description |
---|---|---|
Optional options |
CheckoutServiceOptions | A set of construction options. |
Returns: CheckoutService
an instance of CheckoutService
.
▸ createCurrencyService(config: StoreConfig): CurrencyService
Creates an instance of CurrencyService
.
const { data } = checkoutService.getState();
const config = data.getConfig();
const checkout = data.getCheckout();
const currencyService = createCurrencyService(config);
currencyService.toStoreCurrency(checkout.grandTotal);
currencyService.toCustomerCurrency(checkout.grandTotal);
alpha: Please note that CurrencyService
is currently in an early stage of development. Therefore the API is unstable and not ready for public consumption.
Parameters:
Param | Type | Description |
---|---|---|
config | StoreConfig | The config object containing the currency configuration |
Returns: CurrencyService
an instance of CurrencyService
.
▸ createEmbeddedCheckoutMessenger(options: EmbeddedCheckoutMessengerOptions): EmbeddedCheckoutMessenger
Create an instance of EmbeddedCheckoutMessenger
.
The object is responsible for posting messages to the parent window from the iframe when certain events have occurred. For example, when the checkout form is first loaded, you should notify the parent window about it.
The iframe can only be embedded in domains that are allowed by the store.
const messenger = createEmbeddedCheckoutMessenger({
parentOrigin: 'https://some/website',
});
messenger.postFrameLoaded();
alpha: Please note that this feature is currently in an early stage of development. Therefore the API is unstable and not ready for public consumption.
Parameters:
Param | Type | Description |
---|---|---|
options | EmbeddedCheckoutMessengerOptions | Options for creating `EmbeddedCheckoutMessenger` |
Returns: EmbeddedCheckoutMessenger
- An instance of
EmbeddedCheckoutMessenger
▸ createLanguageService(config?: Partial
<LanguageConfig>): LanguageService
Creates an instance of LanguageService
.
const language = {{{langJson 'optimized_checkout'}}}; // `langJson` is a Handlebars helper provided by BigCommerce's Stencil template engine.
const service = createLanguageService(language);
console.log(service.translate('address.city_label'));
Parameters:
Param | Type | Description |
---|---|---|
Optional config |
Partial <LanguageConfig> |
A configuration object. |
Returns: LanguageService
An instance of LanguageService
.
▸ createStepTracker(checkoutService: CheckoutService, stepTrackerConfig?: StepTrackerConfig): StepTracker
Creates an instance of StepTracker
.
const checkoutService = createCheckoutService();
await checkoutService.loadCheckout();
const stepTracker = createStepTracker(checkoutService);
stepTracker.trackCheckoutStarted();
alpha: Please note that StepTracker
is currently in an early stage of development. Therefore the API is unstable and not ready for public consumption.
Parameters:
Param | Type |
---|---|
checkoutService | CheckoutService |
Optional stepTrackerConfig |
StepTrackerConfig |
Returns: StepTracker
an instance of StepTracker
.
▸ embedCheckout(options: EmbeddedCheckoutOptions): Promise
<EmbeddedCheckout>
Embed the checkout form in an iframe.
Once the iframe is embedded, it will automatically resize according to the size of the checkout form. It will also notify the parent window when certain events have occurred. i.e.: when the form is loaded and ready to be used.
embedCheckout({
url: 'https://checkout/url',
containerId: 'container-id',
});
Parameters:
Param | Type | Description |
---|---|---|
options | EmbeddedCheckoutOptions | Options for embedding the checkout form. |
Returns: Promise
<EmbeddedCheckout>
A promise that resolves to an instance of EmbeddedCheckout
.