@tripleplaypay/react-native

TPP React Native SDK

Getting Started

Install the SDK

npm install @tripleplaypay/react-native

Setup

For assistance setting up the hardware, visit this document.

iOS

To get started with the TPP React Native SDK on iOS, follow these steps:

• Install the TPP React Native SDK and link the pods:

npx pod-install

• Open the XCWorkspace file under ios/ in XCode. You can do so from the commandline like this:

open ./ios/MyProject.xcworkspace

• Add the Bluetooth permission to your app's Info.plist file:

• The app's Info.plist must contain an NSBluetoothAlwaysUsageDescription key with a string value explaining to the user how the app uses this data.
• You can easily configure this from the Info tab. Click on the + button under any of the entries and select Privacy - Bluetooth Always Usage Description and make sure to place an accurate description in the text box next to it.

• Under the signing and capabilities tab, make sure to set up your Apple account for signing the application.
• Add the `MagTekSDK.xcframework.

• Under the General tab, Click on the + symbol
• Select the library Workspace > Pods > MagTekSDK.xcframework
• Click add

• Make sure to build the project in XCode first, this will place the app on your phone. Afterwards you can run the react-native server using:

npx react-native start

Android

If our Android MagTek SDK doesn't resolve, you may need to add our repo to the allprojects section of your android app's gradle file, like so:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url = uri('https://maven.pkg.github.com/TriplePlayPay/TPP-Android-MagTekSDK')
            credentials {
                username "${GITHUB_USER}"
                password "${GITHUB_TOKEN}"
            }
        }
    }
}

Usage:

• Import the @tripleplaypay/react-native module in your project:

import {TPPSDKModule} from '@tripleplaypay/react-native';

• Prior to any usage, initialize the SDK with your publishable key:

TPPSDKModule.initialize('prod-key-example');

or for testing sandbox transactions

TPPSDKModule.initializeSandbox('sandbox-key-example');

• To initiate a transaction, use the useTransactionUpdates hook to get the startTransaction method and a stateful transactionResult object that updates during each phase of the transaction processing.

  Use the hook inside of a react component so that transactionResult changes will trigger re-render effects:

const {transactionResult, startTransaction} = TPPSDKModule.useTransactionUpdates();

// Start the transaction
startTransaction('10.00');

The message property on transactionResult will begin statefully updating with messages such as: "PRESENT CARD" when it is ready for the user to pay, "APPROVED" if the transaction submitted to TPP servers successfully, or "DECLINED" for other failures.