react-native-paystack-webview-sdk

Paystack React Native SDK enables easy integration of Paystack payments into your React Native applications using Web View.

demo

Features

Paystack component used for accepting payment in your react native applications

• Integrated with thePaystack InlineJS popup V2
• TypeScript to ensure type-safe code and better DX
• Support for Expo and React native CLI
• Flexible implementation following the paystack docs

credits to the React-Native-Paystack-WebView by just1and0 for inspiration.

Installation

Npm

npm install react-native-paystack-webview-sdk

Yarn

yarn  react-native-paystack-webview-sdk

Expo

expo  install react-native-paystack-webview-sdk

Important: This package has a peer dependency react-native-webview which is requred for this package to work coorrectly

Example 1

import * as React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import PayStackWebView, {
  TransactionSuccessResponse,
  CancelResponse,
} from 'react-native-paystack-webview-sdk';

export default function App() {
  return (
    <View style={styles.container}>
      <PayStackWebView
        autoStart={true}
        amount={300}
        customer={{
          email: '[email protected]',
        }}
        publicKey="pk_test_xxxxxx"
        channels={[
          'bank',
          'bank_transfer',
          'card',
          'mobile_money',
          'qr',
          'ussd',
        ]}
        onCancel={(data: CancelResponse) => {
          // handle cancel response
        }}
        onSuccess={(data: TransactionSuccessResponse) => {
          // handle success response
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

Exmaple 2

Use with Ref to trigger using a button

import * as React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import PayStackWebView, {
  TransactionSuccessResponse,
  CancelResponse,
} from 'react-native-paystack-webview-sdk';

// Note: For typescript  support
type TPayStackWebViewRef = React.ElementRef<typeof PayStackWebView>;

export default function App() {
  const PayStackWebViewRef = React.useRef < TPayStackWebViewRef > null;

  return (
    <View style={styles.container}>
      <PayStackWebView
        amount={300}
        customer={{
          email: '[email protected]',
        }}
        publicKey="pk_test_xxxxxx"
        ref={PayStackWebViewRef}
        onCancel={(data: CancelResponse) => {
          // handle cancel response
        }}
        onSuccess={(data: TransactionSuccessResponse) => {
          // handle success response
        }}
      />
      <Button
        onPress={() => {
          PayStackWebViewRef.current?.start();
        }}
        title={'Pay Now'}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

Props

| Name | Description | Required | Value | type | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------- | --------------------------------------- | -------- | | publicKey | Your public key from Paystack. Use test key for test mode and live key for live mode. | yes | | string | | customer | Customer information e.g email (Required) ,label, first name, last name | no | | object | | trnxRef | Unique case sensitive transaction reference.If you do not pass this parameter, Paystack will generate a unique reference for you | no | | string | | amount | Amount in the subunit of the supported currency you are debiting the customer.Do not pass this if creating subscriptions. | no | | number | | channels | An array of payment channels to control what channels you want to make available to the user to make a payment with. | no | ['bank','card','bank_transfer'] | Array[] | | autoStart | to auto initialize transaction | no | fasle | boolean | | indicatorColor | activitiy indicator color | no | #3bb75e | string | | metaData | Object containing any extra information you want recorded with the transaction. | no | | object | | currency | On of the supported currency the charge should be performed in.It defaults to your integration currency. | no | NGN | string | | subscriptions | Plan code generated from creating a plan. This makes the payment become a subscription payment. | no | | object | | onSuccess | callback that triggers when webview close or cancels | yes | | Function | | onCancel | callback that triggers when webview close or cancels | yes | | Function | | onWebMessage | callback to handle web view message event | no | | Function |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library