How can I add a discount based on the card my customers use during checkout?

Merchants can do this with either by leveraging Embedded Elements or Native API

Embedded Elements integration (Recommended)

Merchants can leverage the FE onChange event to diagnose card BIN details 

1. Merchants manages the checkout page on its own and offers the discount campaigns

2. Shopper selects the campaign, client updates the payment amount on their FE correspondingly (no payments created yet)

3. Merchant creates Airwallex Payment Element, shopper inputs card details (no payments created yet)

4. Airwallex Payment Elements sends out onChange event with card BIN details

5. Merchant listens to the onChange event to capture the digits

   • Add an onChange event listener to listen to the changes in each of the input fields. An example is provided below:

     domElement.addEventListener('onChange', (event) => {
       /*
         ... Handle event
       */
       window.alert(event.detail);
     });

   • In the onChange event, you can find the first-8 digits of the card recorded in the cardBin field

     • the 8 digits will be returned when shopper enters full card number and we have verified that this is a valid card

     • sample:

{"type":"cardNumber","code":"onChange","complete":true,"empty":false,"brand":"visa","cvcLength":3,"cardBin":"42424242"}

6. If the card BIN matches with the applicable rules for the campaign, then merchant will allow the shopper to click "Pay" and formally create the paymentIntent with amount = real amount (discount applied) and process the payment

7. If the card BIN does not match with the rules of the campaign, then the merchant will show the relevant errors to the shopper to reject the payment request

Native API Integration 

1. Merchant manages the checkout page on its own and offers the discount campaigns

2. Shopper selects the campaign, client updates the payment amount on their FE correspondingly (no payments created yet)

3. Shopper inputs card details in the page and client directly captures Card Number and verifies card BIN range (no payments created yet)

4. If the card BIN matches with the applicable rules for the campaign, then the merchant will allow the shopper to click "Pay" and formally create the paymentIntent with amount = real amount (discount applied) and process the payment

5. If the card BIN does not match with the rules of the campaign, then the merchant will show the relevant errors to the shopper to reject the payment request

Alternative solution for Embedded Elements integration

Merchants can leverage the payment consent & MIT logic to diagnose card BIN details

1. Merchant manages the checkout page on its own and offers the discount campaigns

2. Shopper selects the campaign, client updates the payment amount on their FE correspondingly (no payments created yet)

3. Merchant creates Airwallex Payment Element, shopper inputs card details (no payments created yet)

4. Shopper clicks "Pay", client creates Customer&Payment consent and verifies the Payment consent with 0 amount auth

5. Airwallex returns authorization result as well as card BIN details

6. If the card BIN matches with the applicable rules for the campaign, then the merchant will formally create the paymentIntent with amount = real amount (discount applied) and confirm with the consent id to process the payment

7. If the card BIN does not match with the rules of the campaign, then client will show errors to the shopper