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: '[e-mail]',
        }}
        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: '[e-mail]',
        }}
        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