React Native Payfort | Amazon Payment Service Sample

payFortSample.js

/*
get device id
get sdk token
form transaction object
show payment page

import libraries
device id variable
token state variable
laoding state variable
*/

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import axios from 'axios';
import CryptoJS, { SHA256 } from 'crypto-js';
import { getDeviceId, StandardCheckout } from 'rn-amazon-payment-services';

// testing payfort field values, production values are different
const payfortFields = {
  url: 'https://sbpaymentservices.payfort.com/FortAPI/paymentApi',
  merchant_identifier: 'PQRstuv',
  access_code: '123axisCode123',
  request_phrase: 'abcd1234$',
};

var deviceId = '';
export default function App() {
  const [token, setToken] = useState('');
  const [showStandardCheckout, setShowStandardCheckout] = useState(false);

  const openPayfort = async () => {
    if (!token) {
      await get_sdk_token();
    }
    setShowStandardCheckout(true);
  };

  const paymentObject = {
    command: 'PURCHASE',
    merchant_reference: 'companyName' + Date.now().toString(),
    amount: 100, // use state variable
    currency: 'USD',
    language: 'en',
    customer_email: 'custemail@email.com',
    sdk_token: token,
  };

  const onSuccess = (response) => {
    console.log('payfort success', response);
    /**
     success response object
     {
      amount: '100',
      authorization_code: '4567891230',
      card_holder_name: 'my cust name',
      card_number: '12345******0001',
      command: 'PURCHASE',
      currency: 'USD',
      customer_email: 'custemail@email.com',
      customer_ip: '123.456.789.01',
      eci: 'ECOMMERCE',
      expiry_date: '2505',
      fort_id: '16900000098',
      language: 'en',
      merchant_reference: 'companyName202404158789',
      payment_option: 'VISA',
      response_code: '14000',
      response_message: 'Success',
      sdk_token: 'bb39b7a54abcdffghjklpoiuytrewq12',
      status: '14',
      token_name: 'abcdfghty6a84100112233440377cecfghtyuer',
    }
     */
    setToken('');
    setShowStandardCheckout(false);
  };

  const onFailure = (response) => {
    console.log('payfort failure', response);
    setToken('');
    setShowStandardCheckout(false);
  };

  const onCancel = (response) => {
    console.log('payfort cancel', response);
    setToken('');
    setShowStandardCheckout(false);
  };

  const getSDKToken = async () => {
    const sdkTokenObj = {
      device_id: deviceId,
      language: 'en',
      merchant_identifier: payfortFields.merchant_identifier,
      access_code: payfortFields.access_code,
      service_command: 'SDK_TOKEN',
    };

    const sortedKeys = Object.keys(sdkTokenObj).sort((a, b) =>
      a.localeCompare(b)
    );

    let concatenatedString = '';
    sortedKeys.forEach((ele) => {
      concatenatedString += ele + '=' + sdkTokenObj[ele];
    });
    concatenatedString =
      payfortFields.request_phrase +
      concatenatedString +
      payfortFields.request_phrase;
    console.log('concatenated string', concatenatedString);

    const hash = SHA256(concatenatedString);
    console.log('hash', hash);
    const sign = hash.toString(CryptoJS.enc.Hex);
    console.log('sign', sign);

    sdkTokenObj.signature = sign;

    const headers = { 'Content-type': 'application/json' };
    // const productionUrl  = 'https://paymentservices.payfort.com/FortAPI/paymentApi';
    const testUrl = 'https://sbpaymentservices.payfort.com/FortAPI/paymentApi';
    const response = await axios.post(testUrl, sdkTokenObj, { headers });

    if (response?.data?.sdk_token) {
      /**
       response object
       {
        access_code: '***HDZRe****P4$$$$',
        device_id: 'e34abc-123-abcdf-742-d987b67957',
        language: 'en',
        merchant_identifier: 'PQRstuv',
        response_code: '22000',
        response_message: 'Success',
        sdk_token: 'abcd1234AFGHTYUI00bnmghjklpo',
        service_command: 'SDK_TOKEN',
        signature: '660288c0e0cabcd$5e06c57bb19126e181185291195ad6ef33006191aa741604218',
        status: '22',
      }
       */
      setToken(response.data.sdk_token);
    }
  };

  const setupDeviceId = async () => {
    deviceId = await getDeviceId();
  };

  const loadPageData = async () => {
    await setupDeviceId();
    await getSDKToken();
  };

  useEffect(() => {
    loadPageData();
  }, []);

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => openPayfort()} style={styles.btn}>
        <Text style={styles.text}>Proceed to Pay</Text>
      </TouchableOpacity>
      <StandardCheckout
        showStandardCheckoutPage={showStandardCheckout}
        environment={'TEST'}
        requestCode={1}
        showLoading={true}
        showResponsePage={true}
        requestObject={paymentObject}
        onSuccess={onSuccess}
        onFailure={onFailure}
        onCancel={onCancel}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'mediumseagreen',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btn: {
    backgroundColor: 'white',
    padding: 10,
    alignItems: 'center',
  },
  text: {
    color: 'seagreen',
    fontWeight: 'bold',
    fontSize: 14,
  },
});