Skip to content

Latest commit

 

History

History
1065 lines (804 loc) · 50.7 KB

README.md

File metadata and controls

1065 lines (804 loc) · 50.7 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

AdyenComponentState

Ƭ AdyenComponentState: CardState | WechatState

AdyenV3ComponentState

Ƭ AdyenV3ComponentState: CardState_2 | WechatState_2 | BoletoState

AmazonPayV2ButtonInitializeOptions

Ƭ AmazonPayV2ButtonInitializeOptions: AmazonPayV2ButtonParameters | WithBuyNowFeature

The required config to render the AmazonPayV2 button.

AmazonPayV2ButtonParameters

Ƭ AmazonPayV2ButtonParameters: AmazonPayV2ButtonParams | AmazonPayV2NewButtonParams

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 & WithApplePayButtonInitializeOptions & WithBoltButtonInitializeOptions & 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 & WithApplePayCustomerInitializeOptions & WithBoltCustomerInitializeOptions & WithBraintreePaypalCustomerInitializeOptions & WithGooglePayCustomerInitializeOptions & WithPayPalCommerceCustomerInitializeOptions & WithPayPalCommerceCreditCustomerInitializeOptions & WithPayPalCommerceVenmoCustomerInitializeOptions

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"]

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

HostedInputStyles

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

HostedVaultedInstrument

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

Instrument

Ƭ Instrument: CardInstrument

Omit

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

Type parameters

Name Type
T T
K extends keyof T

OrderPaymentInstrument

Ƭ OrderPaymentInstrument: WithBankAccountInstrument | CreditCardInstrument | HostedInstrument | HostedCreditCardInstrument | HostedVaultedInstrument | NonceInstrument | VaultedInstrument | BlueSnapDirectEcpInstrument | CreditCardInstrument & WithDocumentInstrument | CreditCardInstrument & WithCheckoutcomFawryInstrument | CreditCardInstrument & WithCheckoutcomSEPAInstrument | CreditCardInstrument & WithCheckoutcomiDealInstrument | HostedInstrument & WithMollieIssuerInstrument | WithAccountCreation

OrderPayments

Ƭ OrderPayments: (GatewayOrderPayment | GiftCertificateOrderPayment)[]

PaymentInitializeOptions

Ƭ PaymentInitializeOptions: BasePaymentInitializeOptions & WithAdyenV2PaymentInitializeOptions & WithAdyenV3PaymentInitializeOptions & WithApplePayPaymentInitializeOptions & WithBlueSnapDirectAPMPaymentInitializeOptions & WithBoltPaymentInitializeOptions & WithBraintreePaypalAchPaymentInitializeOptions & WithBraintreeLocalMethodsPaymentInitializeOptions & WithBraintreeAcceleratedCheckoutPaymentInitializeOptions & WithCreditCardPaymentInitializeOptions & WithGooglePayPaymentInitializeOptions & WithMolliePaymentInitializeOptions & WithPayPalCommercePaymentInitializeOptions & WithPayPalCommerceCreditPaymentInitializeOptions & WithPayPalCommerceVenmoPaymentInitializeOptions & WithPayPalCommerceAlternativeMethodsPaymentInitializeOptions & WithPayPalCommerceCreditCardsPaymentInitializeOptions & WithSquareV2PaymentInitializeOptions & WithStripeV3PaymentInitializeOptions

PaymentInstrument

Ƭ PaymentInstrument: CardInstrument | AccountInstrument

PaymentProviderCustomer

Ƭ PaymentProviderCustomer: BraintreeAcceleratedCheckoutCustomer

StripeElementOptions

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

StripeEventType

Ƭ StripeEventType: StripeShippingEvent | StripeCustomerEvent

WithGooglePayCustomerInitializeOptions

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

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_2 }

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.

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.

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.

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.