React Native Integration

The QiCard Payment SDK can be integrated into React Native applications by bridging the existing native iOS and Android SDKs with React Native modules. This setup allows you to leverage the secure payment processing and tokenization capabilities within a cross-platform environment.

For using Payment SDK with react native you can link libraries for only a certain platform by doing:

• For Android: react-native link PaymentSDKBridge --platforms android

• For iOS: react-native link PaymentSDKBridge --platforms ios

Payment Details

The PaymentDetails object for Javascript implementation:

const paymentDetails = {
  paymentId: 'your_payment_id',
  requestId: 'request_id_received_from_payment_gateway',
  customerInfo: {
    accountId: 'user_account_id', // User identifier
  },
  amount: 101.9, // Payment amount
  currency: 'GBP', // Payment currency
  paymentMethod: {
    paymentType: 'PAYMENT_TOKEN', // or 'CARD'
    paymentToken: 'your_payment_token', // Required if paymentType is PAYMENT_TOKEN
  },
  nonPaymentOperation: false, // true for non-payment transactions
  withoutAuthenticate: false, // true if operation does not require payer authentication
  needPaymentToken: true, // true if a paymentToken is needed
  tokenType: 'AUTH', // Token type requested
};

Importing PaymentSDK and methods

In React Native components, import and call your Payment SDK and its methods:

import { NativeModules } from 'react-native';

const { PaymentSDKBridge } = NativeModules;

export default {
  initPaymentSDK: (config) => PaymentSDKBridge.initPaymentSDK(config),
  updatePaymentSDKLanguage: (language) =>
    PaymentSDKBridge.updatePaymentSDKConfigurationLanguage(language),
  updatePaymentSDKWritingDirection: (direction) =>
    PaymentSDKBridge.updatePaymentSDKConfigurationWritingDirection(direction),
  updatePaymentSDKTheme: (theme) => PaymentSDKBridge.updatePaymentSDKConfigurationTheme(theme),
  setConnectionSettings: (settings) => PaymentSDKBridge.setConnectionSettings(settings),
  getPaymentTokens: (accountId) => PaymentSDKBridge.getPaymentTokens(accountId),
  getLatestTokenTransactions: (token, count) =>
    PaymentSDKBridge.getLatestTokenTransactions(token, count),
  blockPaymentToken: (token) => PaymentSDKBridge.blockPaymentToken(token),
  transferPaymentTokens: (accountId, tokenList) =>
    PaymentSDKBridge.transferPaymentTokens(accountId, tokenList),
  processPayment: (paymentDetails) => PaymentSDKBridge.processPayment(paymentDetails),
};

Otherwise, methods can be called directly from the code:

async function processPayment() {
  try {
    const response = await PaymentSDK.processPayment(paymentDetails);
    console.log('Payment Success:', response);
  } catch (error) {
    console.error('Payment Failed:', error);
  }
}