react-native-sc-applepay

SkipCash ApplePay ReactNative Package; The package facilitates SkipCash Apple Pay integration within your ReactNative app.

Installation

npm install react-native-sc-applepay

License

Apache License 2.0

APP SAMPLE CODE

import React, { useEffect, useState, useRef} from 'react';

import { StyleSheet, View, Button, NativeEventEmitter, Alert, Platform, TextInput } from 'react-native';
import { initiatePayment, PaymentData, PaymentResponse,
   ScApplepay, isWalletHasCards, setupNewCard } from 'react-native-sc-applepay';


// tsx
// import { type NativeEventEmitter as NEE } from 'react-native';
// import {type EmitterSubscription as ES} from 'react-native';

export default function App() {
  const paymentData = new PaymentData();

  const eventSubscription         = useRef(null);
  const eventEmitter              = useRef(null);

  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName]   = useState('');
  const [phone, setPhone]         = useState('');
  const [email, setEmail]         = useState('');
  const [amount, setAmount]       = useState('');

  // here pass the name of the merchant identifier(you need to create a new one
  // from apple developer account of ur app ). 
  // please reachout to us on [email protected] to get the manual that explains how
  // to generate your merchant identifier and to sign it with us to be able to use applepay
  paymentData.setMerchantIdentifier('');
  // add your payment end point - you should create ur own endpoint for your merchant account
  // PLEASE REFER TO https://dev.skipcash.app/doc/api-integration/ for more information
  // on how to request a new payment (payment link) you need to implement that for your 
  // backend server to create endpoint to request a new payment and return the details you receive from skipcash server this package will use this endpoint to process your customer payment using applepay.
  // when u complete setuping & testing ur endpoint please pass the link to below setPaymentLinkEndPoint //// method.
  // 
  paymentData.setPaymentLinkEndPoint('HERE PASS YOUR ENDPOINT URL')
  /* add authorizartion header used to protect you endpoint from unathorized access */
  paymentData.setAuthorizationHeader("");
  
  useEffect(() => {

     if (Platform.OS === 'ios'){

        eventEmitter.current = new NativeEventEmitter(ScApplepay);

        eventSubscription.current = eventEmitter.current.addListener(
          'applepay_response', 
          
          (paymentResponse) => {
            let response: PaymentResponse = PaymentResponse.fromJson(paymentResponse);

        
            console.log(`isSuccess: ${response.isSuccess} | transactionId: ${response.transactionId} | PaymentID: ${response.paymentId} 
            | returnCode: ${response.returnCode} | errorMessage: ${response.errorMessage}`);


            /* 
              Handle payment response here...
              you can get the payment details using the payment id after successful payment request.
              send a GET request to SkipCash server `/api/v1/payments/${response.paymentId}`
              and include your merchant - client id in the authorization header request to get 
              the payment details. 
              for more details please refer to https://dev.skipcash.app/doc/api-integration/ 
            */
          }
      );
    }

    return () => {
      
      if(Platform.OS === 'ios' && eventSubscription.current){
        eventSubscription.current.remove();
      }
    };

  }, []);

  const initiateApplePayPayment = async () => {
    paymentData.setSummaryItem('Tax', '0.0'); // set summary item
    paymentData.setSummaryItem('Total', amount); // set summary item

    paymentData.setFirstName(firstName);
    paymentData.setLastName(lastName)
    paymentData.setPhone(phone);
    paymentData.setEmail(email)
    paymentData.setAmount(amount)
    paymentData.setTransactionId("") // Optional

    const paymentDataJson = JSON.stringify(paymentData);

    initiatePayment(paymentDataJson);
  }


  return (
    <View style={styles.container}>
      <TextInput style={styles.textInput} placeholder='FirstName' onChangeText={(text)=>{setFirstName(text)}} />
      <TextInput style={styles.textInput} placeholder='LastName' onChangeText={(text)=>{setLastName(text)}} />
      <TextInput style={styles.textInput} placeholder='Phone' onChangeText={(text)=>{setPhone(text)}} />
      <TextInput style={styles.textInput} placeholder='Email' onChangeText={(text)=>{setEmail(text)}} />
      <TextInput style={styles.textInput} placeholder='Amount' onChangeText={(text)=>{setAmount(text)}} />


      <Button title='Initiate Payment' onPress={
        async ()=>{ 
          // make sure all fields are filled

          await isWalletHasCards().then( // check for cards in wallet
            response => {
              if(response){
                initiateApplePayPayment(); // initiate a payment if there is a ready card
              }else{ // if no cards
                setupNewCard(); // setup a new card 
              }
            }
          );
          
      }} />

      <Button title='Setup A Card' onPress={
        ()=>{
            setupNewCard(); //setup a new card
          }
        }
      ></Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },

  textInput: {
    width: '90%',
    marginVertical: 10,
    height: 40,
    padding: 30,
    borderWidth: 2,
    borderRadius: 15
  }
});