Skip to content

Latest commit

 

History

History
188 lines (134 loc) · 4.33 KB

BraintreePaymentInitializeOptions.md

File metadata and controls

188 lines (134 loc) · 4.33 KB
Raw

@bigcommerce/checkout-sdk / BraintreePaymentInitializeOptions

Interface: BraintreePaymentInitializeOptions

A set of options that are required to initialize the Braintree payment method. You need to provide the options if you want to support 3D Secure authentication flow.

<!-- These containers are where the hosted (iframed) credit card fields will be inserted -->
<div id="card-number"></div>
<div id="card-name"></div>
<div id="card-expiry"></div>
<div id="card-code"></div>
service.initializePayment({
    methodId: 'braintree',
    braintree: {
        form: {
            fields: {
                cardNumber: { containerId: 'card-number' },
                cardName: { containerId: 'card-name' },
                cardExpiry: { containerId: 'card-expiry' },
                cardCode: { containerId: 'card-code' },
            },
        },
    },
});

Additional options can be passed in to customize the fields and register event callbacks.

service.initializePayment({
    methodId: 'braintree',
    creditCard: {
        form: {
            fields: {
                cardNumber: { containerId: 'card-number' },
                cardName: { containerId: 'card-name' },
                cardExpiry: { containerId: 'card-expiry' },
                cardCode: { containerId: 'card-code' },
            },
            styles: {
                default: {
                    color: '#000',
                },
                error: {
                    color: '#f00',
                },
                focus: {
                    color: '#0f0',
                },
            },
            onBlur({ fieldType }) {
                console.log(fieldType);
            },
            onFocus({ fieldType }) {
                console.log(fieldType);
            },
            onEnter({ fieldType }) {
                console.log(fieldType);
            },
            onCardTypeChange({ cardType }) {
                console.log(cardType);
            },
            onValidate({ errors, isValid }) {
                console.log(errors);
                console.log(isValid);
            },
        },
    },
});

Table of contents

Properties

Methods

Properties

bannerContainerId

• Optional bannerContainerId: string

The location to insert the Pay Later Messages.

containerId

• Optional containerId: string

The CSS selector of a container where the payment widget should be inserted into.

form

• Optional form: BraintreeFormOptions

alpha Please note that this option is currently in an early stage of development. Therefore the API is unstable and not ready for public consumption.

threeDSecure

• Optional threeDSecure: BraintreeThreeDSecureOptions

Methods

onError

▸ Optional onError(error): void

A callback for displaying error popup. This callback requires error object as parameter.

Parameters

Name Type
error unknown

Returns

void

onPaymentError

▸ Optional onPaymentError(error): void

A callback that gets called if unable to submit payment.

Parameters

Name Type Description
error BraintreeError | default The error object describing the failure.

Returns

void

onRenderButton

▸ Optional onRenderButton(): void

A callback right before render Smart Payment Button that gets called when Smart Payment Button is eligible. This callback can be used to hide the standard submit button.

Returns

void

submitForm

▸ Optional submitForm(): void

A callback for submitting payment form that gets called when buyer approved PayPal account.

Returns

void