react-native-tappay

Write once, run everywhere

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.

PR Welcome

We use it on our production App/MWeb for 2 years. Keep update and PR welcome.

Tappay SDK support Version

• 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

Getting started

$ npm install react-native-tappay --save

or

$ yarn add react-native-tappay

React Native 0.60 and higher

On newer versions of React Native, linking is automatic.

React Native 0.59 and lower

$ react-native link react-native-tappay

iOS

CocoaPods on iOS needs this extra step:

$ cd ios
$ pod install

Android

Add these lines in your build.gradle:

flatDir {
  ...
+   dirs "$rootDir/../node_modules/react-native-tappay/android/libs"
  ...
}

Usage

Currently supports RBA setup

without RBA

import { useTapPay } from 'react-native-tappay';

function MyComponent() {
  const [isLoadedSuccess, TapPay] = useTapPay({ appId, appKey, env })

  return ...
}

with RBA

import { useTapPay } from 'react-native-tappay';

function MyComponent() {
  const [isLoadedSuccess, TapPay] = useTapPay({ appId, appKey, env, rbaId, rbaKey })

  return ...
}

Example

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();

Props

Name | Type | Required -------|----------|-------- appId | number | YES appKey | string | YES env | string | YES rbaId | string | NO rbaKey | string | NO

Methods

cardSetup [Web Only]

Parameters: args: CardSetupArgs Returns: void

CardSetupArgs

validateCard

Parameters: cardNumber: string, dueMonth: string, dueYear: string, CCV: string Returns: void

setCard

Parameters: cardNumber: string, dueMonth: string, dueYear: string, CCV: string Returns: void

onCardUpdate [Web Only]

Parameters: callback: (result: UpdateResult) => void Returns: void

UpdateResult

getDirectPayPrime

Parameters: none Returns: Promise<GetCardPrimeResolveValue>

GetCardPrimeResolveValue

removeCard

Parameters: none Returns: Promise<GetCardPrimeResolveValue>

getLinePayPrime

Parameters: url: string Returns: Promise<{ prime: string | null }>

isLinePayAvailable

Parameters: void Returns: Promise<boolean>

handleLinePayURL

Parameters: url: string Returns: Promise<boolean>

getApplePayPrime(IOS Only)

Parameters: MerchantData, CartData[CartItem] Returns: Promise<{ prime: string | null }>

isApplePayAvailable(IOS/Web Only)

Parameters: void Returns: Promise<boolean>

webSetupApplePay(Web Only)

Parameters: MerchantData, CartData[CartItem] Returns: Promise<boolean>

webGetApplePayPrime(Web Only)

Parameters: void Returns: Promise<{ prime: string | null }>

Types

CardSetupArgs

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

UpdateResult

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 problem1 = The field has not been filled in yet2 = Field error 3 = Typing status.expiry | number | 0 = The field has been filled in and there is no problem1 = The field has not been filled in yet2 = Field error 3 = Typing status.ccv | number | 0 = The field has been filled in and there is no problem1 = The field has not been filled in yet2 = Field error 3 = Typing

MerchantData

Name | Type | Content -----|------|--------- merchantName | string | merchantIdentifier | string | your ios certification merchantIdentifier countryCode | string | currencyCode | string |

CartItem

Name | Type | Content -----|------|--------- itemName| string| price| number |

GetCardPrimeResolveValue

Name | Type | Content ----------------------|-------------------------------|----------------------------------------------------------------------------------- prime | string | bincode | string | lastfour | string | issuer | string | funding | number | -1 = Unknown0 = Credit Card1 = Debit Card2 = Prepaid Card type | number | -1 = Unknown1 = VISA2 = MasterCard3 = JCB4 = Union Pay5 = AMEX cardidentifier | string | merchantReferenceInfo | { affiliate_codes: Array } |

Suppported Payment

• [x] Direct Pay
• [x] Line Pay
• [x] Apple Pay
• [x] Apple Pay for Web
• [ ] Google Pay PR Welcome
• [ ] Samsung Pay PR Welcome

📄 License

react-native-tappay is MIT licensed, as found in the LICENSE file.