Skip to content

Latest commit

 

History

History
1252 lines (942 loc) · 59.5 KB

README.md

File metadata and controls

1252 lines (942 loc) · 59.5 KB
Raw

@bigcommerce/checkout-sdk

@bigcommerce/checkout-sdk

Table of contents

Enumerations

Classes

Interfaces

Type Aliases

Functions

Type Aliases

AccountInstrument

Ƭ AccountInstrument: PayPalInstrument | BankInstrument | AchInstrument

AddressKey

Ƭ AddressKey: keyof Address

AdyenComponentEventState

Ƭ AdyenComponentEventState: CardState | BoletoState | WechatState

AmazonPayV2ButtonInitializeOptions

Ƭ AmazonPayV2ButtonInitializeOptions: AmazonPayV2ButtonParameters | WithBuyNowFeature

The required config to render the AmazonPayV2 button.

AnalyticStepType

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

BraintreeFormErrorData

Ƭ BraintreeFormErrorData: Omit<BraintreeFormFieldState, "isFocused">

BraintreeFormErrorDataKeys

Ƭ BraintreeFormErrorDataKeys: "number" | "expirationDate" | "expirationMonth" | "expirationYear" | "cvv" | "postalCode"

BraintreeFormErrorsData

Ƭ BraintreeFormErrorsData: Partial<Record<BraintreeFormErrorDataKeys, BraintreeFormErrorData>>

BraintreeFormFieldBlurEventData

Ƭ BraintreeFormFieldBlurEventData: BraintreeFormFieldKeyboardEventData

BraintreeFormFieldEnterEventData

Ƭ BraintreeFormFieldEnterEventData: BraintreeFormFieldKeyboardEventData

BraintreeFormFieldFocusEventData

Ƭ BraintreeFormFieldFocusEventData: BraintreeFormFieldKeyboardEventData

BraintreeFormFieldStyles

Ƭ BraintreeFormFieldStyles: Partial<Pick<CSSStyleDeclaration, "color" | "fontFamily" | "fontSize" | "fontWeight">>

CheckoutButtonInitializeOptions

Ƭ CheckoutButtonInitializeOptions: BaseCheckoutButtonInitializeOptions & WithAmazonPayV2ButtonInitializeOptions & WithApplePayButtonInitializeOptions & WithBoltButtonInitializeOptions & WithGooglePayButtonInitializeOptions & WithPayPalCommerceButtonInitializeOptions & WithPayPalCommerceCreditButtonInitializeOptions & WithPayPalCommerceVenmoButtonInitializeOptions & WithPayPalCommerceAlternativeMethodsButtonInitializeOptions

CheckoutIncludeParam

Ƭ CheckoutIncludeParam: { [key in CheckoutIncludes]?: boolean }

ComparableCheckout

Ƭ ComparableCheckout: Pick<Checkout, "outstandingBalance" | "coupons" | "giftCertificates"> & { cart: Partial<Cart> }

ConsignmentAssignmentRequestBody

Ƭ ConsignmentAssignmentRequestBody: ConsignmentAssignmentBaseRequestBodyWithShippingAddress | ConsignmentAssignmentBaseRequestBodyWithAddress

ConsignmentsRequestBody

Ƭ ConsignmentsRequestBody: ConsignmentCreateRequestBody[]

CustomerAddressRequestBody

Ƭ CustomerAddressRequestBody: AddressRequestBody

CustomerInitializeOptions

Ƭ CustomerInitializeOptions: BaseCustomerInitializeOptions & WithAmazonPayV2CustomerInitializeOptions & WithApplePayCustomerInitializeOptions & WithBoltCustomerInitializeOptions & WithBraintreePaypalCustomerInitializeOptions & WithBraintreeFastlaneCustomerInitializeOptions & WithGooglePayCustomerInitializeOptions & WithPayPalCommerceCustomerInitializeOptions & WithPayPalCommerceCreditCustomerInitializeOptions & WithPayPalCommerceVenmoCustomerInitializeOptions & WithPayPalCommerceFastlaneCustomerInitializeOptions & WithStripeUPECustomerInitializeOptions

FlashMessageType

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

FormFieldFieldType

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

FormFieldType

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

GooglePayButtonColor

Ƭ GooglePayButtonColor: "default" | "black" | "white"

GooglePayButtonType

Ƭ GooglePayButtonType: "book" | "buy" | "checkout" | "donate" | "order" | "pay" | "plain" | "subscribe" | "long" | "short"

GuestCredentials

Ƭ GuestCredentials: Partial<Subscriptions> & { email: string ; id?: string }

HostedCreditCardInstrument

Ƭ HostedCreditCardInstrument: Omit<CreditCardInstrument, "ccExpiry" | "ccName" | "ccNumber" | "ccCvv">

HostedFieldBlurEventData

Ƭ HostedFieldBlurEventData: HostedInputBlurEvent["payload"]

HostedFieldCardTypeChangeEventData

Ƭ HostedFieldCardTypeChangeEventData: HostedInputCardTypeChangeEvent["payload"]

HostedFieldEnterEventData

Ƭ HostedFieldEnterEventData: HostedInputEnterEvent["payload"]

HostedFieldEvent

Ƭ HostedFieldEvent: HostedFieldAttachEvent | HostedFieldSubmitRequestEvent | HostedFieldValidateRequestEvent | HostedFieldStoredCardRequestEvent

HostedFieldFocusEventData

Ƭ HostedFieldFocusEventData: HostedInputFocusEvent["payload"]

HostedFieldOptionsMap

Ƭ HostedFieldOptionsMap: HostedCardFieldOptionsMap | HostedStoredCardFieldOptionsMap

HostedFieldStyles

Ƭ HostedFieldStyles: HostedInputStyles

HostedFieldValidateEventData

Ƭ HostedFieldValidateEventData: HostedInputValidateEvent["payload"]

HostedFormErrorDataKeys

Ƭ HostedFormErrorDataKeys: "number" | "expirationDate" | "expirationMonth" | "expirationYear" | "cvv" | "postalCode"

HostedFormErrorsData

Ƭ HostedFormErrorsData: Partial<Record<HostedFormErrorDataKeys, HostedFormErrorData>>

HostedFormEventCallbacks

Ƭ HostedFormEventCallbacks: Pick<HostedFormOptions, "onBlur" | "onCardTypeChange" | "onFocus" | "onEnter" | "onValidate">

HostedInputStyles

Ƭ HostedInputStyles: Partial<Pick<CSSStyleDeclaration, "color" | "fontFamily" | "fontSize" | "fontWeight">>

HostedVaultedInstrument

Ƭ HostedVaultedInstrument: Omit<VaultedInstrument, "ccNumber" | "ccCvv">

IframeEventMap

Ƭ IframeEventMap<TType>: { [key in TType]: IframeEvent<TType> }

Type parameters

Name Type
TType extends string | number | symbol``string

Instrument

Ƭ Instrument: CardInstrument

InstrumentMeta

Ƭ InstrumentMeta: VaultAccessToken

Omit

Ƭ Omit<T, K>: Pick<T, Exclude<keyof T, K>>

Type parameters

Name Type
T T
K extends keyof T

OrderMeta

Ƭ OrderMeta: OrderMetaState

OrderPaymentInstrument

Ƭ OrderPaymentInstrument: WithBankAccountInstrument | WithEcpInstrument | WithSepaInstrument | WithPayByBankInstrument | WithIdealInstrument | CreditCardInstrument | HostedInstrument | HostedCreditCardInstrument | HostedVaultedInstrument | NonceInstrument | VaultedInstrument | CreditCardInstrument & WithDocumentInstrument | CreditCardInstrument & WithCheckoutcomFawryInstrument | CreditCardInstrument & WithCheckoutcomSEPAInstrument | CreditCardInstrument & WithIdealInstrument | HostedInstrument & WithMollieIssuerInstrument | WithAccountCreation

OrderPayments

Ƭ OrderPayments: (GatewayOrderPayment | GiftCertificateOrderPayment)[]

PaymentInitializeOptions

Ƭ PaymentInitializeOptions: BasePaymentInitializeOptions & WithAdyenV3PaymentInitializeOptions & WithAdyenV2PaymentInitializeOptions & WithAmazonPayV2PaymentInitializeOptions & WithApplePayPaymentInitializeOptions & WithBlueSnapDirectAPMPaymentInitializeOptions & WithBoltPaymentInitializeOptions & WithBraintreeAchPaymentInitializeOptions & WithBraintreeLocalMethodsPaymentInitializeOptions & WithBraintreeFastlanePaymentInitializeOptions & WithCreditCardPaymentInitializeOptions & WithGooglePayPaymentInitializeOptions & WithMolliePaymentInitializeOptions & WithPayPalCommercePaymentInitializeOptions & WithPayPalCommerceCreditPaymentInitializeOptions & WithPayPalCommerceVenmoPaymentInitializeOptions & WithPayPalCommerceAlternativeMethodsPaymentInitializeOptions & WithPayPalCommerceCreditCardsPaymentInitializeOptions & WithPayPalCommerceRatePayPaymentInitializeOptions & WithPayPalCommerceFastlanePaymentInitializeOptions & WithSquareV2PaymentInitializeOptions & WithStripeV3PaymentInitializeOptions & WithStripeUPEPaymentInitializeOptions & WithWorldpayAccessPaymentInitializeOptions

PaymentInstrument

Ƭ PaymentInstrument: CardInstrument | AccountInstrument

PaymentProviderCustomer

Ƭ PaymentProviderCustomer: PaymentProviderCustomerType

ReadableCheckoutStore

Ƭ ReadableCheckoutStore: ReadableDataStore<InternalCheckoutSelectors>

StripeElementOptions

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

StripeEventType

Ƭ StripeEventType: StripeShippingEvent | StripeCustomerEvent

WithGooglePayButtonInitializeOptions

Ƭ WithGooglePayButtonInitializeOptions: { [k in GooglePayKey]?: GooglePayButtonInitializeOptions }

The options that are required to initialize the GooglePay payment method. They can be omitted unless you need to support GooglePay.

WithGooglePayCustomerInitializeOptions

Ƭ WithGooglePayCustomerInitializeOptions: { [k in GooglePayKey]?: GooglePayCustomerInitializeOptions }

The options that are required to initialize the GooglePay payment method. They can be omitted unless you need to support GooglePay.

WithGooglePayPaymentInitializeOptions

Ƭ WithGooglePayPaymentInitializeOptions: { [k in GooglePayKey]?: GooglePayPaymentInitializeOptions }

The options that are required to initialize the GooglePay payment method. They can be omitted unless you need to support GooglePay.

Functions

createBodlService

▸ createBodlService(subscribe): BodlService

Creates an instance of BodlService.

remarks

const bodlService = BodlService();
bodlService.checkoutBegin();

Parameters

Name Type Description
subscribe (subscriber: (state: CheckoutSelectors) => void) => void The callback function, what get a subscriber as a property, that subscribes to state changes.

Returns

BodlService

an instance of BodlService.

createBraintreeAnalyticTracker

▸ createBraintreeAnalyticTracker(checkoutService): BraintreeAnalyticTrackerService

Creates an instance of BraintreeAnalyticTrackerService.

remarks

const checkoutService = createCheckoutService();
await checkoutService.loadCheckout();
const braintreeAnalyticTracker = createBraintreeAnalyticTracker(checkoutService);

braintreeAnalyticTracker.customerPaymentMethodExecuted();
braintreeAnalyticTracker.paymentComplete();
braintreeAnalyticTracker.selectedPaymentMethod('applepay');
braintreeAnalyticTracker.walletButtonClick('paypal');

Parameters

Name Type
checkoutService CheckoutService

Returns

BraintreeAnalyticTrackerService

an instance of BraintreeAnalyticTrackerService.

createCheckoutButtonInitializer

▸ createCheckoutButtonInitializer(options?): 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?): 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): 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): 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?): 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.

createPayPalCommerceAnalyticTracker

▸ createPayPalCommerceAnalyticTracker(checkoutService): PayPalCommerceAnalyticTrackerService

Creates an instance of PayPalCommerceAnalyticTrackerService.

remarks

const checkoutService = createCheckoutService();
await checkoutService.loadCheckout();
const paypalCommerceAnalyticTracker = createPayPalCommerceAnalyticTracker(checkoutService);

paypalCommerceAnalyticTracker.customerPaymentMethodExecuted();
paypalCommerceAnalyticTracker.paymentComplete();
paypalCommerceAnalyticTracker.selectedPaymentMethod('applepay');
paypalCommerceAnalyticTracker.walletButtonClick('paypal');

Parameters

Name Type
checkoutService CheckoutService

Returns

PayPalCommerceAnalyticTrackerService

an instance of PayPalCommerceAnalyticTrackerService.

createStepTracker

▸ createStepTracker(checkoutService, 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.

createStoredCardHostedFormService

▸ createStoredCardHostedFormService(host): StoredCardHostedFormService

Creates an instance of StoredCardHostedFormService.

Parameters

Name Type Description
host string Host url string parameter.

Returns

StoredCardHostedFormService

An instance of StoredCardHostedFormService.

embedCheckout

▸ embedCheckout(options): 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.