React Native SDK

Learn how to integrate Safepay into your React Native mobile application

A set of components allowing easy integration of Safepay Button and Safepay Checkout into your website, powered by zoid

1. Install through NPM or Yarn

In your project root you can run either one of the below commands (depending on what package manager you use)

Yarn

NPM

Install using Yarn:

$ yarn add @sfpy/react-native-sdk

2. Add react-native-webview to your dependencies

Yarn

NPM

Install using Yarn:

$ yarn add react-native-webview

3. Import

Import Safepay class from safepay library

4. Create a Safepay client by passing your config

You can now create payments and checkout links.

5. Set currency and amount

Since we're huge fans of React at Safepay, we've integrated this library into our products like Quick Links through the following React integration that ships out of the box with this library

Currency

Amount

6. Export the component

Since we're huge fans of React at Safepay, we've integrated this library into our products like Quick Links through the following React integration that ships out of the box with this library

7. Implement your styling here

Since we're huge fans of React at Safepay, we've integrated this library into our products like Quick Links through the following React integration that ships out of the box with this library

Ending Step

Since we're huge fans of React at Safepay, we've integrated this library into our products like Quick Links through the following React integration that ships out of the box with this library

Ending Step

Since we're huge fans of React at Safepay, we've integrated this library into our products like Quick Links through the following React integration that ships out of the box with this library

Feedback

What do you think of our integration document? Let us know here support@getsafepay.com

Preview

1
import React from 'react';
2
import SafepayCheckout from '@sfpy/react-native-sdk';
3
import {StyleSheet} from 'react-native';
4
            
5
const Home: React.FC = () => {
6
  return (
7
    <>
8
      <SafepayCheckout
9
        currency="PKR"
10
        amount={1000}
11
        clientKey="sec_xxxx-yourkey"
12
        environment={environment.SANDBOX}
13
        order_id="12345"
14
        buttonStyle={styles.button}
15
        buttonTheme={theme.DEFAULT}
16
        onPaymentCancelled={() => Alert.alert('Payment Cancelled!')}
17
        onPaymentComplete={() => Alert.alert('Payment Successfull')}
18
        onErrorFetchingTracker={() => {
19
          Alert.alert('error fetching tracker id'
20
          )}
21
      />
22
    </>
23
  );
24
};
25
export default Home;