# react-native-paystack-popup

> A simple react-native webview library for paystack

Latest version **1.0.0** (published 2020-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-paystack-popup
pnpm add react-native-paystack-popup
yarn add react-native-paystack-popup
bun add react-native-paystack-popup
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-08-26 |
| First published | 2020-08-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Abel Joshua |
| Maintainers | iamabeljoshua |
| Keywords | react-native, webview, paystack, android, ios, payment, package |

## Links

- npm: https://www.npmjs.com/package/react-native-paystack-popup
- Repository: https://github.com/moonsat/React-Native-Paystack
- Homepage: https://github.com/moonsat/React-Native-Paystack#readme
- Issues: https://github.com/moonsat/React-Native-Paystack/issues
- npm.io page: https://npm.io/package/react-native-paystack-popup

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-native-webview](https://npm.io/package/react-native-webview.md) ^10.7.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-08-26
- 0.9.4 — 2020-08-26
- 0.9.3 — 2020-08-26
- 0.9.2 — 2020-08-26
- 0.9.1 — 2020-08-26
- 0.9.0 — 2020-08-26

## README

# Accept Paystack Payments in React Native Apps.

A super simple and lightweight react-native package for accepting payments using paystack. Doesn't require any form of linking, just install and start using.

## Installation
Add React-Native-Paystack-Popup to your project by running:

`npm install react-native-paystack-popup`

or

`yarn add react-native-paystack-popup`

## Dependency
This package is dependent on [react-native-webview](https://github.com/react-native-community/react-native-webview). Install the dependency by running the following command on your terminal:

`yarn add react-native-webview`

or 

`npm install react-native-webview`

## DEMO
<h1>
<img src="https://github.com/moonsat/React-Native-Paystack/raw/master/examples/screenshots/1.png" alt="Screenshot 1" width="280" height="500"/>

<img src="https://github.com/moonsat/React-Native-Paystack/raw/master/examples/screenshots/2.png" alt="Screenshot 2" width="280" height="500"/>

</h1>

### Usage Example

```jsx
import React, { useRef } from 'react';

import {
  View,
  Button,
} from 'react-native';

import PaystackWebView from 'react-native-paystack-popup';

const App = () => {

  const ref = useRef(null);
  
  const [showPayment, setShowPayment] = React.useState(false);

  return (

    <View style={{ flex: 1, alignItems:"center", justifyContent:"center" }}>

      {!showPayment && <Button onPress={()=>{
        setShowPayment(true)
      }} title="Checkout"   />}

      {showPayment && <PaystackWebView

        ref={ref} 
        
        onError={() => {

          setShowPayment(false);

          alert("Failed...")

        }}

        metadata={{ custom_fields: [{ display_name: "Demo Checkout" }] }}

        onDismissed={() => {

          ref.current.reload(); //reload if dismissed.

        }}

        onSuccess={(response) => { 
        
          setShowPayment(false);
        
          alert(`Transaction successful: ${response.reference}`) 
        
        }}
        
        paystackKey={"pk_xxxx-xxxx-xxxx-xxxx"} customerEmail={"abel@example.com"} amount={6000 * 100} />}

    </View>

  );

};
```

### CONFIGURATION
| Property        | Required           | Description  |
| ------------- |:-------------:| ------|
| paystackKey   | Yes | Paystack Public Key |
| customerEmail   | Yes | Customer email address |
| amount   | Yes | Amount (in the lowest currency value - kobo, pesewas or cent) |
| currency   | No | Currency charge should be performed in. It defaults to NGN |
| label   | No | String that replaces customer email as shown on the checkout form |
| metadata   | No | Object containing any extra information you want recorded with the transaction. Fields within the custom_field object will show up on customer receipt and within the transaction information on the Paystack Dashboard. |
| channels   | No | An array of payment channels to control what channels you want to make available to the user to make a payment with. Available channels include; `['card', 'bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']` |
| transactionRef   | No | Unique case sensitive transaction reference. Only -,., =and alphanumeric characters allowed. If you do not pass this parameter, Paystack will generate a unique reference for you. |
| onError   | No | Error callback function - failed loading paystack |
| onDismissed   | No | Callback function for when user dismisses / cancels the payment |
| onSuccess   | No | Callback function with a response parameter when payment was successfully completed. |
| indicatorColor   | No | Color name for the default loading indicator |
| renderIndicator   | No | Override this function and return a component to change the default loading indicator|

## Maintenance

This project is actively maintained by the following developers:

- [Abel Joshua](https://github.com/iamabeljoshua) ([Twitter @iamabeljoshua](https://twitter.com/iamabeljoshua))


### Example App

For more information and usage guidelines, check the [Examples App](https://github.com/moonsat/React-Native-Paystack/tree/master/examples).

If you encounter any problem using this library, open a new [issue](https://github.com/moonsat/React-Native-Paystack/issues)

### Contribution

If you want to make contribution to this library:

- Fork this project.
- Each new feature must be a new PR.
- Explain exactly what your PR is suppose to do.

Your PR will reviewed and merged!

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