Tappay is a great payment service provider which provide many popular payment method. We want to write once and run everywhere(Web/Android/iOS).
react-native-tappay is a wrapper around the iOS Tappay SDK , Android Tappay SDK and Web Tappay SDK, allowing for Tappay integration in React Native apps. Provided JS Code to call native functions.
This package aims to support functional usage without Form. So you can custom your component/behavior or intergrate with other library as you want.
Support react-native for web
Yes, this library support web usage(react-native-web), write once and runs on iOS/Android/Web.
We use it on our production App/MWeb for 2 years. Keep update and PR welcome.
- Web: [5.6.0] https://github.com/TapPay/tappay-web-example/releases/tag/v5.6.0
- Android: [3.4.5] https://github.com/TapPay/tappay-android-example/releases/tag/3.4.5
- iOS: [2.13.0] https://github.com/TapPay/tappay-ios-example/releases/tag/v2.13.0
$ npm install react-native-tappay --save
or
$ yarn add react-native-tappay
On newer versions of React Native, linking is automatic.
$ react-native link react-native-tappay
CocoaPods on iOS needs this extra step:
$ cd ios
$ pod install
Add these lines in your build.gradle:
flatDir {
...
+ dirs "$rootDir/../node_modules/react-native-tappay/android/libs"
...
}import { useTapPay } from 'react-native-tappay';
function MyComponent() {
const [isLoadedSuccess, TapPay] = useTapPay({ appId, appKey, env })
return ...
}import { useTapPay } from 'react-native-tappay';
function MyComponent() {
const [isLoadedSuccess, TapPay] = useTapPay({ appId, appKey, env, rbaId, rbaKey })
return ...
}TapPay.cardSetup({
fields: {
number: {
// css selector
element: '#card-number',
placeholder: '**** **** **** ****'
},
expirationDate: {
// DOM object
element: document.getElementById('card-expiration-date'),
placeholder: 'MM / YY'
},
ccv: {
element: '#card-ccv',
placeholder: 'ccv'
},
},
styles: {
input: {
color: 'gray',
},
'input.ccv': {
'font-size': '16px',
},
'input.expiration-date': {
'font-size': '16px',
},
'input.card-number': {
'font-size': '16px',
},
':focus': {
color: warrior,
},
'.valid': {
color: warrior,
},
'.invalid': {
color: warrior,
},
},
});
TapPay.validateCard('4242424242424242', '01', '23', '123')
.then(result => {
console.log({
"isCardNumberValid": result.isCardNumberValid,
"isExpiredDateValid": result.isExpiredDateValid,
"isCCVValid": result.isCCVValid,
"cardType": result.cardType,
});
})
.catch(error => {
console.error(error);
});
TapPay.setCard('4242424242424242', '01', '23', '123');
TapPay.onCardUpdate(update => {
const { cardType, canGetPrime, status } = update;
setCardType(cardType);
setValidated(canGetPrime);
setHasNumberError(status.number === 2);
setHasExpiryError(status.expiry === 2);
setHasCCVError(status.ccv === 2);
});
TapPay.getDirectPayPrime()
.then(result => {
console.log({
"prime": result.prime,
"bincode": result.bincode,
"lastfour": result.lastfour,
"issuer": result.issuer,
"type": result.type,
"funding": result.funding,
"cardidentifier":result.cardidentifier,
});
})
.catch(error => {
console.error(error);
});
TapPay.removeCard();| Name | Type | Required |
|---|---|---|
| appId | number |
YES |
| appKey | string |
YES |
| env | string |
YES |
| rbaId | string |
NO |
| rbaKey | string |
NO |
Parameters: args: CardSetupArgs
Returns: void
Parameters: cardNumber: string, dueMonth: string, dueYear: string, CCV: string
Returns: void
Parameters: cardNumber: string, dueMonth: string, dueYear: string, CCV: string
Returns: void
Parameters: callback: (result: UpdateResult) => void
Returns: void
Parameters: none
Returns: Promise<GetCardPrimeResolveValue>
Parameters: none
Returns: Promise<GetCardPrimeResolveValue>
Parameters: url: string
Returns: Promise<{ prime: string | null }>
Parameters: void
Returns: Promise<boolean>
Parameters: url: string
Returns: Promise<boolean>
Parameters: MerchantData, CartData[CartItem]
Returns: Promise<{ prime: string | null }>
Parameters: void
Returns: Promise<boolean>
Parameters: MerchantData, CartData[CartItem]
Returns: Promise<boolean>
Parameters: void
Returns: Promise<{ prime: string | null }>
| Name | Type | Content |
|---|---|---|
| fields.number | { element: HTMLElement or string, placeholder: string } | |
| fields.expirationDate | { element: HTMLElement or string, placeholder: string } | |
| fields.ccv | { element: HTMLElement or string, placeholder: string } | ccv is optional, if there is input, it will be validated, if there is no input, it will not.If you don't want to display the ccv field, don't need to set. |
| styles | Object | Supported CSS - TapPay Fields Styles |
| Name | Type | Content |
|---|---|---|
| cardType | string | mastercard, visa, jcb, amex, unionpay, unknown |
| canGetPrime | boolean | |
| hasError | boolean | |
| status.number | number | 0 = The field has been filled in and there is no problem 1 = The field has not been filled in yet 2 = Field error 3 = Typing |
| status.expiry | number | 0 = The field has been filled in and there is no problem 1 = The field has not been filled in yet 2 = Field error 3 = Typing |
| status.ccv | number | 0 = The field has been filled in and there is no problem 1 = The field has not been filled in yet 2 = Field error 3 = Typing |
| Name | Type | Content |
|---|---|---|
| merchantName | string | |
| merchantIdentifier | string | your ios certification merchantIdentifier |
| countryCode | string | |
| currencyCode | string |
| Name | Type | Content |
|---|---|---|
| itemName | string | |
| price | number |
| Name | Type | Content |
|---|---|---|
| prime | string |
|
| bincode | string |
|
| lastfour | string |
|
| issuer | string |
|
| funding | number |
-1 = Unknown 0 = Credit Card 1 = Debit Card 2 = Prepaid Card |
| type | number |
-1 = Unknown 1 = VISA 2 = MasterCard 3 = JCB 4 = Union Pay 5 = AMEX |
| cardidentifier | string |
|
| merchantReferenceInfo | { affiliate_codes: Array } |
- Direct Pay
- Line Pay
- Apple Pay
- Apple Pay for Web
- Google Pay PR Welcome
- Samsung Pay PR Welcome
react-native-tappay is MIT licensed, as found in the LICENSE file.