Negotiate Pushing Milestone

    react-native-paystack-popup

    1.0.0 • Public • Published

    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. Install the dependency by running the following command on your terminal:

    yarn add react-native-webview

    or

    npm install react-native-webview

    DEMO

    Screenshot 1 Screenshot 2

    Screenshot 1 Screenshot 2

    Usage Example

    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:

    Example App

    For more information and usage guidelines, check the Examples App.

    If you encounter any problem using this library, open a new issue

    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!

    Install

    npm i react-native-paystack-popup

    DownloadsWeekly Downloads

    4

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • iamabeljoshua