Skip to content

chore(POCP-1226): support 8-digit IINs in card event #270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lukasz-k-bieszczad-cko wants to merge 3 commits into
base: master
Choose a base branch
from
+19 −11
Open

chore(POCP-1226): support 8-digit IINs in card event #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
25cf56a
chore(POCP-1226): support 8-digit IINs in card event
lukasz-k-bieszczad-cko Jul 20, 2026
a1bf701
update example
lukasz-k-bieszczad-cko Jul 20, 2026
42ac592
v1.9.8
lukasz-k-bieszczad-cko Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions examples/card-form/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
function (form) {
let preferredCardType = null;
form.getNumberField().on("input", function (e) {
if (e.card_number_length == 6) {
if (e.card_number_length == 8) {
client.getCardInformation(
e.card_iin,
function(cardInfo) {
Expand All @@ -65,7 +65,7 @@
const radioGroup = document.createElement('div')
radioGroup.className = 'combo-card-types'
radioGroup.style.cssText = 'margin: 15px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background: #f9f9f9;'

radioGroup.innerHTML = `
<h4 style="margin: 0 0 10px 0; color: #333;">Select Card Type:</h4>
${cardInfo.combo_card_types.map((type, index) => `
Expand All @@ -75,11 +75,11 @@ <h4 style="margin: 0 0 10px 0; color: #333;">Select Card Type:</h4>
</label>
`).join('')}
`

// Insert before the Pay button
const payButton = document.querySelector('.submit-button')
payButton.parentNode.insertBefore(radioGroup, payButton)

// Add event listener to track selection changes
const radioButtons = radioGroup.querySelectorAll('input[name="cardType"]')
radioButtons.forEach(radio => {
Expand All @@ -88,7 +88,7 @@ <h4 style="margin: 0 0 10px 0; color: #333;">Select Card Type:</h4>
console.log("User selected card type:", preferredCardType)
})
})

// Set initial value
preferredCardType = null
}
Expand All @@ -98,7 +98,7 @@ <h4 style="margin: 0 0 10px 0; color: #333;">Select Card Type:</h4>
}
)
}

document.getElementById("errors").innerHTML = ""
})

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "processout.js",
"version": "1.9.7",
"version": "1.9.8",
"description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.",
"scripts": {
"build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js",
Expand Down
7 changes: 6 additions & 1 deletion src/dynamic-checkout/payment-methods/card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -918,7 +918,12 @@ module ProcessOut {
return
}

const isAllowedIin = restrictToIins.indexOf(iin) !== -1
// card_iin may carry more digits than the configured entries (IINs can
// be 6 or 8 digits), so match on prefix: an allowed entry matches when
// the detected IIN starts with it.
const isAllowedIin = restrictToIins.some(function (allowedIin) {
return allowedIin.length > 0 && iin.substring(0, allowedIin.length) === allowedIin
})
Comment thread
lukasz-k-bieszczad-cko marked this conversation as resolved.
Comment on lines +921 to +926

@roshan-gorasia-cko roshan-gorasia-cko Jul 23, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In API we have a check per scheme if we can return 8 digits - we should port that to the JS side otherwise we risk over exposing

(e.g. IIRC no Amex can expose 8 digit bins)

@lukasz-k-bieszczad-cko lukasz-k-bieszczad-cko Jul 23, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you are right. Good catch. Our getIIN currently emits 8 always. Maybe I could port the scheme allow-list into Card.getIIN so the local card_iin event respects the same cap per scheme.


this.setCardRestrictionState(!isAllowedIin)
}
Expand Down
4 changes: 2 additions & 2 deletions src/processout/card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,8 +456,8 @@ module ProcessOut {
number = Card.parseNumber(number); // Remove potential spaces

var l = number.length;
if (l > 6)
l = 6;
if (l > 8)
l = 8;
return number.substring(0, l);
}

Expand Down
5 changes: 4 additions & 1 deletion src/processout/processout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1676,7 +1676,10 @@ module ProcessOut {
return
}

const iin = cardNumber.substring(0, 6)
// Support up to 8-digit IINs (some networks issue 8-digit IINs, which
// yield more accurate issuer information); fall back to whatever is
// available when fewer digits were provided.
const iin = cardNumber.substring(0, 8)

@roshan-gorasia-cko roshan-gorasia-cko Jul 23, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we return 8 digit bin in a new field? Unsure if this classes as a breaking change for merchants not expecting it

@roshan-gorasia-cko roshan-gorasia-cko Jul 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah wait, I just saw where this comes from - our backend call I guess?

There might be another angle to investigate here - in checkout-cdn where we host the card entry form fields, we have a "local" way of surfacing the bin to merchants while the card is being typed. Technically we should have all we need there

@lukasz-k-bieszczad-cko lukasz-k-bieszczad-cko Jul 23, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the card_iin is emitted client-side from Field.ts:getFieldData() in checkout-cdn via (that uses Card.getIIN), no backend call. As far as I tried testing it locally with this example card payment form everything was working fine.

@roshan-gorasia-cko roshan-gorasia-cko Jul 23, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But this bit you've updated is only ring fenced if the merchant wants to retrieve IIN data using our API endpoint no?

The checkout-cdn card form is pure local based on the card number as it's typed

const apiEndpoint = `iins/${iin}`

this.apiRequest(
Expand Down
Loading