react-native-tappay

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 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

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 = 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 }

Suppported Payment

• Direct Pay
• Line Pay
• Apple Pay
• 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.