Skip to content

Latest commit

 

History

History
791 lines (590 loc) · 32.4 KB

README.md

File metadata and controls

791 lines (590 loc) · 32.4 KB
Raw

@bigcommerce/checkout-sdk

@bigcommerce/checkout-sdk

Index

Enumerations

Classes

Interfaces

Type aliases

Functions

Type aliases

AccountInstrument

Ƭ AccountInstrument: PayPalInstrument | BankInstrument

AddressKey

Ƭ AddressKey: keyof Address

AdyenComponentState

Ƭ AdyenComponentState: CardState | WechatState

AmazonPayV2ButtonInitializeOptions

Ƭ AmazonPayV2ButtonInitializeOptions: AmazonPayV2ButtonParams

The required config to render the AmazonPayV2 buttton.

AnalyticStepType

Ƭ AnalyticStepType: "customer" | "shipping" | "billing" | "payment"

BraintreeFormFieldBlurEventData

Ƭ BraintreeFormFieldBlurEventData: BraintreeFormFieldKeyboardEventData

BraintreeFormFieldEnterEventData

Ƭ BraintreeFormFieldEnterEventData: BraintreeFormFieldKeyboardEventData

BraintreeFormFieldFocusEventData

Ƭ BraintreeFormFieldFocusEventData: BraintreeFormFieldKeyboardEventData

BraintreeFormFieldStyles

Ƭ BraintreeFormFieldStyles: Partial‹Pick‹CSSStyleDeclaration, "color" | "fontFamily" | "fontSize" | "fontWeight"››

CheckoutIncludeParam

Ƭ CheckoutIncludeParam: object

Type declaration:

ComparableCheckout

Ƭ ComparableCheckout: Pick‹Checkout, "outstandingBalance" | "coupons" | "giftCertificates"› & object

ConsignmentsRequestBody

Ƭ ConsignmentsRequestBody: ConsignmentCreateRequestBody[]

CustomerAddressRequestBody

Ƭ CustomerAddressRequestBody: AddressRequestBody

FlashMessageType

Ƭ FlashMessageType: "error" | "info" | "warning" | "success"

FormFieldFieldType

Ƭ FormFieldFieldType: "checkbox" | "date" | "text" | "dropdown" | "password" | "radio" | "multiline"

FormFieldType

Ƭ FormFieldType: "array" | "date" | "integer" | "string"

GuestCredentials

Ƭ GuestCredentials: Partial‹Subscriptions› & object

HostedCreditCardInstrument

Ƭ HostedCreditCardInstrument: Omit‹CreditCardInstrument, "ccExpiry" | "ccName" | "ccNumber" | "ccCvv"›

HostedFieldBlurEventData

Ƭ HostedFieldBlurEventData: HostedInputBlurEvent["payload"]

HostedFieldCardTypeChangeEventData

Ƭ HostedFieldCardTypeChangeEventData: HostedInputCardTypeChangeEvent["payload"]

HostedFieldEnterEventData

Ƭ HostedFieldEnterEventData: HostedInputEnterEvent["payload"]

HostedFieldFocusEventData

Ƭ HostedFieldFocusEventData: HostedInputFocusEvent["payload"]

HostedFieldOptionsMap

Ƭ HostedFieldOptionsMap: HostedCardFieldOptionsMap | HostedStoredCardFieldOptionsMap

HostedFieldStyles

Ƭ HostedFieldStyles: HostedInputStyles

HostedFieldValidateEventData

Ƭ HostedFieldValidateEventData: HostedInputValidateEvent["payload"]

HostedInputStyles

Ƭ HostedInputStyles: Partial‹Pick‹CSSStyleDeclaration, "color" | "fontFamily" | "fontSize" | "fontWeight"››

HostedVaultedInstrument

Ƭ HostedVaultedInstrument: Omit‹VaultedInstrument, "ccNumber" | "ccCvv"›

Instrument

Ƭ Instrument: CardInstrument

Omit

Ƭ Omit: Pick‹T, Exclude‹keyof T, K››

OrderPayments

Ƭ OrderPayments: Array‹GatewayOrderPayment | GiftCertificateOrderPayment›

PaymentInstrument

Ƭ PaymentInstrument: CardInstrument | AccountInstrument

PaypalCommerceFormFieldBlurEventData

Ƭ PaypalCommerceFormFieldBlurEventData: PaypalCommerceFormFieldKeyboardEventData

PaypalCommerceFormFieldEnterEventData

Ƭ PaypalCommerceFormFieldEnterEventData: PaypalCommerceFormFieldKeyboardEventData

PaypalCommerceFormFieldFocusEventData

Ƭ PaypalCommerceFormFieldFocusEventData: PaypalCommerceFormFieldKeyboardEventData

PaypalCommerceFormFieldStyles

Ƭ PaypalCommerceFormFieldStyles: Partial‹Pick‹CSSStyleDeclaration, "color" | "fontFamily" | "fontSize" | "fontWeight"››

PaypalCommerceInitializeOptions

Ƭ PaypalCommerceInitializeOptions: PaypalCommercePaymentInitializeOptions | PaypalCommerceCreditCardPaymentInitializeOptions

A set of options that are required to initialize the PayPal Commerce payment method could be used for PayPal Smart Payment Buttons or PayPal Credit Card methods.

StripeElementOptions

Ƭ StripeElementOptions: CardElementOptions | CardExpiryElementOptions | CardNumberElementOptions | CardCvcElementOptions | IdealElementOptions | IbanElementOptions | ZipCodeElementOptions

Functions

createCheckoutButtonInitializer

▸ createCheckoutButtonInitializer(options?: CheckoutButtonInitializerOptions): CheckoutButtonInitializer

Creates an instance of CheckoutButtonInitializer.

remarks

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:

Name Type Description
options? CheckoutButtonInitializerOptions A set of construction options.

Returns: CheckoutButtonInitializer

an instance of CheckoutButtonInitializer.

createCheckoutService

▸ createCheckoutService(options?: CheckoutServiceOptions): CheckoutService

Creates an instance of CheckoutService.

remarks

const service = createCheckoutService();

service.subscribe(state => {
    console.log(state);
});

service.loadCheckout();

Parameters:

Name Type Description
options? CheckoutServiceOptions A set of construction options.

Returns: CheckoutService

an instance of CheckoutService.

createCurrencyService

▸ createCurrencyService(config: StoreConfig): CurrencyService

Creates an instance of CurrencyService.

remarks

const { data } = checkoutService.getState();
const config = data.getConfig();
const checkout = data.getCheckout();
const currencyService = createCurrencyService(config);

currencyService.toStoreCurrency(checkout.grandTotal);
currencyService.toCustomerCurrency(checkout.grandTotal);

Parameters:

Name Type Description
config StoreConfig The config object containing the currency configuration

Returns: CurrencyService

an instance of CurrencyService.

createEmbeddedCheckoutMessenger

▸ createEmbeddedCheckoutMessenger(options: EmbeddedCheckoutMessengerOptions): EmbeddedCheckoutMessenger

Create an instance of EmbeddedCheckoutMessenger.

remarks 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:

Name Type Description
options EmbeddedCheckoutMessengerOptions Options for creating EmbeddedCheckoutMessenger

Returns: EmbeddedCheckoutMessenger

  • An instance of EmbeddedCheckoutMessenger

createLanguageService

▸ createLanguageService(config?: Partial‹LanguageConfig›): LanguageService

Creates an instance of LanguageService.

remarks

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:

Name Type Description
config? Partial‹LanguageConfig› A configuration object.

Returns: LanguageService

An instance of LanguageService.

createStepTracker

▸ createStepTracker(checkoutService: CheckoutService, stepTrackerConfig?: StepTrackerConfig): StepTracker

Creates an instance of StepTracker.

remarks

const checkoutService = createCheckoutService();
await checkoutService.loadCheckout();
const stepTracker = createStepTracker(checkoutService);

stepTracker.trackCheckoutStarted();

Parameters:

Name Type
checkoutService CheckoutService
stepTrackerConfig? StepTrackerConfig

Returns: StepTracker

an instance of StepTracker.

embedCheckout

▸ embedCheckout(options: EmbeddedCheckoutOptions): Promise‹EmbeddedCheckout›

Embed the checkout form in an iframe.

remarks 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:

Name Type Description
options EmbeddedCheckoutOptions Options for embedding the checkout form.

Returns: Promise‹EmbeddedCheckout›

A promise that resolves to an instance of EmbeddedCheckout.