Skip to content

Latest commit

 

History

History
179 lines (124 loc) · 3.95 KB

squarepaymentinitializeoptions.md

File metadata and controls

179 lines (124 loc) · 3.95 KB

@bigcommerce/checkout-sdk › SquarePaymentInitializeOptions

Interface: SquarePaymentInitializeOptions

A set of options that are required to initialize the Square payment method.

Once Square payment is initialized, credit card form fields, provided by the payment provider as iframes, will be inserted into the current page. These options provide a location and styling for each of the form fields.

<!-- 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: 'squarev2',
    square: {
        cardNumber: {
            elementId: 'card-number',
        },
        cvv: {
            elementId: 'card-code',
        },
        expirationDate: {
            elementId: 'card-expiry',
        },
        postalCode: {
            elementId: 'card-code',
        },
    },
});

Additional options can be passed in to enable Masterpass (if configured for the account) and customize the fields.

<!-- This container is where Masterpass button will be inserted -->
<div id="masterpass"></div>
service.initializePayment({
    methodId: 'squarev2',
    square: {
        cardNumber: {
            elementId: 'card-number',
        },
        cvv: {
            elementId: 'card-code',
        },
        expirationDate: {
            elementId: 'card-expiry',
        },
        postalCode: {
            elementId: 'card-code',
        },
        inputClass: 'form-input',
        inputStyles: [
            {
                color: '#333',
                fontSize: '13px',
                lineHeight: '20px',
            },
        ],
        masterpass: {
            elementId: 'masterpass',
        },
    },
});

Hierarchy

  • SquarePaymentInitializeOptions

Index

Properties

Methods

Properties

cardNumber

• cardNumber: SquareFormElement

The location to insert the credit card number form field.

cvv

• cvv: SquareFormElement

The location to insert the CVV form field.

expirationDate

• expirationDate: SquareFormElement

The location to insert the expiration date form field.

Optional inputClass

• inputClass? : undefined | string

The CSS class to apply to all form fields.

Optional inputStyles

• inputStyles? : Array‹object›

The set of CSS styles to apply to all form fields.

Optional masterpass

• masterpass? : SquareFormElement

Initialize Masterpass placeholder ID

postalCode

• postalCode: SquareFormElement

The location to insert the postal code form field.

Methods

Optional onError

▸ onError(errors?: NonceGenerationError[]): void

A callback that gets called when an error occurs in the card nonce generation

Parameters:

Name Type
errors? NonceGenerationError[]

Returns: void

Optional onPaymentSelect

▸ onPaymentSelect(): void

A callback that gets called when the customer selects a payment option.

Returns: void