Airwallex logo
Airwallex logo

Guest user checkout

This page describes how to embed a Korean Local Cards - Split Card Element on your payment page to accept payments.

How it works

The diagram below depicts the information flow in a Korean Local Cards - Split Card Elements integration. Korean Local Cards - Split Card Element Guest Checkout Diagram

Before you begin

Before you implement the integration, consider the following:

Step 1: Set up the server to create a PaymentIntent

When the shopper begins the checkout process, you will need to create a PaymentIntent object to indicate your intent to collect payment from the shopper.

When the checkout page loads, on your server, call Create a PaymentIntent API with an amount and currency. Always decide how much to charge on the server side, a trusted environment, as opposed to the client. This prevents malicious shoppers from being able to alter the payment amount.

Provide return_url in Create a PaymentIntent API to indicate where Airwallex should redirect the shopper after completing the payment, whether successful or otherwise.

The PaymentIntent’s id and client_secret are returned in the response — these parameters let you confirm the payment and update card details on the client, without allowing manipulation of sensitive information, like payment amount.

Shell
1curl --request POST \
2--url 'https://api-demo.airwallex.com/api/v1/pa/payment_intents/create' \
3--header 'Content-Type: application/json' \
4--header 'Authorization: Bearer <your_bearer_token>' \
5--data-raw '{
6    "request_id": "00e8df19-7087-4209-b50b-067d6a39ee72",
7    "amount": 100,
8    "currency": "CNY",
9    "merchant_order_id": "Merchant_Order_a7f9baf8-884a-4def-ba85-d1f9be83470a",   
10    "return_url": "http://www.merchant.com/result"
11}'

Step 2: Initialize Airwallex on your checkout page

First, you will need to import Airwallex.js and then initialize the package. For details, see Initialize Airwallex JS.

Step 3: Add the Korean Local Cards - Split Card Elements to your checkout page

To embed the Korean Local Cards - Split Card Elements into your checkout page, you will need to create an empty container, create the Elements and then mount the Elements to the container.

Define the payment form

First, create an empty container div with a unique id in your payment form and a Submit button to trigger the payment request. Ensure that the payment form only contains one Element with this unique id. Airwallex inserts an iframe into this div that securely collects card information.

HTML
1<!-- Add empty containers for each card input element  -->
2<div>
3  <div>Card number</div>
4  <div id="krCardNumber"></div>
5</div>
6<!-- card type radio group -->
7<!-- radio value should be either 'personal' or 'company' -->
8<div>
9  <div>Card type</div>
10  <div>
11    <label>
12      <!-- set 'personal' as default -->
13      <input type="radio" value="personal" name="cardTypeRadio" checked />
14      <span>Personal</span>
15    </label>
16    <label>
17      <input type="radio" value="company" name="cardTypeRadio" />
18      <span>Company</span>
19    </label>
20  </div>
21</div>
22<div>
23  <!-- When cardType is personal -->
24  <div id="krCardDob">Date of Birth</div>
25  <!-- When cardType is company -->
26  <!-- <div id='krCardBusinessNo'>Business number</div> -->
27

28  <div id="krCardIdentifier"></div>
29</div>
30<div>
31  <div>Expriy Date</div>
32  <div id="krCardExpiry"></div>
33</div>
34<div>
35  <div>First two digits of password</div>
36  <div id="krCardPswFirstTwo"></div>
37</div>
38

39<!-- Add a submit button to trigger the payment request -->
40<button id="submit">Submit</button>

Create the Korean Local Cards - Split Card Elements

When the payment form has loaded, call createElement(type, options) by specifying the Element type as krCardNumber, krCardExpiry, krCardIdentifier and krCardPswFirstTwo respectively to create card number, expiry date, Cardholder DoB/Company Business Number and Card PIN first-2 digits Elements. Ensure that the payment form only contains one Element with these ids.

JavaScript
1// Create Korean local card - split card elements
2import { createElement } from '@airwallex/components-sdk';
3const krCardNumber = createElement('krCardNumber');
4const krCardIdentifier = createElement('krCardIdentifier', {
5  /* should match the default active radio button */
6  cardType: 'personal',
7});
8const krCardExpiry = createElement('krCardExpiry');
9const krCardPswFirstTwo = createElement('krCardPswFirstTwo');

Mount the Split Card Elements

Call mount() with the id of the div to mount the Element to the DOM. The Elements should only be mounted once in a single payment flow.

JavaScript
1// Mount split card elements
2krCardNumber.mount('krCardNumber'); // Injects iframe into the Card Number Element container
3krCardIdentifier.mount('krCardIdentifier'); // Injects iframe into the Card Identifier Element container
4krCardExpiry.mount('krCardExpiry'); // Injects iframe into the Expiry Element container
5krCardPswFirstTwo.mount('krCardPswFirstTwo'); // Injects iframe into the PSW First Two Element container

Optionally, you can provide the PaymentIntent id and client_secret in createElement() JS or create a PaymentIntent after the shopper clicks the Submit button and pass the details in confirm() JS.

JavaScript
1// Create Korean local card - split card elements
2import { createElement } from '@airwallex/components-sdk';
3const krCardNumber = createElement('krCardNumber', {
4  id: 'replace-with-your-intent-id',
5  client_secret: 'replace-with-your-client-secret',
6});
7const krCardIdentifier = createElement('krCardIdentifier', {
8  /* should match the default active radio button */
9  cardType: 'personal',
10});
11const krCardExpiry = createElement('krCardExpiry');
12const krCardPswFirstTwo = createElement('krCardPswFirstTwo');

Step 4: Confirm the PaymentIntent

When the shopper clicks the Submit button, call confirm() JS by passing the id and client_secret returned in Create a PaymentIntent, to complete the payment.

cardNumber.confirm(options);

You can also pass other options in confirm() depending on your payment flow. For details, see confirm() JS.

Handle the submit event

Add an event handler to the Submit button and listen to the form’s submit event to know when to confirm the payment.

JavaScript
1

2document.getElementById('submit').addEventListener('click', () => {
3  cardNumber.confirm({
4    intent_id: 'replace-with-your-intent-id', // Payment Intent ID
5    client_secret: 'replace-with-your-client-secret', // Client Secret
6  }).then((response) => {
7    // STEP #6b: Listen to the payment confirmation response
8    // Handle response
9    window.alert(JSON.stringify(response));
10  });
11});
12

13## Test your integration
14

15<Alert variant="WARNING" heading="Note">
16Korean Local Cards do not operate a sandbox environment. Please reach out to your Airwallex account manager and solution engineer for arranging the testing.
17</Alert>
18

19## Troubleshooting
20

21For troubleshooting tips, see [Airwallex.js error codes](/developer-tools/sdks/airwallex.js/error-codes).
22
Was this page helpful?