npm package: @foodello/capacitor-adyen
Description: Adyen components integration for Capacitor.js
Author: Eljas Jalo
Latest version: 8.0.0

<div align="center">

[![npm version](https://img.shields.io/npm/v/@foodello/capacitor-adyen.svg?style=flat)](https://www.npmjs.com/package/@foodello/capacitor-adyen)
[![npm downloads](https://img.shields.io/npm/dm/@foodello/capacitor-adyen.svg?style=flat)](https://www.npmjs.com/package/@foodello/capacitor-adyen)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![GitHub issues](https://img.shields.io/github/issues/Fiksuruoka-fi/capacitor-adyen.svg?style=flat)](https://github.com/Fiksuruoka-fi/capacitor-adyen/issues)
[![GitHub stars](https://img.shields.io/github/stars/Fiksuruoka-fi/capacitor-adyen.svg?style=flat)](https://github.com/Fiksuruoka-fi/capacitor-adyen/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/Fiksuruoka-fi/capacitor-adyen.svg?style=flat)](https://github.com/Fiksuruoka-fi/capacitor-adyen/network)

[![Adyen iOS SDK](https://img.shields.io/badge/Adyen%20iOS-^v5.x.x-000000?style=flat&logo=ios&logoColor=white)](https://github.com/Adyen/adyen-ios/releases)
[![Adyen Android SDK](https://img.shields.io/badge/Adyen%20Android-^v5.x.x-3DDC84?style=flat&logo=android&logoColor=white)](https://github.com/Adyen/adyen-android/releases)

</div>

<div align="center">
  <a href="https://www.adyen.com/">
    <img src="./.github/raw/main/images/logo.png" alt="Adyen x Capacitor.js" width="50%" style="border-radius: 16px;" />
  </a>
  <h1>Adyen SDK integration with Capacitor.js</h1>
</div>

## Supported Components

| Component | Since Version | Platform Support                                                                                                                                                                    |
| --------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Card**  | `v7.0.0`      | ![iOS](https://img.shields.io/badge/iOS-000000?style=flat&logo=ios&logoColor=white) ![Android](https://img.shields.io/badge/Android-3DDC84?style=flat&logo=android&logoColor=white) |

## Roadmap

- [ ] **Google Pay** component support - [Android](https://docs.adyen.com/payment-methods/google-pay/android-component/)
- [ ] **Apple Pay** component support - [iOS](https://docs.adyen.com/payment-methods/apple-pay/ios-component/)
- [ ] **PayPal** component support - [iOS](https://docs.adyen.com/payment-methods/paypal/ios-component/) / [Android](https://docs.adyen.com/payment-methods/paypal/android-component/)
- [ ] **iDEAL** component support - [iOS](https://docs.adyen.com/payment-methods/ideal/ios-component/) / [Android](https://docs.adyen.com/payment-methods/ideal/android-component/)
- [ ] **Klarna** component support - [iOS](https://docs.adyen.com/payment-methods/klarna/ios-component/) / [Android](https://docs.adyen.com/payment-methods/klarna/android-component/)

## Install

```bash
# npm
npm install capacitor-adyen

# yarn
yarn add @foodello/capacitor-adyen

# pnpm
pnpm add @foodello/capacitor-adyen

# sync native projects
npx cap sync
```

## Usage

Define `Adyen` plugin configuration in `capacitor.config.json`:

```json
{
  "plugins": {
    "Adyen": {
      "componentsEnvironment": "test", // or "live"
      "clientKey": "your-adyen-client-key",
      "enableAnalytics": true // optional, defaults to false
    }
  }
}
```

Then all components require [payment methods](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods) to be set before presenting the component:

```typescript
import { Adyen } from '@foodello/capacitor-adyen';

const paymentMethodsJson = await fetchPaymentMethodsFromYourBackend();
await Adyen.setCurrentPaymentMethods({ paymentMethodsJson });
```

After that you can present any of the supported components, for example a Card component:

```typescript
await Adyen.presentCardComponent();
```

To react to component events with your code, add listeners:

```typescript
import { Adyen, PaymentSubmitEventData } from '@foodello/capacitor-adyen';
const listener = await Adyen.addListener('onSubmit', (data: PaymentSubmitEventData) => {
  console.log('Payment submitted:', data);
});
```

### Example on extending Adyen web components

You can use component from this plugin to extend Adyen web component's behaviour for native platforms.

```typescript
import { Capacitor} from '@capacitor/core';
import { Adyen, Card, type ExtendedCardConfiguration } from '@foodello/capacitor-adyen';
import { AdyenCheckout, Core, type CoreConfiguration, type PaymentResponseData } from '@adyen/adyen-web';

import '@adyen/adyen-web/styles/adyen.css'; // Import Adyen base styles
import '@foodello/capacitor-adyen/dist/esm/styles.css'; // Import plugin styles

// 1. Fetch current payment methods from your backend
const paymentMethodsJson = await fetchPaymentMethodsFromYourBackend();

// 2. Set current payment methods to Adyen plugin if running on native platform
if (Capacitor.isNativePlatform()) {
  await Adyen.setCurrentPaymentMethods({ paymentMethodsJson });
}

// 3. Create Adyen Web Checkout instance
const checkoutCore = CoreConfiguration = {
    countryCode: 'NL',
    locale: 'nl-NL',
    environment: 'test',
    clientKey: 'test_***',
    analytics: { enabled: true },
    paymentMethodsResponse: PAYMENT_METHOD_JSON,
    onPaymentCompleted: (result, component) => {
      console.log('Payment completed', result, component)
    },
    onPaymentFailed: (error, component) => {
      console.error('Payment failed', error, component)
    },
    onError: (error) => {
      console.error(error)
    },
    beforeSubmit: (state, component, actions) => {
      console.log('beforeSubmit', state, component, actions)
    },
    onSubmit: (state, component, actions) => {
      console.log('onSubmit', state, component, actions)
      // Mimic a successful payment submission
      // In real implementation, you would send `state.data` to your server
      // and get the payment response from Adyen's /payments API
      // and then call `actions.handleResponse` with that response.
      // Here we just call it with an empty object to simulate success.
      const response: PaymentResponseData = {
        resultCode: 'Authorised',
        type: 'scheme',
      };
      actions.resolve(response);
    },
    onAdditionalDetails: (state, component, actions) => {
      console.log('onAdditionalDetails', state, component, actions)
    },
    onActionHandled: () => {
      console.log('onActionHandled')
    },
    onChange: (state, component) => {
      console.log('onChange', state, component)
    },
  };

  // 4. Initialize Adyen Checkout instance
  const checkout = await AdyenCheckout(checkoutCore);

  // 5. Create Card component configuration
  const cardConfiguration: ExtendedCardConfiguration = {
    // Your custom configuration here
  };

  // 6. Create Card component instance (use extended version from this @foodello/capacitor-adyen package)
  const cardComponent = new Card(coreRef.current, cardConfiguration);
  
  // 7. Mount the component to your container
  const wrapper = document.getElementById('card-container');
  cardComponent.mount(wrapper);
```

Supports:
- Card component

See [example](example) -folder for a full example of how to extend Adyen's web Card component to support native platforms with Capacitor.

## Useful Links

### 🏢 Adyen Resources

- [📚 Adyen Documentation](https://docs.adyen.com/)
- [🔧 Adyen Test Cards](https://docs.adyen.com/development-resources/testing/test-card-numbers)
- [🎨 Design Guidelines](https://docs.adyen.com/online-payments/components/styling/)
- [🔐 Security Best Practices](https://docs.adyen.com/development-resources/security/)

### 🛠️ Developer Tools

- [Adyen Customer Area](https://ca-test.adyen.com/) (Test Environment)
- [Adyen GitHub](https://github.com/Adyen)

<!-- API-REF:START -->

## API Reference

### Table of Contents

- **Plugin Interface**
  - [Interface: AdyenPlugin](#interface-adyenplugin)
  - [Interface: BaseAdyenPlugin](#interface-baseadyenplugin)

- **Card Component**
  - [Interface: CardBrand](#interface-cardbrand)
  - [Interface: CardBrandData](#interface-cardbranddata)
  - [Interface: CardChangeEventData](#interface-cardchangeeventdata)
  - [Interface: CardComponentConfiguration](#interface-cardcomponentconfiguration)
  - [Interface: CardComponentEvents](#interface-cardcomponentevents)
  - [Interface: CardComponentMethods](#interface-cardcomponentmethods)
  - [Interface: CardComponentOptions](#interface-cardcomponentoptions)
  - [Interface: CardSubmitEventData](#interface-cardsubmiteventdata)
  - [Interface: ExtendedCardConfiguration](#interface-extendedcardconfiguration)
  - [Interface: NativeCardConfiguration](#interface-nativecardconfiguration)
  - [Interface: NativeCardState](#interface-nativecardstate)

- **Configuration**
  - [Interface: AdditionalDetailsEventData](#interface-additionaldetailseventdata)
  - [Interface: AdyenEvents](#interface-adyenevents)
  - [Interface: BaseAdyenComponentOptions](#interface-baseadyencomponentoptions)
  - [Interface: BaseEvents](#interface-baseevents)
  - [Interface: ComponentHideEventData](#interface-componenthideeventdata)
  - [Interface: PaymentErrorEventData](#interface-paymenterroreventdata)
  - [Interface: PaymentMethodsResponse](#interface-paymentmethodsresponse)
  - [Interface: PaymentSubmitEventData](#interface-paymentsubmiteventdata)
  - [Type: ButtonStyleDefinition](#type-buttonstyledefinition)
  - [Type: ComponentViewOptions](#type-componentviewoptions)
  - [Type: FontDefinition](#type-fontdefinition)
  - [Type: FormComponentStyle](#type-formcomponentstyle)
  - [Type: SwitchStyleDefinition](#type-switchstyledefinition)
  - [Type: TextFieldStyleDefinition](#type-textfieldstyledefinition)
  - [Type: TextStyleDefinition](#type-textstyledefinition)

## Interface: AdditionalDetailsEventData

Defined in: [src/definitions/index.ts:217](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L217)

#### Indexable

```ts
[key: string]: any
```

## Interface: AdyenEvents

Defined in: [src/definitions/index.ts:156](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L156)

All available Adyen events

#### Extends

- [`BaseEvents`](#BaseEvents.md).[`CardComponentEvents`](#CardComponentEvents.md)

#### Properties

#### onCardSubmit()

```ts
onCardSubmit: (data) => void;
```

Defined in: [src/definitions/components/card.ts:221](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L221)

Listens for Card component `submit` events.

#### Parameters

##### data

[`CardSubmitEventData`](#CardSubmitEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onCardSubmit', async (data) => {
  // Handle the submit event, e.g., show selected card details to the user
  console.log('Card submitted:', data);
});
```

#### Inherited from

[`CardComponentEvents`](#CardComponentEvents.md).[`onCardSubmit`](#CardComponentEvents.md#oncardsubmit)

***

#### onCardChange()

```ts
onCardChange: (data) => void;
```

Defined in: [src/definitions/components/card.ts:236](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L236)

Listens for Card component's `change` events.

#### Parameters

##### data

[`CardChangeEventData`](#CardChangeEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onCardChange', async (data) => {
  // Handle the change event, e.g., show selected card details to the user
  console.log('Card changed:', data);
});
```

#### Inherited from

[`CardComponentEvents`](#CardComponentEvents.md).[`onCardChange`](#CardComponentEvents.md#oncardchange)

***

#### onAdditionalDetails()

```ts
onAdditionalDetails: (data) => void;
```

Defined in: [src/definitions/index.ts:90](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L90)

Listens for payment `onAdditionalDetails` events.

#### Parameters

##### data

[`AdditionalDetailsEventData`](#AdditionalDetailsEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onAdditionalDetails', async (data) => {
  // Handle the additionalDetails event, e.g., send data to your server
  console.log('Additional details:', data);
});
```

#### Inherited from

[`BaseEvents`](#BaseEvents.md).[`onAdditionalDetails`](#BaseEvents.md#onadditionaldetails)

***

#### onSubmit()

```ts
onSubmit: (data) => void;
```

Defined in: [src/definitions/index.ts:104](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L104)

Listens for payment `submit` events.

#### Parameters

##### data

[`PaymentSubmitEventData`](#PaymentSubmitEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onSubmit', async (data) => {
  // Handle the submit event, e.g., send payment data to your server
  console.log('Payment submitted:', data);
});
```

#### Inherited from

[`BaseEvents`](#BaseEvents.md).[`onSubmit`](#BaseEvents.md#onsubmit)

***

#### onError()

```ts
onError: (data) => void;
```

Defined in: [src/definitions/index.ts:119](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L119)

Listens for payment and component `error` events.

#### Parameters

##### data

[`PaymentErrorEventData`](#PaymentErrorEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onError', async (data) => {
  // Handle the error event, e.g., show an error message to the user
  console.error('Payment error:', data);
});
```

#### Inherited from

[`BaseEvents`](#BaseEvents.md).[`onError`](#BaseEvents.md#onerror)

***

#### onShow()

```ts
onShow: () => void;
```

Defined in: [src/definitions/index.ts:134](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L134)

Listens for component `present` events.

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onShow', async () => {
  // Handle the present event
  console.log('Component presented');
});
```

#### Inherited from

[`BaseEvents`](#BaseEvents.md).[`onShow`](#BaseEvents.md#onshow)

***

#### onHide()

```ts
onHide: (data) => void;
```

Defined in: [src/definitions/index.ts:149](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L149)

Listens for component `dismiss` events.

#### Parameters

##### data

[`ComponentHideEventData`](#ComponentHideEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onHide', async (data) => {
  // Handle the hide event, e.g., navigate back or reset the UI
  console.log('Component hidden:', data.reason);
});
```

#### Inherited from

[`BaseEvents`](#BaseEvents.md).[`onHide`](#BaseEvents.md#onhide)

## Interface: AdyenPlugin

Defined in: [src/definitions/index.ts:212](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L212)

#### Extends

- [`BaseAdyenPlugin`](#BaseAdyenPlugin.md).[`CardComponentMethods`](#CardComponentMethods.md)

#### Methods

#### presentCardComponent()

```ts
presentCardComponent(options?): Promise<void>;
```

Defined in: [src/definitions/components/card.ts:203](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L203)

Creates a Adyen Card component for handling card payments.

#### Parameters

##### options?

[`CardComponentOptions`](#CardComponentOptions.md)

Options for creating the card component.

#### Returns

`Promise`\<`void`\>

#### Since

7.0.0

#### See

[https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods) for more information on how to retrieve available payment methods.

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';

const paymentMethodsResponse: PaymentMethodsResponse = await fetchPaymentMethodsFromYourServer();
await Adyen.presentCardComponent({
  amount: 1000,
  countryCode: 'NL',
  currencyCode: 'EUR',
});

#### Inherited from

[`CardComponentMethods`](#CardComponentMethods.md).[`presentCardComponent`](#CardComponentMethods.md#presentcardcomponent)

***

#### setCurrentPaymentMethods()

```ts
setCurrentPaymentMethods(options): Promise<void>;
```

Defined in: [src/definitions/index.ts:179](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L179)

Set current available payment methods for the Adyen components.

#### Parameters

##### options

Options for creating the card component.

###### paymentMethodsJson

[`PaymentMethodsResponse`](#PaymentMethodsResponse.md)

#### Returns

`Promise`\<`void`\>

A promise that resolves when the card component is created.

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';

const paymentMethodsResponse: PaymentMethodsResponse = await fetchPaymentMethodsFromYourServer();
await Adyen.setCurrentPaymentMethods({
  paymentMethodsJson: paymentMethodsResponse,
});

@see {@link https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods} for more information on how to retrieve available payment methods.

@throws Will throw an error if the Adyen SDK is not initialized or if required parameters are missing.

#### Inherited from

[`BaseAdyenPlugin`](#BaseAdyenPlugin.md).[`setCurrentPaymentMethods`](#BaseAdyenPlugin.md#setcurrentpaymentmethods)

***

#### hideComponent()

```ts
hideComponent(): Promise<void>;
```

Defined in: [src/definitions/index.ts:193](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L193)

Hides the currently presented Adyen component, if any.

#### Returns

`Promise`\<`void`\>

A promise that resolves when the component is hidden.

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
await Adyen.hideComponent();
```

#### Inherited from

[`BaseAdyenPlugin`](#BaseAdyenPlugin.md).[`hideComponent`](#BaseAdyenPlugin.md#hidecomponent)

***

#### destroyComponent()

```ts
destroyComponent(): Promise<void>;
```

Defined in: [src/definitions/index.ts:207](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L207)

Destroys the currently selected Adyen component, if any.

#### Returns

`Promise`\<`void`\>

A promise that resolves when the component is destroyed.

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
await Adyen.destroyComponent();
```

#### Inherited from

[`BaseAdyenPlugin`](#BaseAdyenPlugin.md).[`destroyComponent`](#BaseAdyenPlugin.md#destroycomponent)

***

#### addListener()

```ts
addListener<E>(eventName, listener): Promise<PluginListenerHandle>;
```

Defined in: [src/definitions/index.ts:209](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L209)

#### Type Parameters

##### E

`E` *extends* keyof [`AdyenEvents`](#AdyenEvents.md)

#### Parameters

##### eventName

`E`

##### listener

[`AdyenEvents`](#AdyenEvents.md)\[`E`\]

#### Returns

`Promise`\<`PluginListenerHandle`\>

#### Inherited from

[`BaseAdyenPlugin`](#BaseAdyenPlugin.md).[`addListener`](#BaseAdyenPlugin.md#addlistener)

## Interface: BaseAdyenComponentOptions

Defined in: [src/definitions/index.ts:65](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L65)

Base options for Adyen components.

#### Extended by

- [`CardComponentOptions`](#CardComponentOptions.md)

#### Properties

#### amount?

```ts
optional amount: number;
```

Defined in: [src/definitions/index.ts:66](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L66)

***

#### countryCode?

```ts
optional countryCode: string;
```

Defined in: [src/definitions/index.ts:68](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L68)

ISO-3166-1 alpha-2 format

***

#### currencyCode?

```ts
optional currencyCode: string;
```

Defined in: [src/definitions/index.ts:70](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L70)

ISO 4217 currency code

## Interface: BaseAdyenPlugin

Defined in: [src/definitions/index.ts:158](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L158)

#### Extended by

- [`AdyenPlugin`](#AdyenPlugin.md)

#### Methods

#### setCurrentPaymentMethods()

```ts
setCurrentPaymentMethods(options): Promise<void>;
```

Defined in: [src/definitions/index.ts:179](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L179)

Set current available payment methods for the Adyen components.

#### Parameters

##### options

Options for creating the card component.

###### paymentMethodsJson

[`PaymentMethodsResponse`](#PaymentMethodsResponse.md)

#### Returns

`Promise`\<`void`\>

A promise that resolves when the card component is created.

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';

const paymentMethodsResponse: PaymentMethodsResponse = await fetchPaymentMethodsFromYourServer();
await Adyen.setCurrentPaymentMethods({
  paymentMethodsJson: paymentMethodsResponse,
});

@see {@link https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods} for more information on how to retrieve available payment methods.

@throws Will throw an error if the Adyen SDK is not initialized or if required parameters are missing.

***

#### hideComponent()

```ts
hideComponent(): Promise<void>;
```

Defined in: [src/definitions/index.ts:193](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L193)

Hides the currently presented Adyen component, if any.

#### Returns

`Promise`\<`void`\>

A promise that resolves when the component is hidden.

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
await Adyen.hideComponent();
```

***

#### destroyComponent()

```ts
destroyComponent(): Promise<void>;
```

Defined in: [src/definitions/index.ts:207](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L207)

Destroys the currently selected Adyen component, if any.

#### Returns

`Promise`\<`void`\>

A promise that resolves when the component is destroyed.

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
await Adyen.destroyComponent();
```

***

#### addListener()

```ts
addListener<E>(eventName, listener): Promise<PluginListenerHandle>;
```

Defined in: [src/definitions/index.ts:209](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L209)

#### Type Parameters

##### E

`E` *extends* keyof [`AdyenEvents`](#AdyenEvents.md)

#### Parameters

##### eventName

`E`

##### listener

[`AdyenEvents`](#AdyenEvents.md)\[`E`\]

#### Returns

`Promise`\<`PluginListenerHandle`\>

## Interface: BaseEvents

Defined in: [src/definitions/index.ts:77](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L77)

Base events available for all Adyen components.

#### Extended by

- [`AdyenEvents`](#AdyenEvents.md)

#### Properties

#### onAdditionalDetails()

```ts
onAdditionalDetails: (data) => void;
```

Defined in: [src/definitions/index.ts:90](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L90)

Listens for payment `onAdditionalDetails` events.

#### Parameters

##### data

[`AdditionalDetailsEventData`](#AdditionalDetailsEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onAdditionalDetails', async (data) => {
  // Handle the additionalDetails event, e.g., send data to your server
  console.log('Additional details:', data);
});
```

***

#### onSubmit()

```ts
onSubmit: (data) => void;
```

Defined in: [src/definitions/index.ts:104](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L104)

Listens for payment `submit` events.

#### Parameters

##### data

[`PaymentSubmitEventData`](#PaymentSubmitEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onSubmit', async (data) => {
  // Handle the submit event, e.g., send payment data to your server
  console.log('Payment submitted:', data);
});
```

***

#### onError()

```ts
onError: (data) => void;
```

Defined in: [src/definitions/index.ts:119](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L119)

Listens for payment and component `error` events.

#### Parameters

##### data

[`PaymentErrorEventData`](#PaymentErrorEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onError', async (data) => {
  // Handle the error event, e.g., show an error message to the user
  console.error('Payment error:', data);
});
```

***

#### onShow()

```ts
onShow: () => void;
```

Defined in: [src/definitions/index.ts:134](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L134)

Listens for component `present` events.

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onShow', async () => {
  // Handle the present event
  console.log('Component presented');
});
```

***

#### onHide()

```ts
onHide: (data) => void;
```

Defined in: [src/definitions/index.ts:149](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L149)

Listens for component `dismiss` events.

#### Parameters

##### data

[`ComponentHideEventData`](#ComponentHideEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onHide', async (data) => {
  // Handle the hide event, e.g., navigate back or reset the UI
  console.log('Component hidden:', data.reason);
});
```

## Interface: CardBrand

Defined in: [src/definitions/components/card.ts:170](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L170)

#### Properties

#### type

```ts
type: string;
```

Defined in: [src/definitions/components/card.ts:174](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L174)

Card brand name, e.g., 'visa', 'mc', 'amex', etc.

***

#### isSupported

```ts
isSupported: boolean;
```

Defined in: [src/definitions/components/card.ts:179](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L179)

Only on iOS

## Interface: CardBrandData

Defined in: [src/definitions/components/card.ts:157](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L157)

#### Properties

#### cardBrands

```ts
cardBrands: CardBrand | CardBrand[];
```

Defined in: [src/definitions/components/card.ts:162](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L162)

iOS: List of detected card brands
Android: Detected card brand

***

#### primaryBrand

```ts
primaryBrand: CardBrand;
```

Defined in: [src/definitions/components/card.ts:167](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L167)

First card brand in the list (iOS) or the detected brand (Android)

## Interface: CardChangeEventData

Defined in: [src/definitions/components/card.ts:145](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L145)

#### Properties

#### cardBrands?

```ts
optional cardBrands: CardBrandData;
```

Defined in: [src/definitions/components/card.ts:149](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L149)

Card brand information

***

#### cardBIN?

```ts
optional cardBIN: string;
```

Defined in: [src/definitions/components/card.ts:154](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L154)

Bank Identification Number (BIN) of the card

## Interface: CardComponentConfiguration

Defined in: [src/definitions/components/card.ts:31](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L31)

Configuration options specific to the Card component.

#### See

 - [Android](https://docs.adyen.com/payment-methods/cards/android-component/#components-configuration)
 - [iOS](https://docs.adyen.com/payment-methods/cards/ios-component/#optional-configuration)

#### Properties

#### showsHolderNameField?

```ts
optional showsHolderNameField: boolean;
```

Defined in: [src/definitions/components/card.ts:36](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L36)

Display cardholder name input field

#### Default

```ts
false
```

***

#### showsSecurityCodeField?

```ts
optional showsSecurityCodeField: boolean;
```

Defined in: [src/definitions/components/card.ts:42](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L42)

Display security code input field

#### Default

```ts
true
```

***

#### showsStorePaymentMethodField?

```ts
optional showsStorePaymentMethodField: boolean;
```

Defined in: [src/definitions/components/card.ts:48](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L48)

Display store payment method checkbox

#### Default

```ts
false
```

***

#### allowedCardTypes?

```ts
optional allowedCardTypes: string[];
```

Defined in: [src/definitions/components/card.ts:55](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L55)

Supported card types
Same as `supportedCardTypes` on Android

#### Default

`AnyCardPaymentMethod`

***

#### showsSubmitButton?

```ts
optional showsSubmitButton: boolean;
```

Defined in: [src/definitions/components/card.ts:61](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L61)

Display submit button

#### Default

```ts
true
```

***

#### shopperReference?

```ts
optional shopperReference: string;
```

Defined in: [src/definitions/components/card.ts:66](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L66)

Your unique shopper reference.

***

#### billingAddress?

```ts
optional billingAddress: {
  requirementPolicy: boolean;
  mode: "none" | "full" | "postalCode";
  countryCodes?: string[];
};
```

Defined in: [src/definitions/components/card.ts:71](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L71)

Billing address configuration

#### requirementPolicy

```ts
requirementPolicy: boolean;
```

Set to `true` to collect the shopper's billing address and mark the fields as required.

##### Default

```ts
false
```

#### mode

```ts
mode: "none" | "full" | "postalCode";
```

Sets which billing address fields to show in the payment form. Possible values:
 - full: show all billing address fields.
 - none: do not show billing address fields.
 - postalCode: show only the postal code field.

##### Default

`none`

#### countryCodes?

```ts
optional countryCodes: string[];
```

Array of allowed country codes for the billing address. For example, `['US', 'CA', 'BR']`.

##### Default

```ts
all countries supported by Adyen
```

***

#### koreanAuthenticationMode?

```ts
optional koreanAuthenticationMode: "auto" | "show" | "hide";
```

Defined in: [src/definitions/components/card.ts:101](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L101)

For Korean cards, sets if security fields show in the payment form. Possible values:
  - show: show the fields.
  - hide: do not show the fields.
  - auto: the field appears for cards issued in South Korea.

#### Default

`auto`

***

#### socialSecurityNumberMode?

```ts
optional socialSecurityNumberMode: "auto" | "show" | "hide";
```

Defined in: [src/definitions/components/card.ts:110](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L110)

For Brazilian cards, sets if the CPF/CNPJ social security number field shows in the payment form. Possible values:
  - show: show the field.
  - hide: do not show the field.
  - auto: the field appears based on the detected card number.

#### Default

`auto`

***

#### localizationParameters?

```ts
optional localizationParameters: {
  languageOverride?: string;
  tableName?: string;
  keySeparator?: string;
};
```

Defined in: [src/definitions/components/card.ts:113](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L113)

Localization parameters for the component

#### languageOverride?

```ts
optional languageOverride: string;
```

ISO 639-1 language code

##### Default

```ts
not-set, defaults to device language
```

#### tableName?

```ts
optional tableName: string;
```

iOS only

##### See

https://adyen.github.io/adyen-ios/5.20.1/documentation/adyen/localization/

#### keySeparator?

```ts
optional keySeparator: string;
```

iOS only

##### See

https://adyen.github.io/adyen-ios/5.20.1/documentation/adyen/localization/

## Interface: CardComponentEvents

Defined in: [src/definitions/components/card.ts:207](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L207)

#### Extended by

- [`AdyenEvents`](#AdyenEvents.md)

#### Properties

#### onCardSubmit()

```ts
onCardSubmit: (data) => void;
```

Defined in: [src/definitions/components/card.ts:221](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L221)

Listens for Card component `submit` events.

#### Parameters

##### data

[`CardSubmitEventData`](#CardSubmitEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onCardSubmit', async (data) => {
  // Handle the submit event, e.g., show selected card details to the user
  console.log('Card submitted:', data);
});
```

***

#### onCardChange()

```ts
onCardChange: (data) => void;
```

Defined in: [src/definitions/components/card.ts:236](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L236)

Listens for Card component's `change` events.

#### Parameters

##### data

[`CardChangeEventData`](#CardChangeEventData.md)

#### Returns

`void`

#### Since

7.0.0

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';
Adyen.addListener('onCardChange', async (data) => {
  // Handle the change event, e.g., show selected card details to the user
  console.log('Card changed:', data);
});
```

## Interface: CardComponentMethods

Defined in: [src/definitions/components/card.ts:183](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L183)

#### Extended by

- [`AdyenPlugin`](#AdyenPlugin.md)

#### Methods

#### presentCardComponent()

```ts
presentCardComponent(options?): Promise<void>;
```

Defined in: [src/definitions/components/card.ts:203](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L203)

Creates a Adyen Card component for handling card payments.

#### Parameters

##### options?

[`CardComponentOptions`](#CardComponentOptions.md)

Options for creating the card component.

#### Returns

`Promise`\<`void`\>

#### Since

7.0.0

#### See

[https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods) for more information on how to retrieve available payment methods.

#### Example

```typescript
import { Adyen } from '@foodello/capacitor-adyen';

const paymentMethodsResponse: PaymentMethodsResponse = await fetchPaymentMethodsFromYourServer();
await Adyen.presentCardComponent({
  amount: 1000,
  countryCode: 'NL',
  currencyCode: 'EUR',
});

## Interface: CardComponentOptions

Defined in: [src/definitions/components/card.ts:10](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L10)

Options for creating a Adyen Card component.

#### Extends

- [`BaseAdyenComponentOptions`](#BaseAdyenComponentOptions.md)

#### Properties

#### amount?

```ts
optional amount: number;
```

Defined in: [src/definitions/components/card.ts:12](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L12)

Payment amount in minor currency units (e.g., cents)

#### Overrides

[`BaseAdyenComponentOptions`](#BaseAdyenComponentOptions.md).[`amount`](#BaseAdyenComponentOptions.md#amount)

***

#### countryCode?

```ts
optional countryCode: string;
```

Defined in: [src/definitions/components/card.ts:14](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L14)

ISO 3166-1 alpha-2 country code (e.g., 'US', 'NL')

#### Overrides

[`BaseAdyenComponentOptions`](#BaseAdyenComponentOptions.md).[`countryCode`](#BaseAdyenComponentOptions.md#countrycode)

***

#### currencyCode?

```ts
optional currencyCode: string;
```

Defined in: [src/definitions/components/card.ts:16](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L16)

ISO 4217 currency code (e.g., 'USD', 'EUR')

#### Overrides

[`BaseAdyenComponentOptions`](#BaseAdyenComponentOptions.md).[`currencyCode`](#BaseAdyenComponentOptions.md#currencycode)

***

#### configuration?

```ts
optional configuration: CardComponentConfiguration;
```

Defined in: [src/definitions/components/card.ts:18](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L18)

Card component behaviour configuration

***

#### style?

```ts
optional style: FormComponentStyle;
```

Defined in: [src/definitions/components/card.ts:20](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L20)

Card-specific styling options

***

#### viewOptions?

```ts
optional viewOptions: ComponentViewOptions;
```

Defined in: [src/definitions/components/card.ts:22](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L22)

View options for the component's presentation layout

## Interface: CardSubmitEventData

Defined in: [src/definitions/components/card.ts:133](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L133)

#### Properties

#### lastFour

```ts
lastFour: string;
```

Defined in: [src/definitions/components/card.ts:137](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L137)

Last four digits of the card number

***

#### finalBIN

```ts
finalBIN: string;
```

Defined in: [src/definitions/components/card.ts:142](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L142)

Final Bank Identification Number (BIN) of the card

## Interface: ComponentHideEventData

Defined in: [src/definitions/index.ts:237](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L237)

#### Properties

#### reason

```ts
reason: "user_gesture";
```

Defined in: [src/definitions/index.ts:238](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/index.ts#L238)

## Interface: ExtendedCardConfiguration

Defined in: [src/definitions/components/card.ts:331](https://github.com/Fiksuruoka-fi/capacitor-adyen/blob/ffabd19c1edc9601edbb4928d7007b20706a6efe/src/definitions/components/card.ts#L331)

Extended Card component configuration including native options

#### See

https://docs.adyen.com/payment-methods/cards/web-component/#optional-configuration

#### Extends

- `CardConfiguration`

#### Properties

#### order?

```ts
optional order: Order;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3490

#### Inherited from

```ts
CardConfiguration.order
```

***

#### modules?

```ts
optional modules: {
  srPanel?: SRPanel;
  analytics?: IAnalytics;
  resources?: Resources;
  risk?: RiskElement;
};
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3491

#### srPanel?

```ts
optional srPanel: SRPanel;
```

#### analytics?

```ts
optional analytics: IAnalytics;
```

#### resources?

```ts
optional resources: Resources;
```

#### risk?

```ts
optional risk: RiskElement;
```

#### Inherited from

```ts
CardConfiguration.modules
```

***

#### isDropin?

```ts
optional isDropin: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3500

Identifies if the Element is the DropIn element

#### Inherited from

```ts
CardConfiguration.isDropin
```

***

#### paymentMethodId?

```ts
optional paymentMethodId: string;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3519

#### Inherited from

```ts
CardConfiguration.paymentMethodId
```

***

#### environment?

```ts
optional environment: string;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3522

#### Inherited from

```ts
CardConfiguration.environment
```

***

#### session?

```ts
optional session: Session;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3523

#### Inherited from

```ts
CardConfiguration.session
```

***

#### onComplete()?

```ts
optional onComplete: (state, element) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3524

#### Parameters

##### state

`any`

##### element

`UIElement`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onComplete
```

***

#### isInstantPayment?

```ts
optional isInstantPayment: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3525

#### Inherited from

```ts
CardConfiguration.isInstantPayment
```

***

#### icon?

```ts
optional icon: string;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3549

#### Inherited from

```ts
CardConfiguration.icon
```

***

#### amount?

```ts
optional amount: PaymentAmount;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3550

#### Inherited from

```ts
CardConfiguration.amount
```

***

#### secondaryAmount?

```ts
optional secondaryAmount: PaymentAmount;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3551

#### Inherited from

```ts
CardConfiguration.secondaryAmount
```

***

#### showPayButton?

```ts
optional showPayButton: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3556

Show/Hide pay button

#### Default Value

```ts
true
```

#### Inherited from

```ts
CardConfiguration.showPayButton
```

***

#### originalAction?

```ts
optional originalAction: PaymentAction;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:3583

Reference to the action object found in a /payments response. This, in most cases, is passed on to the onActionHandled callback

#### Inherited from

```ts
CardConfiguration.originalAction
```

***

#### beforeRedirect()?

```ts
optional beforeRedirect: (resolve, reject, redirectData) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6228

Called before the page redirect happens.
Allows you to perform any sort of action before redirecting the shopper to another page.

#### Parameters

##### resolve

() => `void`

##### reject

() => `void`

##### redirectData

###### url

`string`

###### method

`string`

###### data?

`any`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.beforeRedirect
```

***

#### beforeSubmit()?

```ts
optional beforeSubmit: (state, component, actions) => void | Promise<void>;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6243

Called when the shopper selects the Pay button (it only works on Sessions flow)

Allows you to add details which will be sent in the payment request to Adyen's servers.
For example, you can add shopper details like 'billingAddress', 'deliveryAddress', 'shopperEmail' or 'shopperName'

#### Parameters

##### state

`PaymentData`

##### component

`UIElement`

##### actions

`BeforeSubmitActions`

#### Returns

`void` \| `Promise`\<`void`\>

#### Inherited from

```ts
CardConfiguration.beforeSubmit
```

***

#### onPaymentCompleted()?

```ts
optional onPaymentCompleted: (data, component?) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6252

Called when the payment succeeds.

The first parameter is the sessions response (when using sessions flow), or the result code.

#### Parameters

##### data

`PaymentCompletedData`

##### component?

`UIElement`\<`UIElementProps`\>

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onPaymentCompleted
```

***

#### onPaymentFailed()?

```ts
optional onPaymentFailed: (data?, component?) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6262

Called when the payment fails.

The first parameter is populated when merchant is using sessions, or when the payment was rejected
with an object. (Ex: 'action.reject(obj)' ). Otherwise, it will be empty.

#### Parameters

##### data?

`PaymentFailedData`

session response or resultCode. It can also be undefined if payment was rejected without argument ('action.reject()')

##### component?

`UIElement`\<`UIElementProps`\>

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onPaymentFailed
```

***

#### onSubmit()?

```ts
optional onSubmit: (state, component, actions) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6273

Callback used in the Advanced flow to perform the /payments API call

The payment response must be passed to the 'resolve' function, even if the payment wasn't authorized (Ex: resultCode = Refused).
The 'reject' should be used only if a critical error occurred.

#### Parameters

##### state

`SubmitData`

##### component

`UIElement`

##### actions

`SubmitActions`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onSubmit
```

***

#### onAdditionalDetails()?

```ts
optional onAdditionalDetails: (state, component, actions) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6284

Callback used in the Advanced flow to perform the /payments/details API call.

The payment response must be passed to the 'resolve' function, even if the payment wasn't authorized (Ex: resultCode = Refused).
The 'reject' should be used only if a critical error occurred.

#### Parameters

##### state

`AdditionalDetailsData`

##### component

`UIElement`

Component submitting details. It is undefined when using checkout.submitDetails()

##### actions

`AdditionalDetailsActions`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onAdditionalDetails
```

***

#### onActionHandled()?

```ts
optional onActionHandled: (actionHandled) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6300

Callback called when an action (for example a QR code or 3D Secure 2 authentication screen) is shown to the shopper.

#### Parameters

##### actionHandled

`ActionHandledReturnObject`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onActionHandled
```

***

#### onChange()?

```ts
optional onChange: (state, component) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6301

#### Parameters

##### state

`OnChangeData`

##### component

`UIElement`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onChange
```

***

#### onError()?

```ts
optional onError: (error, component?) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6310

Callback called in two different scenarios:
- when a critical error happened (network error; implementation error; script failed to load)
- when the shopper cancels the payment flow in payment methods that have an overlay (GooglePay, PayPal, ApplePay)

#### Parameters

##### error

`AdyenCheckoutError`

##### component?

`UIElement`\<`UIElementProps`\>

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onError
```

***

#### onEnterKeyPressed()?

```ts
optional onEnterKeyPressed: (activeElement, component) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6317

Called when a Component detects, or is told by a SecuredField, that the Enter key has been pressed.
- merchant set config option

#### Parameters

##### activeElement

`Element`

##### component

`UIElement`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onEnterKeyPressed
```

***

#### onPaymentMethodsRequest()?

```ts
optional onPaymentMethodsRequest: (data, actions) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6327

Callback called when it is required to fetch/update the payment methods list.
It is currently used mainly on Giftcard flow (Partial orders), since the payment method list might change depending on the amount left to be paid

The /paymentMethods response must be passed to the 'resolve' function

#### Parameters

##### data

`PaymentMethodsRequestData`

##### actions

###### resolve

(`response`) => `void`

###### reject

() => `void`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onPaymentMethodsRequest
```

***

#### onOrderUpdated()?

```ts
optional onOrderUpdated: (data) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6337

Called when the gift card balance is less than the transaction amount.
Returns an Order object that includes the remaining amount to be paid.
https://docs.adyen.com/payment-methods/gift-cards/web-component?tab=config-sessions_1

#### Parameters

##### data

###### order

`Order`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onOrderUpdated
```

***

#### autoFocus?

```ts
optional autoFocus: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6900

Automatically shift the focus from one field to another. Usually happens from a valid Expiry Date field to the Security Code field,
but some BINS also allow us to know that the PAN is complete, in which case we can shift focus to the date field

#### Default Value

`true`

- merchant set config option

#### Inherited from

```ts
CardConfiguration.autoFocus
```

***

#### billingAddressAllowedCountries?

```ts
optional billingAddressAllowedCountries: string[];
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6905

Config t olimit the countries that will show in the country dropdown
- merchant set config option

#### Inherited from

```ts
CardConfiguration.billingAddressAllowedCountries
```

***

#### billingAddressMode?

```ts
optional billingAddressMode: "none" | "full" | "partial";
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6912

If billingAddressRequired is set to true, you can set this to partial to require the shopper's postal code instead of the full address.

#### Default Value

```ts
full

- merchant set config option
```

#### Inherited from

```ts
CardConfiguration.billingAddressMode
```

***

#### billingAddressRequired?

```ts
optional billingAddressRequired: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6919

Show Address fields

#### Default Value

`false`

- merchant set config option

#### Inherited from

```ts
CardConfiguration.billingAddressRequired
```

***

#### billingAddressRequiredFields?

```ts
optional billingAddressRequiredFields: string[];
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6924

Config to specify which address field are required
- merchant set config option

#### Inherited from

```ts
CardConfiguration.billingAddressRequiredFields
```

***

#### brandsConfiguration?

```ts
optional brandsConfiguration: CardBrandsConfiguration;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6941

Configuration specific to brands
- merchant set config option

#### Inherited from

```ts
CardConfiguration.brandsConfiguration
```

***

#### challengeWindowSize?

```ts
optional challengeWindowSize: ChallengeWindowSize;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6955

Defines the size of the challenge Component

01: [250px, 400px]
02: [390px, 400px]
03: [500px, 600px]
04: [600px, 400px]
05: [100%, 100%]

#### Default Value

```ts
'02'

- merchant set config option
```

#### Inherited from

```ts
CardConfiguration.challengeWindowSize
```

***

#### clickToPayConfiguration?

```ts
optional clickToPayConfiguration: ClickToPayProps;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6960

Configuration for Click to Pay
- merchant set config option

#### Inherited from

```ts
CardConfiguration.clickToPayConfiguration
```

***

#### fastlaneConfiguration?

```ts
optional fastlaneConfiguration: FastlaneSignupConfiguration;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6964

Configuration for displaying the Fastlane consent UI.

#### Inherited from

```ts
CardConfiguration.fastlaneConfiguration
```

***

#### data?

```ts
optional data: {
  holderName?: string;
  billingAddress?: Partial<AddressData>;
};
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6979

Object that contains placeholder information that you can use to prefill fields.
- merchant set config option

#### holderName?

```ts
optional holderName: string;
```

#### billingAddress?

```ts
optional billingAddress: Partial<AddressData>;
```

#### Inherited from

```ts
CardConfiguration.data
```

***

#### disableIOSArrowKeys?

```ts
optional disableIOSArrowKeys: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:6995

Turn on the procedure to force the arrow keys on an iOS soft keyboard to always be disabled

#### Default Value

`false`

- merchant set config option

#### Inherited from

```ts
CardConfiguration.disableIOSArrowKeys
```

***

#### disclaimerMessage?

```ts
optional disclaimerMessage: DisclaimerMsgObject;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7000

Object to configure the message and text for a disclaimer message, added after the Card input fields
- merchant set config option

#### Inherited from

```ts
CardConfiguration.disclaimerMessage
```

***

#### doBinLookup?

```ts
optional doBinLookup: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7007

Allow binLookup process to occur

#### Default Value

`true`

- merchant set config option

#### Inherited from

```ts
CardConfiguration.doBinLookup
```

***

#### enableStoreDetails?

```ts
optional enableStoreDetails: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7012

Config option related to whether we set storePaymentMethod in the card data, and showing/hiding the "store details" checkbox
- merchant set config option

#### Inherited from

```ts
CardConfiguration.enableStoreDetails
```

***

#### exposeExpiryDate?

```ts
optional exposeExpiryDate: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7022

Allows SF to return an unencrypted expiryDate
- merchant set config option

#### Inherited from

```ts
CardConfiguration.exposeExpiryDate
```

***

#### forceCompat?

```ts
optional forceCompat: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7027

Force securedFields to use the 'compat' version of JWE. (Use case: running custom http:// test environment
- merchant set config option

#### Inherited from

```ts
CardConfiguration.forceCompat
```

***

#### fundingSource?

```ts
optional fundingSource: FundingSourceKeys;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7034

Funding source field populated when 'splitCardFundingSources' is configured in `sessions/` call
This value is automatically set in Drop-in integration. For standalone integration, it can be set manually.
When provided, it ensures the component loads configuration specific to that funding source (e.g. credit, debit, prepaid)
- merchant set config option

#### Inherited from

```ts
CardConfiguration.fundingSource
```

***

#### hasHolderName?

```ts
optional hasHolderName: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7046

Show/hide the card holder name field
- merchant set config option

#### Inherited from

```ts
CardConfiguration.hasHolderName
```

***

#### hideCVC?

```ts
optional hideCVC: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7056

Show/hide the Security Code field
- merchant set config option

#### Inherited from

```ts
CardConfiguration.hideCVC
```

***

#### holderNameRequired?

```ts
optional holderNameRequired: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7061

Whether the card holder name field will be required
- merchant set config option

#### Inherited from

```ts
CardConfiguration.holderNameRequired
```

***

#### installmentOptions?

```ts
optional installmentOptions: InstallmentOptions;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7071

Configure the installment options for the card
- merchant set config option

#### Inherited from

```ts
CardConfiguration.installmentOptions
```

***

#### keypadFix?

```ts
optional keypadFix: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7078

Implements a workaround for iOS/Safari bug where keypad doesn't retract when SF paymentMethod is no longer active

#### Default Value

`true`

- merchant set config option

#### Inherited from

```ts
CardConfiguration.keypadFix
```

***

#### legacyInputMode?

```ts
optional legacyInputMode: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7090

For some scenarios make the card input fields (PAN, Expiry Date, Security Code) have type="tel" rather than type="text" inputmode="numeric"

#### Default Value

`false`

- merchant set config option

#### Inherited from

```ts
CardConfiguration.legacyInputMode
```

***

#### maskSecurityCode?

```ts
optional maskSecurityCode: boolean;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7097

Adds type="password" to the Security code input field, causing its value to be masked

#### Default Value

`false`

- merchant set config option

#### Inherited from

```ts
CardConfiguration.maskSecurityCode
```

***

#### minimumExpiryDate?

```ts
optional minimumExpiryDate: string;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7103

Specify the minimum expiry date that will be considered valid

- merchant set config option

#### Inherited from

```ts
CardConfiguration.minimumExpiryDate
```

***

#### onAddressLookup?

```ts
optional onAddressLookup: OnAddressLookupType;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7114

Function used to perform 3rd party Address lookup
- merchant set config option

#### Inherited from

```ts
CardConfiguration.onAddressLookup
```

***

#### onAddressSelected?

```ts
optional onAddressSelected: OnAddressSelectedType;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7119

Function used to handle the selected address from 3rd party Address lookup
- merchant set config option

#### Inherited from

```ts
CardConfiguration.onAddressSelected
```

***

#### onBinLookup()?

```ts
optional onBinLookup: (event) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7124

After binLookup call - provides the brand(s) we detect the user is entering, and if we support the brand(s)
- merchant set config option

#### Parameters

##### event

`CardBinLookupData`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onBinLookup
```

***

#### onBinValue()?

```ts
optional onBinValue: (event) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7129

Provides the BIN Number of the card (up to 6 digits), called as the user types in the PAN.
- merchant set config option

#### Parameters

##### event

`CardBinValueData`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onBinValue
```

***

#### onBlur()?

```ts
optional onBlur: (event) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7134

Called when a field loses focus.
- merchant set config option

#### Parameters

##### event

`CardFocusData` | `ComponentFocusObject`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onBlur
```

***

#### onBrand()?

```ts
optional onBrand: (event) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7139

Called once we detect the card brand.
- merchant set config option

#### Parameters

##### event

`CardBrandData`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onBrand
```

***

#### onConfigSuccess()?

```ts
optional onConfigSuccess: (event) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7144

Called once the card input fields are ready to use.
- merchant set config option

#### Parameters

##### event

`CardConfigSuccessData`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onConfigSuccess
```

***

#### onAllValid()?

```ts
optional onAllValid: (event) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7149

Called when *all* the securedFields becomes valid
 Also called again if one of the fields moves out of validity.

#### Parameters

##### event

`CardAllValidData`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onAllValid
```

***

#### onFieldValid()?

```ts
optional onFieldValid: (event) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7155

Called when a field becomes valid and also if a valid field changes and becomes invalid.
For the card number field, it returns the last 4 digits of the card number.
- merchant set config option

#### Parameters

##### event

`CardFieldValidData`

#### Returns

`void`

#### Inherited from

```ts
CardConfiguration.onFieldValid
```

***

#### onFocus()?

```ts
optional onFocus: (event) => void;
```

Defined in: node\_modules/@adyen/adyen-web/dist/es/index.d.ts:7160

Called when a field gains focus.
- merchant set config option

#### Parameters

##### event

`CardFocusData` | `ComponentFocusObject`

#### Returns

`void`

#### Inherit