@tap-payments/gosell-sdk-react-native
v2.3.46
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
5,245
Maintainers
Keywords
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
Requirements
To use the SDK the following requirements must be met:
- Visual Studio - InteliJ Idea
- react: 16.13.1 or newer
- react-native: 0.63.3 or newer
- iOS 11 or later
- XCode 12 or later
Installation
Install goSellSDK using npm
Open Terminal
Install npm packages
npm install
Install goSellSdkReactNative package
npm i @tap-payments/[email protected]
Install pods for iOS
cd ios
pod install
pod update
Install pods for iOS for M1
sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
M1 based Macs
You may face a compilation error when compiled using M1 based Mac devices, to solve this please follow these steps:
Close the Xcode.
Go to the
application
folder.Find the
Xcode
icon.Right click on Xcode icon.
Choose
Get info
Check the option
Open using Rosetta
Install for Andoid
- Make sure to set minimum version to 21 in gradle
- Add multiDexEnabled true build gradle of app in android
- Make sure to support JDK 8
Update library for versions above 1.0.57 to remove unused assets
- Make sure delete @tap_payments folders from node_modules
- Make sure run npm install
- Run gradle sync from android studio
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-payments/gosell-sdk-react-native
package.
import RNGoSell from '@tap-payments/gosell-sdk-react-native';
const {
Languages,
PaymentTypes,
AllowedCadTypes,
TrxMode,
SDKMode,
Listener,
}= 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,
uiDisplayMode: UiDisplayModes.DARK,
appearanceMode: SDKAppearanceMode.Windowed,
supportedPaymentMethods: ['Knet'],
},
};
export default allConfigurations
Supported payments Methods
supportedPaymentMethods: ['Knet'],
Optional when you pass this values it will be only enabled methods for payment if you not pass it or pass it as empty array you will have all available payment methods to your account
You can pass the supported payment Methods as array of string to supportedPaymentMethods key:
Available values
- AMERICAN_EXPRESS
- APPLE_PAY
- BENEFIT
- BENEFITPAY
- CAREEMPAY
- FAWRY
- GOOGLE_PAY
- KNET
- MADA
- MASTERCARD
- MEEZA
- OMANNET
- PAYPAL
- POST_PAY
- NAPS
- STC_PAY
- TABBY
- VISA
Appearance Mode
appearanceMode: SDKAppearanceMode.Fullscreen
Optional You can set the appearance mode into one of the following modes:
- Fullscreen
SDKAppearanceMode.Fullscreen
Show sheet as full screen
- Windowed
SDKAppearanceMode.Windowed
Show sheet as window.
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>
);
}
Use Charge Id callback
constructor(props) {
super(props);
this.subscription = RNGoSell.goSellListener.addListener(RNGoSell.goSellSDKModels.Listener.paymentInit, (chargeId) => {
console.log("chargeId", chargeId)
})
}
componentWillUnmount() {
this.subscription.remove() // to clear the listener
}
Use apple pay cancel callback
constructor(props) {
super(props);
this.subscription = RNGoSell.goSellListener.addListener(RNGoSell.goSellSDKModels.Listener.applePayCancelled, (result) => {
console.log("result", result)
})
}
componentWillUnmount() {
this.subscription.remove() // to clear the listener
}
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-payments/gosell-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-payments/gosell-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
Google pay setup
Requirements And SetUp
Make sure, your current goSellSDK version is >= 3.16.0
To use Google Pay™, first ensure your device supports GooglePay and is above api version 22
Ask for Enabling googlePay as payment option from Tap team.
In Manifest file of your app enable gms wallet:
<meta-data android:name="com.google.android.gsm.wallet.api.enabled" android:value="true" />
You may refer to https://github.com/Tap-Payments/goSellSDK-AndroidX/tree/FT_Google_Pay_Integration#requirements_googlepay for more info
Common Issues
iOS
Undefined symbol:
- Undefined symbol: _swift_FORCE_LOAD$_swiftWebKit
- Undefined symbol: _swift_FORCE_LOAD$_swiftUniformTypeIdentifiers
- Undefined symbol: _swift_FORCE_LOAD$_swiftCoreMIDI
Fix:
- Add
$(SDKROOT)/usr/lib/swift
in Build Settings > Library Search Paths
Event Config Error: <event2/event-config.h> error
Fix:
- In iOS Podfile, replace
use_flipper!
withuse_flipper!({ 'Flipper-Folly' => '2.3.0' })
- Use command
pod deintegrate
then remove Podfile.lock - Use command
pod install
thenpod update
- In iOS Podfile, replace