1import { init, createElement } from '@airwallex/components-sdk';
2
3await init({
4  env: 'prod',
5  enabledElements: ['payments'],
6});
7
8const element = await createElement('cardNumber', {
9  showIcon: true, // Optional: Show card brand icon
10});
11
12element.mount('card-number-container');

1element.blur();

1element.clear();

1element.confirm({
2  client_secret: 'replace-with-your-client-secret',
3});

1element.createPaymentConsent({
2  client_secret: 'replace-with-your-client-secret',
3});

1element.createPaymentMethod({
2  client_secret: 'replace-with-your-client-secret',
3  customer_id: 'replace-with-your-customer-id',
4  payment_method: {
5    card: {
6      name: 'John Doe',
7    },
8  },
9});

1element.destroy();

1element.focus();

1element.getBinInfo('replace-with-your-client-secret');

1element.getPaymentIntent('replace-with-your-intent-id', 'replace-with-your-client-secret');

1// There are two ways to mount the element:
2// 1. Call with the container DOM id
3element.mount('container-dom-id');
4
5// 2. Find the created DOM in the existing HTML and call with the container DOM element
6const containerElement = document.getElementById('container-dom-id');
7element.mount(containerElement);

1element.on('change', (e) => {
2   const { completed, empty, error } = e.detail;
3  // Handle change event
4});

1element.unmount();

1element.update({
2  autoCapture: false,
3});

1element.verifyConsent({
2  client_secret: 'replace-with-your-client-secret',
3  currency: 'replace-with-your-currency',
4});