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

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

UpdateResult

MerchantData

CartItem

GetCardPrimeResolveValue

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.