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 |