@bigcommerce/checkout-sdk / AdyenV3PaymentInitializeOptions
A set of options that are required to initialize the Adyenv3 payment method.
Once Adyenv3 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.
<!-- This is where the credit card component will be inserted -->
<div id="container"></div>
<!-- This is where the secondary components (i.e.: 3DS) will be inserted -->
<div id="additional-action-container"></div>
service.initializePayment({
methodId: 'adyenv3',
adyenv3: {
containerId: 'container',
additionalActionOptions: {
containerId: 'additional-action-container',
},
},
});
Additional options can be passed in to customize the components and register event callbacks.
service.initializePayment({
methodId: 'adyenv3',
adyenv3: {
containerId: 'container',
additionalActionOptions: {
containerId: 'additional-action-container',
onBeforeLoad(shopperInteraction) {
console.log(shopperInteraction);
},
onLoad(cancel) {
console.log(cancel);
},
onComplete() {
console.log('Completed');
},
},
options: {
scheme: {
hasHolderName: true,
},
},
},
});
- additionalActionOptions
- cardVerificationContainerId
- containerId
- hasVaultedInstruments
- options
- shouldShowNumberField
• additionalActionOptions: AdyenAdditionalActionOptions
A set of options that are required to initialize additional payment actions.
• Optional
cardVerificationContainerId: string
The location to insert the Adyen custom card component
• containerId: string
The location to insert the Adyen component.
• Optional
hasVaultedInstruments: boolean
True if the Adyen component has some Vaulted instrument
• Optional
options: Pick
<AdyenCreditCardComponentOptions
, "details"
| "enableStoreDetails"
| "hasHolderName"
| "holderNameRequired"
| "data"
| "groupTypes"
| "placeholders"
| "brands"
| "styles"
| "showBrandsUnderCardNumber"
| "onSubmit"
| "onError"
| "onFieldValid"
>
Optional. Overwriting the default options
• Optional
shouldShowNumberField: boolean
▸ validateCardFields(validateState
): void
Name | Type |
---|---|
validateState |
AdyenValidationState |
void