whapplepay_sdk

# WhapplePay SDK

WhapplePay SDK is a powerful tool for integrating Whapple Pay UI payment into your React Native applications. This library provides an easy-to-use payment form and integrates with Whapple Pay for seamless transactions.

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [Components](#components)
- [Props](#props)
- [Obtaining Client ID and Secret](#obtaining-client-id-and-secret)
- [Secure Payment Alerts](#secure-payment-alerts)
- [License](#license)
- [Contributing](#contributing)
- [Contact](#contact)

## Installation

1. **Install the WhapplePay SDK:**

To install the WhapplePay SDK, you can use npm or yarn. Run one of the following commands in your project directory:

```bash
npm install whapplepay_sdk

or

yarn add whapplepay_sdk

2. Install react-native-gesture-handler:

Since WhapplePay SDK depends on react-native-gesture-handler, you need to install it as well. Follow the steps below to install and link the gesture handler:

npm install react-native-gesture-handler

or

yarn add react-native-gesture-handler

3. Additional setup for react-native-gesture-handler:

For React Native apps, you must add the following import at the top of your entry file (usually index.js or App.js) before any other code:

import 'react-native-gesture-handler';

Also, ensure your app is wrapped in a GestureHandlerRootView component when using WhapplePay, as shown in the example below.

Usage

Import the WhapplePay component into your React Native application and render it with the required props. Below is a basic example:

// Import libraries
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { WhapplePay } from 'whapplepay_sdk'; // Ensure WhapplePay is a named import

const App = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <WhapplePay
        ClientId="your-client-id"
        ClientSecret="your-client-secret"
        amount="200"
      />
    </GestureHandlerRootView>
  );
};

export default App;

Example

import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { WhapplePay } from 'whapplepay_sdk';

const PaymentTest = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <WhapplePay
        ClientId="your-client-id"
        ClientSecret="your-client-secret"
        amount="200"
      />
    </GestureHandlerRootView>
  );
};

export default PaymentTest;

Components

WhapplePay

This component displays a payment form integrated with Whapple Pay.

Props

Prop	Type	Description
ClientId	string	Your Whapple Pay client ID. (Required for live integration)
ClientSecret	string	Your Whapple Pay client secret. (Required for secure transactions)
amount	string	The amount to be paid. (Required)

Obtaining Client ID and Secret

To obtain your ClientId and ClientSecret, you must create a Whapple Pay merchant account. Follow these steps:

1. Create a Whapple Pay Merchant Account:

   • Visit the Whapple Pay registration page and sign up for a merchant account.

2. Create an Express Merchant:

   • After creating your account, log in to your merchant dashboard.
   • Navigate to the Merchants section and create a new Express merchant.
   • Once created, you will find your ClientId and ClientSecret in the merchant details.

   These credentials will be required when initializing the payment process.

Secure Payment Alerts

When the user taps the "Pay Now" button, an alert will be displayed to inform them that the payment form is securely powered by Nnova Technologies. The alert includes an option to verify the form before proceeding.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any enhancements or bug fixes.

Contact

For any questions or support, feel free to reach out:

• Author: Nnova Technologies
• Email: [e-mail]
• Website: whapplepay.com

---

Thank you for using WhapplePay SDK! We hope you find it helpful for integrating payments into your React Native applications.

### Changes Made:
- Added instructions to install `react-native-gesture-handler` as it's a dependency for using WhapplePay.
- Included the necessary steps to wrap the app in `GestureHandlerRootView`.