Jb-payment-input-react NPM

JBPaymentInput React component

!WARNING
this package is deprecated and moved to jb-payment-input/react

this component is React.js wrapper for jb-payment-input web component

payment info input react component with this benefit:

easy to add custom regex or function validation.
multiple validation with different message.
support both RTL and LTR.
add label and message in UX friendly format.
customizable ui with css variable so you can have multiple style in different scope of your app.
support both card number and shaba number

Demo : Demo: codeSandbox preview for just see the demo and codeSandbox editor if you want to see and play with code

install

using npm

npm i jb-payment-input-react

in your jsx file

import {JBPaymentInput} from 'jb-payment-input-react';

<JBPaymentInput  label="card number" inputType="CARD"></JBPaymentInput>
<JBPaymentInput  label="shaba number" inputType="SHABA"></JBPaymentInput>

events

onChange

    <JBPaymentInput onChange={(event) => console.log(event.target.value)}></JBPaymentInput>

onKeyUp

    <JBPaymentInput onKeyUp={(event) => console.log(event.target.value)}></JBPaymentInput>

onEnter

    //when user press Enter button
    <JBPaymentInput onEnter={(event) => console.log(event.target.value)}></JBPaymentInput>

onKeydown

    <JBPaymentInput onKeydown={(event) => console.log(event.target.value)}></JBPaymentInput>

onFocus

    <JBPaymentInput onFocus={(event) => console.log(event.target.value)}></JBPaymentInput>

onBlur

    <JBPaymentInput onBlur={(event) => console.log(event.target.value)}></JBPaymentInput>

set validation

you can set validation to your input by creating a validationList array and passing in to validationList props:

    const validationList = [
        {
            validator: /.{3}/g,
            message: 'عنوان حداقل باید سه کاکتر طول داشته باشد'
        },
        //you can use function as a validator too
        {
            validator: ({displayValue,value})=>{return value !== "50413731111111"},
            message: 'this id card in banned'
        },
        {
            validator: ({displayValue,value})=>{
                if(value.startsWith('11111111')){
                    return 'we dont accept foo bank cards'
                }
                if(displayValue.startsWith('2222 2222')){
                    return 'we dont accept bar bank cards'
                }
                if(value.startsWith('3333')){
                    return false
                }
                return true
            },
            message: 'default message when return false'
        },
    ]

    <JBPaymentInput validationList={validationList}></JBPaymentInput>

check validation

you can check if an input value meet your validation standard by creating a ref of the element using React.createRef().

    const elementRef = React.createRef();
    const isValid = elementRef.current.validation.checkValidity(true).isAllValid;

if isValid is true the value of input is valid.

separator (divider) string

payment input by default use space to separate part of card number or shaba number. for example it will show 1234123412341234 as 1234 1234 1234 1234 but you can change it to what char or even string you want for eample devide it by - and you will see 1234-1234-1234-1234.
to make this happen you just have to set separator prop in jsx.

<jbPaymentInput separator="-"></jbPaymentInput>

other props

this component support all attributes comes from jb-input-react

set custom style

in some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.
if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component. since jb-payment-input use jb-input underneath, read jb-input custom style list.

Other Related Docs:

see jb-payment-input if you want to use this component as a pure-js web-component
see All JB Design system Component List for more components
use Contribution Guide if you want to contribute in this component.