jb-payment-input

jb-payment-input is a payment-focused extension of jb-input for Iranian card numbers (شماره کارت) and SHABA (شبا)/IBAN values.

• Supports CARD mode for 16-digit card numbers (شماره کارت).
• Supports SHABA mode for Iranian SHABA (شبا) values (IR + 24 digits).
• Keeps .value as the canonical unseparated value and shows a grouped displayValue.
• Accepts Persian/Arabic digits and stores English digits.
• Supports smart paste by extracting the payment value from text with unrelated characters.
• Includes built-in card length, SHABA length, and SHABA format validation.
• Supports optional Iranian bank logo detection with the bank-indicator companion component.

When to use

Use jb-payment-input for Iranian payment fields that collect bank card numbers (شماره کارت) or SHABA (شبا) numbers.

Use jb-number-input for general numeric amounts. Use jb-input when the value is not a card or SHABA value.

Demo

• CodePen
• Storybook

Using With JS Frameworks

Installation

npm i jb-payment-input

import 'jb-payment-input';

<jb-payment-input input-type="CARD" label="Card number (شماره کارت)"></jb-payment-input>
<jb-payment-input input-type="SHABA" label="SHABA number (شبا)"></jb-payment-input>

CDN

<script src="https://unpkg.com/jb-input/dist/jb-input.umd.js"></script>
<script src="https://unpkg.com/jb-payment-input/dist/jb-payment-input.umd.js"></script>

API reference

jb-payment-input extends jb-input. For shared attributes, properties, events, methods, validation, form association, slots, and CSS parts, see the jb-input API.

Payment attributes

| name | type | default | description | | --- | --- | --- | --- | | input-type | 'CARD' \| 'SHABA' | CARD | Payment value mode. Invalid values fall back to CARD. | | separator | string | space | Separator used in displayValue, such as space, -, or _. |

Payment properties

| name | type | default | description | | --- | --- | --- | --- | | paymentInputType | 'CARD' \| 'SHABA' | CARD | Payment value mode. Invalid values fall back to CARD. | | separatorString | string | space | Separator used in displayValue. Empty string shows the value without grouping separators. | | value | string | "" | Canonical value inherited from jb-input; English digits and no separator. | | displayValue | string | "" | Rendered value inherited from jb-input; grouped with separatorString. |

Value and display value

In CARD mode, the component keeps only card number (شماره کارت) digits and truncates to 16 digits.

const paymentInput = document.querySelector('jb-payment-input');

paymentInput.paymentInputType = 'CARD';
paymentInput.value = '6037991234567890';

console.log(paymentInput.value); // "6037991234567890"
console.log(paymentInput.displayValue); // "6037 9912 3456 7890"

In SHABA (شبا) mode, the component keeps IR plus up to 24 digits. If the user enters only digits, IR is added automatically.

paymentInput.paymentInputType = 'SHABA';
paymentInput.value = '120000000000000000000000';

console.log(paymentInput.value); // "IR120000000000000000000000"
console.log(paymentInput.displayValue); // "IR12 0000 0000 0000 0000 0000 00"

Input type

<jb-payment-input input-type="CARD"></jb-payment-input>
<jb-payment-input input-type="SHABA"></jb-payment-input>

const paymentInput = document.querySelector('jb-payment-input');

paymentInput.paymentInputType = 'CARD';
paymentInput.paymentInputType = 'SHABA';

Separator

The default separator is a space.

<jb-payment-input input-type="CARD" separator="-"></jb-payment-input>

const paymentInput = document.querySelector('jb-payment-input');

paymentInput.separatorString = '-'; // 6037-9912-3456-7890
paymentInput.separatorString = '_'; // 6037_9912_3456_7890
paymentInput.separatorString = ''; // 6037991234567890

Bank indicator

Use bank-indicator inside the payment input to show a detected Iranian bank logo from the first six card digits.

import 'jb-payment-input';
import 'jb-payment-input/bank-indicator';

<jb-payment-input input-type="CARD" label="Card number" message="With bank indicator">
  <bank-indicator slot="end-section"></bank-indicator>
</jb-payment-input>

You can also use the bank indicator standalone by setting a six-digit prefix.

<bank-indicator prefix="603799"></bank-indicator>

For standalone bank indicator usage, see bank-indicator README.

Validation

Built-in validation depends on paymentInputType:

| type | built-in validation | | --- | --- | | CARD | Empty or exactly 16 digits. | | SHABA | Empty or exactly 26 characters in IR + 24 digit SHABA (شبا) format. |

Use the inherited validation.list for custom rules.

const paymentInput = document.querySelector('jb-payment-input');

paymentInput.validation.list = [
  {
    validator: /^603799.*$/g,
    message: 'Only Melli bank cards are accepted',
  },
  {
    validator: ({ value }) => value !== '5041373111111111',
    message: 'This card is banned',
  },
  {
    validator: ({ displayValue, value }) => {
      if (value.startsWith('111111')) {
        return 'This bank is not accepted';
      }
      if (displayValue.startsWith('2222 2222')) {
        return 'This displayed card range is not accepted';
      }
      return true;
    },
    message: 'Invalid card',
  },
];

Events

Payment input events are inherited from jb-input.

paymentInput.addEventListener('input', (event) => {
  console.log(event.target.value);
});

paymentInput.addEventListener('change', (event) => {
  console.log(event.target.value);
});

paymentInput.addEventListener('enter', (event) => {
  console.log(event.target.value);
});

CSS variables

jb-payment-input uses jb-input internally. jb-input CSS variables and parts also apply.

bank-indicator supports:

| CSS variable name | description | | --- | --- | | --bank-indicator-padding | Bank logo padding. Default is 0.5rem 1rem. |

bank-indicator {
  --bank-indicator-padding: 0.375rem 0.75rem;
}

Accessibility notes

• Shared label, message, validation, form association, focus, slots, and accessibility behavior come from jb-input.
• The inner input direction is set to ltr for payment values.
• Form submission uses the canonical .value, not displayValue.

Related Docs

• See jb-payment-input/react if you want to use this component in a React app.
• See jb-input for inherited API and styling.
• See All JB Design System Component List for more components.
• Use Contribution Guide if you want to contribute to this component.

AI agent notes

• Import jb-payment-input once before using <jb-payment-input>.
• Import jb-payment-input/bank-indicator before using <bank-indicator>.
• Use input-type="CARD" or paymentInputType = 'CARD' for card numbers.
• Use input-type="SHABA" or paymentInputType = 'SHABA' for SHABA values.
• Read .value for the canonical English-digit value without separators; use .displayValue only for rendered formatted text.
• Use separator / separatorString for visual grouping only; it is removed from .value.
• This package includes custom-elements.json and points to it with the package.json customElements field. The field is documented by the Custom Elements Manifest project in Referencing manifests from npm packages.
• In custom-elements.json, exports.kind: "js" describes JavaScript/TypeScript exports and exports.kind: "custom-element-definition" maps tag names such as jb-payment-input and bank-indicator to their implementation classes.