@sfpy/react-native-sdk

Safepay React Native Checkout

This project aims to be the easiest way for our merchants to consume safepay-checkout in their React Native applications.

Installation

npm:

npm install @sfpy/react-native-sdk

yarn:

yarn add @sfpy/react-native-sdk

1. Add react-native-webview to your dependencies

$ npm install --save react-native-webview

Android:

Android - react-native-webview version <6: This module does not require any extra step after running the link command.

Android - react-native-webview version >=6.X.X: Please make sure AndroidX is enabled in your project by editting android/gradle.properties and adding 2 lines:

For Android manual installation, please refer to this article where you can find detailed step on how to link any react-native project.

iOS:

If using CocoaPods, in the ios/ or macos/ directory run:

$ pod install

Usage

SafepayCheckout

SafepayCheckout component is the main component which wraps everything and provides a couple of props (see Config below).

Example

import React from 'react';
import SafepayCheckout from '@sfpy/react-native-sdk';
import {StyleSheet} from 'react-native';

const Home: React.FC = () => {
  return (
    <>
      <SafepayCheckout
        amount={455}
        clientKey="sec_xxxx-yourkey"
        currency="PKR"
        environment={environment.SANDBOX}
        order_id="12345"
        buttonStyle={styles.button}
        buttonTheme={theme.DEFAULT}
        onPaymentCancelled={() => Alert.alert('Payment Cancelled!')}
        onPaymentComplete={() => Alert.alert('Payment Successfull')}
        onErrorFetchingTracker={() => Alert.alert('error fetching tracker id')}
      />
    </>
  );
};
export default Home;

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: 'lightblue',
    padding: 10,
  },
  btn_text: {
    color: 'black',
    fontSize: 15,
    fontWeight: 'bold',
  },
});

Props Configuration

Property	Type	Description
amount	number	use this to specify amount
clientKey	string	use your client key
currency	string	specify currency for your transactions
environment	enum	use this to specify environment
order_id	string	use this for your order id
buttonTheme	enum	use this to specify theme to your button
buttonStyle	string	use this to give styles to your button
onPaymentComplete()	function	use this to notify merchants if payment is complete
onErrorFetchingTracker()	function	use this to notify merchants if there is an error in fetching tracker id
onPaymentCancelled()	function	use this to notify merchants if customer is cancelling the payment