JBPaymentInput React component

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

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_NUMBER"></JBPaymentInput>
<JBPaymentInput  label="shaba number" inputType="SHABA_NUMBER"></JBPaymentInput>

events

• onChange

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

• onKeyUp

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

• onEnter

    <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: (inputedText)=>{return inputedText == "سلام"},
            message: 'شما تنها میتوانید عبارت سلام را وارد کنید'
        },
    ]

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

check validation

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

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

if isValid is true the value of input is valid.

separator (devider) 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

|props name | description | | --------- | ------------------ | | disabled | disable the input |

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 |