# @sfpy/react-native-sdk

> safepay react-native checkout sdk for merchants to consume for the easiest checkout experience

Latest version **2.0.2** (published 2023-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sfpy/react-native-sdk
pnpm add @sfpy/react-native-sdk
yarn add @sfpy/react-native-sdk
bun add @sfpy/react-native-sdk
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2023-07-13 |
| First published | 2022-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 18.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Safepay |
| Maintainers | sfpy |
| Keywords | React Native, SafepayCheckout, SafepayCheckout-React-Native-sdk, Paymentgateway, Checkout |

## Links

- npm: https://www.npmjs.com/package/@sfpy/react-native-sdk
- npm.io page: https://npm.io/package/@sfpy/react-native-sdk

## Dependencies (2)

- [query-string](https://npm.io/package/query-string.md) ^7.1.1
- [react-native-webview](https://npm.io/package/react-native-webview.md) ^11.26.1

## Recent versions

- 2.0.2 (latest) — 2023-07-13
- 2.0.1 — 2023-07-12
- 2.0.0 — 2022-08-18
- 1.0.2 — 2022-05-26
- 1.0.1 — 2022-05-24
- 1.0.0 — 2022-05-24

## README

# 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](https://engineering.brigad.co/demystifying-react-native-modules-linking-964399ec731b) 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

``` ts
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|

---
_Source: https://npm.io/package/@sfpy/react-native-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._