skipcash-reactnative

integrate skipcash in react native app.

Installation

npm install skipcash-reactnative

Usage

Breif

SkipCash React Native Package; This package facilitates SkipCash integration within your ReacNative app.

Example

import { useEffect, useState } from 'react';

import { StyleSheet, View, NativeEventEmitter, KeyboardAvoidingView, NativeModules, Platform, Alert } from 'react-native';
import { initiateApplePay, PaymentData, PaymentResponse,
  isWalletHasCards, setupNewCard, initiatePaymentModel
} from 'skipcash-reactnative';

import { TextInput, Button, Title } from 'react-native-paper';


export default function App() {

  const paymentData = new PaymentData();

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

  /**********************************
  - THIS PACKAGE PROVIDES TWO PAYMENT OPTIONS FOR YOUR CUSTOMER -
    1. IN-APP APPLE PAY using 'initiateApplePay()' function.
    2. IN-APP WEB VIEW (INCLUDES ALL PAYMENT OPTIONS THAT SKIPCASH OFFERS (visa, master, amex, 
    international cards, etc...) using 'initiatePaymentModel()' function.
  - THIS EXAMPLE APP, DEMONESTRATES HOW TO USE THE DIFFERENT OPTIONS MENTIONED ABOVE
  ***********************************/


  /* add authorizartion header; used to protect your endpoint from unathorized access */

  useEffect(() => {
    // subscriptions list: Holds the events subscriptions to receive data from native side.
    const subscriptions: any = [];

    if(Platform.OS === 'android'){
      // for payment page response
      subscriptions.push(new NativeEventEmitter().addListener(
        'responseScPaymentData',
        (paymentResponse: any) => {
          console.log(paymentResponse); // json
          /*
            Handle payment response here...
          */
        }
      ));
    }else if(Platform.OS === 'ios'){
      // for payment page response
      subscriptions.push(new NativeEventEmitter(NativeModules.SkipcashReactnative).addListener(
        'responseScPaymentData',
        (paymentResponse: any) => {
          console.log(paymentResponse); // json
        }
      ));

      // For In-App Apple Pay
      subscriptions.push(new NativeEventEmitter(NativeModules.SkipcashReactnative).addListener(
        'applepay_response',
         (paymentResponse: any) => {
          console.log(paymentResponse); // json
  
          let response: PaymentResponse = PaymentResponse.fromJson(paymentResponse);
  
  
          Alert.alert(`isSuccess: ${response.isSuccess} | transactionId: ${response.transactionId}
            | 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 () => {
      // cleaning up after leaving the current app view
      // make sure to block leaving the current view until the payment is 
      // finished or canceled by the client or you will not be able to 
      // record the callback event for the payment status.
      new NativeEventEmitter().removeAllListeners("responseScPaymentData");
      if(Platform.OS === 'ios'){
        new NativeEventEmitter().removeAllListeners("applepay_response");
      }
      subscriptions.forEach((subscription: any) => subscription.remove());
    };

  }, []);

  const initiateApplePayPayment = () => {
    /*
      you have to  pass the name of the merchant identifier
      (you need to create a new one from apple developer account of your app ). 
      please reachout to https://dev.skipcash.app/ mobile apple pay section to
      know how to generate your merchant identifier and setup Xcode.
    */
    paymentData.setMerchantIdentifier("");

    /* 
      Apple Pay Payments Processing endpoint.

      You need to setup an endpoint to create a new payments.
      For more information on how to request a new payment, Please refer to https://dev.skipcash.app/doc/api-integration/.
      
      You will need to implement this functionality on your backend server to create an endpoint that requests and create new payment and process it 
      and returns the details you receive from the SkipCash server to this package. 

      Your endpoint will receive the customer's details and apple pay token once the customer authorizes the transaction after calling initiateApplePay()
      then your endpoint should process the payment by calling skipcash API, once done your endpoint should return the response received from SkipCash API
      you can find details about how to setup your endpoint at "https://dev.skipcash.app/" under applepay section "configure payment processing endpoint".

      Once you have completed setting up and testing your endpoint, please provide the link to the setPaymentLinkEndPoint below.
    */
    paymentData.setPaymentLinkEndPoint("");

    // if your endpoint requires authorization header you can pass it below
    paymentData.setAuthorizationHeader(""); 

    paymentData.setSummaryItem('Tax', '0.0'); // set summary item
    paymentData.setSummaryItem('Total', amount); // set summary item

    paymentData.setFirstName(firstName); // required
    paymentData.setLastName(lastName); // required
    paymentData.setPhone(phone); // required
    paymentData.setEmail(email); // required
    paymentData.setAmount(amount); // required
    paymentData.setTransactionId(""); // your internal order id, (Optional) - but very much recommended
    paymentData.setWebhookUrl(""); // very much recommended 
    // read about webhooks ->  https://dev.skipcash.app/doc/api-integration/web-hooks/
    paymentData.setMerchantName("Your official business name in appstore"); 
    /* 
      Required - (if using in-app apple-pay set your official merchant/business name for apple payment sheet) 
      this is required by apple, it must match your official name in appstore
    */

    /*
      For more information about webhooks & transactionId (your internal order id) please
      refer to https://dev.skipcash.app/doc/api-integration/
    */
    
    const paymentDataJson = JSON.stringify(paymentData); // convert paymentData to json string

    if(firstName && lastName && phone && email) {
      console.log(paymentDataJson);
      initiateApplePay(paymentDataJson);
    }else{
      Alert.alert("please fill firstname, lastname, phone, email & amount");
    }
  }

  const startPaymentModel = () => {

    /* 
      Add your payment endpoint; You need to create an endpoint for your merchant account.
      For more information on how to request a new payment, Please refer to https://dev.skipcash.app/doc/api-integration/.
      
      You will need to implement this functionality at your backend server. Create an endpoint that requests a new payment and returns the response 
      received from the SkipCash API. 

      Your endpoint will receive the customer's details from this package request, Upon receiving the details call SkipCash API to create a new payment
      as mentioned in the above documentation then your endpoint should return the response received from SkipCash API this package will use the response
      to open the new payment a webview to show the online payment options to customer.

      Once you have completed setting up and testing your endpoint, please provide the link to the setPaymentLinkEndPoint below.
    */
    paymentData.setPaymentLinkEndPoint("");

    // if your endpoint requires authorization header you can pass it below
    paymentData.setAuthorizationHeader(""); 


    paymentData.setFirstName(firstName); // required
    paymentData.setLastName(lastName); // required
    paymentData.setPhone(phone); // required
    paymentData.setEmail(email); // required
    paymentData.setAmount(amount); // required
    paymentData.setTransactionId(""); /* Optional - but very much recommended 
      (it should be uniquely generated each time the function called). 
    */
    paymentData.setPaymentModalTitle("Checkout") // WEB VIEW SCREEN TITLE
    paymentData.setWebhookUrl(""); // very much recommended
    paymentData.setReturnUrl("") // required

    // below are some options used to adjust the WEBVIEW SCREEN header
    /* 
      For the colours please use the full hexadecimal representation 
      not the shorthand representation; cause it can make some issues.

      example:
      (full hex)    #FFFFFF - white (CORRECT ✅)
      (short hex)   #FFF    - white (INCORRECT ❌)

    */
    paymentData.setCancelBtnColour("#FFFFFF");
    paymentData.setHeaderBackgroundColour("#017DFB");
    paymentData.setPaymentModalTitle("TEST PAYMENT");
    paymentData.setHeaderTitleColour("#FFFFFF");

    if(firstName && lastName && phone && email && paymentData.getReturnUrl()) {
      initiatePaymentModel(paymentData); // pass paymentData as object
    }else{
      Alert.alert("fill first&last name, phone, email, amount & return url ");
    }
  }

  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.container}>
      <Title style={styles.title}>Payment Details</Title>
      
      <TextInput
        mode="outlined"
        label="First Name"
        outlineColor='#017DFB'
        selectionColor='#017DFB'
        cursorColor='#017DFB'
        placeholderTextColor={'#017DFB'}
        activeOutlineColor='#017DFB'
        underlineColor='#017DFB'
        underlineColorAndroid={"#017DFB"}
        value={firstName}
        onChangeText={text => setFirstName(text)}
        style={styles.input}
      />
      <TextInput
        mode="outlined"
        label="Last Name"
        outlineColor='#017DFB'
        selectionColor='#017DFB'
        cursorColor='#017DFB'
        placeholderTextColor={'#017DFB'}
        activeOutlineColor='#017DFB'
        underlineColor='#017DFB'
        underlineColorAndroid={"#017DFB"}
        value={lastName}
        onChangeText={text => setLastName(text)}
        style={styles.input}
      />
      <TextInput
        mode="outlined"
        label="Phone"
        outlineColor='#017DFB'
        selectionColor='#017DFB'
        cursorColor='#017DFB'
        placeholderTextColor={'#017DFB'}
        activeOutlineColor='#017DFB'
        underlineColor='#017DFB'
        underlineColorAndroid={"#017DFB"}
        value={phone}
        onChangeText={text => setPhone(text)}
        style={styles.input}
        keyboardType="phone-pad"
      />
      <TextInput
        mode="outlined"
        label="Email"
        outlineColor='#017DFB'
        selectionColor='#017DFB'
        cursorColor='#017DFB'
        placeholderTextColor={'#017DFB'}
        activeOutlineColor='#017DFB'
        underlineColor='#017DFB'
        underlineColorAndroid={"#017DFB"}
        value={email}
        onChangeText={text => setEmail(text)}
        style={styles.input}
        keyboardType="email-address"
      />
      <TextInput
        mode="outlined"
        label="Amount"
        outlineColor='#017DFB'
        selectionColor='#017DFB'
        cursorColor='#017DFB'
        placeholderTextColor={'#017DFB'}
        activeOutlineColor='#017DFB'
        underlineColor='#017DFB'
        underlineColorAndroid={"#017DFB"}
        value={amount}
        onChangeText={text => setAmount(text)}
        style={styles.input}
        keyboardType="numeric"
      />
      
      <Button 
        mode="contained" 
        buttonColor='#017DFB'
        rippleColor={"#017DFB"}
        onPress={() => startPaymentModel()} 
        style={styles.button}
      >
        Pay via WebView
      </Button>

      <Button 
        mode="contained" 
        buttonColor='#017DFB'
        rippleColor={"#017DFB"}
        onPress={async () => {
          const response = await isWalletHasCards();
          response ? initiateApplePayPayment() : setupNewCard();
        }} 
        style={styles.button}
      >
        Pay with Apple Pay
      </Button>

      <Button 
        mode="outlined" 
        textColor='#017DFB'
        onPress={() => setupNewCard()} 
        style={styles.button}
      >
        Setup A Card
      </Button>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
    textAlign: 'center',
  },
  input: {
    marginBottom: 10,
  },
  button: {
    marginVertical: 10,
  },
});

License

MIT