npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tap-checkout-sdk-react-native

v0.0.1-alpha.30

Published

React-Native plugin compatible version of goSellSDK library for both Android and iOS that fully covers payment/authorization/card saving/card tokenization process inside your Android application. Original SDKS

Downloads

29

Readme

gosellSDK-ReactNative

React-Ntive plugin compatible version of goSellSDK library for both Android and iOS that fully covers payment/authorization/card saving/card tokenization process inside your Android application. Original SDKS

  • React-Native (https://github.com/Tap-Payments/gosellSDK-ReactNative)
  • Android (https://github.com/Tap-Payments/goSellSDK-Android)
  • AndroidX (https://github.com/Tap-Payments/goSellSDK-AndroidX)
  • iOS (https://github.com/Tap-Payments/goSellSDK-ios)

Getting Started

Table of Contents


  1. Requirements
  2. Installation
    1. Install goSellSDK using npm
  3. Usage
    1. Configure Your App
    2. Configure SDK Session
    3. Transaction Modes
    4. Customer
    5. Use Tap Pay Button
    6. Start Payment
    7. Handle SDK Result
    8. Apple Pay Setup
  4. Common Issues

Requirements


To use the SDK the following requirements must be met:

  1. Visual Studio - InteliJ Idea
  2. react: 16.13.1 or newer
  3. react-native: 0.63.3 or newer
  4. iOS 11 or later
  5. XCode 12 or later

Installation


Install goSellSDK using npm

Open Terminal

Install npm packages

npm install

Install goSellSdkReactNative package

npm i [email protected]

Install pods for iOS

cd ios
pod install
pod update

Install for Andoid

  1. Make sure to set minimum version to 21 in gradle
  2. Add multiDexEnabled true build gradle of app in android
  3. Make sure to support JDK 8

Configure your app

Create sdkConfigurations.js file to set the configurations.

goSellSDK should be set up. To set it up, add the following lines of code inside sdkConfigurations.js in your project. Import RNGoSell from tap-checkout-sdk-react-native package.

import RNGoSell from 'tap-checkout-sdk-react-native';
const {
Languages,
PaymentTypes,
AllowedCadTypes,
TrxMode,
SDKMode
}= RNGoSell.goSellSDKModels;

Set app credentials using your bundle / package ID and your sandbox and production keys generated by TAP Payments as the below

const appCredentials = {
    production_secrete_key: (Platform.OS == 'ios') ? 'iOS-Live-KEY' : 'Android-Live-KEY',
    language: Languages.EN,
    sandbox_secrete_key: (Platform.OS == 'ios') ? 'iOS-SANDBOX-KEY' : 'Android-SANDBOX-KEY',
    bundleID: (Platform.OS == 'ios') ? 'iOS-PACKAGE-NAME' : 'ANDROIID-PACKAGE-NAME',
}

Configure SDK Session Example

Transaction Currency
const transactionCurrency = 'kwd';
Shipping
const shipping = [
    {
        name: 'shipping 1',
        description: 'shiping description 1',
        amount: 100.0,
    },
];
Payment Items
const paymentitems = [
    {
        amount_per_unit: 1,
        description: 'Item 1 Apple',
        discount: {
            type: 'F',
            value: 10,
            maximum_fee: 10,
            minimum_fee: 1,
        },
        name: 'item1',
        quantity: {
            value: 1,
        },
        taxes: [
            {
                name: 'tax1',
                description: 'tax describtion',
                amount: {
                    type: 'F',
                    value: 10,
                    maximum_fee: 10,
                    minimum_fee: 1,
                },
            },
        ],
        total_amount: 100,
    },
];
Taxes
const taxes = [
    {
        name: 'tax1',
        description: 'tax describtion',
        amount: { type: 'F', value: 10.0, maximum_fee: 10.0, minimum_fee: 1.0 },
    },
    {
        name: 'tax1',
        description: 'tax describtion',
        amount: { type: 'F', value: 10.0, maximum_fee: 10.0, minimum_fee: 1.0 },
    },
];

Customer
  • New Customer (First time to pay using goSell SDK)
const customer = {
    isdNumber: '965',
    number: '00000000',
    customerId: '',
    first_name: 'test',
    middle_name: 'test',
    last_name: 'test',
    email: '[email protected]',
};

After the first transaction success, you receive the customerId in the response. Save it to be used in the next transaction.

  • Existed Customer (paid before using goSell SDK) You need to set the customerId only and you can see the customer saved cards if the user has.
const customer = {
    isdNumber: '965',
    number: '00000000',
    customerId: 'cus_smdnd3346nd3dks3jd9drd7d',
    first_name: '',
    middle_name: '',
    last_name: '',
    email: '',
};

Please note that goSell SDK using the customerId only if it's not Empty ('').

Payment Reference
const paymentReference = {
   track: 'track',
   payment: 'payment',
   gateway: 'gateway',
   acquirer: 'acquirer',
   transaction: 'trans_910101',
   order: 'order_262625',
   gosellID: null,
};
Set the final confugurations to be set to goSellSdk
const allConfigurations = {
    appCredentials: appCredentials,
    sessionParameters: {
        paymentStatementDescriptor: 'paymentStatementDescriptor',
        transactionCurrency: 'kwd',
        isUserAllowedToSaveCard: true,
        paymentType: PaymentTypes.ALL,
        amount: '100',
        shipping: shipping,
        allowedCadTypes:AllowedCadTypes.ALL,
        paymentitems: paymentitems,
        paymenMetaData: { a: 'a meta', b: 'b meta' },
        applePayMerchantID: 'applePayMerchantID',
        authorizeAction: { timeInHours: 10, time: 10, type: 'CAPTURE' },
        cardHolderName: 'Card Holder NAME',
        editCardHolderName: false,
        postURL: 'https://tap.company',
        paymentDescription: 'paymentDescription',
        destinations: 'null',
        trxMode: TrxMode.PURCHASE,
        taxes: taxes,
        merchantID: '',
        SDKMode: SDKMode.Sandbox,
        customer: customer,
        isRequires3DSecure: false,
        receiptSettings: { id: null, email: false, sms: true },
        allowsToSaveSameCardMoreThanOnce: false,
        paymentReference: paymentReference,
    },
};

export default allConfigurations

Transaction Modes

trxMode: TransactionMode.PURCHASE

You can set the transaction mode into one of the following modes:

  • Purchase
    • TransactionMode.PURCHASE

    Normal customer charge.

  • Authorize
    • TransactionMode.AUTHORIZE_CAPTURE

    Only authorization is happening. You should specify an action after successful authorization: either capture the amount or void the charge after specific period of time.

  • Save Card
    • TransactionMode.SAVE_CARD

    Use this mode to save the card of the customer with Tap and use it later.

  • Tokenize Card
    • TransactionMode.TOKENIZE_CARD

    Use this mode if you are willing to perform the charging/authorization manually. The purpose of this mode is only to collect and tokenize card information details of your customer if you don't have PCI compliance certificate but willing to process the payment manually using our services.


Use Tap Pay Button UI

render() {
    const statusbar =
      Platform.OS == 'ios' ? (
        <StatusBar backgroundColor="blue" barStyle="light-content" />
      ) : (
          <View />
        );
    const { statusNow } = this.state;
    return (
      <SafeAreaView style={styles.safeAreaView}>
        <View style={styles.container}>
          {statusbar}
          <Header title="Plugin Example app" />
          <Text style={styles.statusText}> Status: {statusNow}</Text>
          <Text style={styles.resultText}>{this.state.result}</Text>
          <View style={styles.bottom}>
            {Platform.OS == 'ios' ?
              <TouchableOpacity onPress={this.startSDK}>
                <View style={styles.payButtonBg}>
                  <Text style={styles.payButtonText}>Start Payment</Text>
                </View>
              </TouchableOpacity>
              : <Button onPress={this.startSDK} {...styles.payButtonBg} title='Start Payment' />
            }
          </View>
        </View>
      </SafeAreaView>
    );
  }
const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    backgroundColor: '#000',
  },
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  statusbar: {
    height: 20,
  },
  payButtonBg: {
    alignItems: 'center',
    color: '#25cf1f',
    backgroundColor: '#25cf1f',
    paddingVertical: 12,
    paddingHorizontal: 25,
    borderRadius: 25,
    position: 'absolute',
    bottom: 0,
    width: '90%',
    marginLeft: '6%',
    marginRight: '10%',
  },
  payButtonText: {
    color: '#FFF',
    fontSize: 20,
  },
  bottom: {
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 36,
  },
  statusText: {
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 25,
  },
  resultText: {
    textAlign: 'center',
    fontSize: 15,
    width: '90%',
    marginLeft: '6%',
    marginRight: '10%',
  },
});

Start Payment

  • In your App.js import RNGoSell from 'tap-checkout-sdk-react-native'
  • Import sdkConfigurations from './sdkConfigurations'
  • Call start payment from

Parameters

  • First parameter is the sdkConfigurations dictionary
  • Second parameter is integer value to set the termination timeout in milliseconds, the sdk will terminate the session after this time expire. Set 0 if you don't want to terminate the session and keep it terminated normally clicking on cancel button by the user
  • Third parameter is the result callback, you can handle the required action on recieving the the result through this callback.
import RNGoSell from 'tap-checkout-sdk-react-native';
import sdkConfigurations from './sdkConfigurations';
// startPayment(sdkConfigurations, terminationTimeoutInMilliseconds, this.handleResult)
// Set terminationTimeoutInMilliseconds to 0 to prevent termination the session automatically
RNGoSell.goSellSDK.startPayment(sdkConfigurations, 0, this.handleResult) 

Handle SDK Result

handleResult(error, status) {
    var myString = JSON.stringify(status);
    console.log('status is ' + status.sdk_result);
    console.log(myString);
    var resultStr = String(status.sdk_result);
    switch (resultStr) {
      case 'SUCCESS':
        this.handleSDKResult(status)
        break
      case 'FAILED':
        this.handleSDKResult(status)
        break
      case "SDK_ERROR":
        console.log('sdk error............');
        console.log(status['sdk_error_code']);
        console.log(status['sdk_error_message']);
        console.log(status['sdk_error_description']);
        console.log('sdk error............');
        break
      case "NOT_IMPLEMENTED":
        break
    }
  }
  
  handleSDKResult(result) {
    console.log('trx_mode::::');
    console.log(result['trx_mode'])
    switch (result['trx_mode']) {
      case "CHARGE":
        console.log('Charge');
        console.log(result);
        this.printSDKResult(result);
        break;

      case "AUTHORIZE":
        this.printSDKResult(result);
        break;

      case "SAVE_CARD":
        this.printSDKResult(result);
        break;

      case "TOKENIZE":
        Object.keys(result).map((key) => {
          console.log(`TOKENIZE \t${key}:\t\t\t${result[key]}`);
        })

        // responseID = tapSDKResult['token'];
        break;
    }
  }

  printSDKResult(result) {
    if (!result) return
    Object.keys(result).map((key) => {
      console.log(`${result['trx_mode']}\t${key}:\t\t\t${result[key]}`);
    })
  }

Apple pay setup

Follow the steps shared in the following link to setup apple pay: https://github.com/Tap-Payments/goSellSDK-ios#apple-pay


Common Issues

iOS

  1. Undefined symbol:

    1. Undefined symbol: _swift_FORCE_LOAD$_swiftWebKit
    2. Undefined symbol: _swift_FORCE_LOAD$_swiftUniformTypeIdentifiers
    3. Undefined symbol: _swift_FORCE_LOAD$_swiftCoreMIDI
    Fix:
    • Add $(SDKROOT)/usr/lib/swift in Build Settings > Library Search Paths
  2. Event Config Error: <event2/event-config.h> error error-react

    Fix:
    1. In iOS Podfile, replace use_flipper! with use_flipper!({ 'Flipper-Folly' => '2.3.0' })
    2. Use command pod deintegrate then remove Podfile.lock
    3. Use command pod install then pod update