Bin Discount is a feature on XPay that allows merchants to configure discounts based on card BINs (first 6 or 8 digits of a card). Merchants can apply discounts for specific BINs using either a fixed value or a percentage of the order price.

If a merchant has configured bin discounts on the XPay portal, then when a user enters their card in the SDK:

• In React, the onBinDiscount event will return discount details.
• In Vanilla JavaScript, the binDiscount event will return discount details.

Using these details, you need to apply the discount to the order.

How to Listen for the Event

Vanilla JavaScript (binDiscount Event)

In Vanilla JavaScript, you can listen for the binDiscount event using the xpay.on() method:

xpay.on('binDiscount', function (event) {
    console.log(event, 'bin discount event');
    // Apply the discount based on event data
});

React.js (onBinDiscount Event)

In React.js, you can listen for the event using the onBinDiscount prop inside the <PaymentElement /> component:

<PaymentElement
    onBinDiscount={(data)=> console.log("discount event data", data)}
/>

Event Response Example

When a bin discount is applied, the event will return a response in the following format:

{
  "account_id": "0ddb82950784f875",
  "bank_acronym": "HBL",
  "bank_logo": "<https://js.xstak.com/assets/logos/HBL.png>",
  "bank_name": "Habib Bank Limited",
  "bin": 512345,
  "createdAt": "2025-01-06T09:53:45.148Z",
  "discount_type": "percentage",
  "discount_value": 70,
  "hash": "df49774ea1bcf4ff15ab18af6a989fc84e2e821b19700fb8bc9aa9577d57abe4",
  "id": "d1dffc51-7b7c-4af0-b306-a8cf76c344d4",
  "on_discounted_items": false,
  "rule_enabled": true,
  "store_id": "64f06b2fcabbf492b6d3a1e1",
  "updatedAt": "2025-01-06T09:53:45.148Z",
  "__v": 0,
  "_id": "677ba829b48208d8392c7633"
}

Webhook Response Example

When the order payment is captured, you will receive a webhook response containing the transaction details, including the unique hash for tracking discounts.