React-native-tappay NPM

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

Getting started

$ npm install react-native-tappay --save

$ 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 }`