jb-payment-input-react v1.1.0
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 |