# LiteAPI Payment - React Native

[![License](https://img.shields.io/github/license/stripe/stripe-react-native)](https://github.com/stripe/stripe-react-native/blob/master/LICENSE)

This component is designed to simplify the payment process for developers integrating liteAPI. It connects to liteAPI to calculate the price of the selected room and generates a payment form displaying the total amount due, all with just a few lines of code.

[See liteAPI documentation](https://docs.liteapi.travel/reference/overview)

## Requirements

Node 18 or higher

## Installation

Install the package with:

`npm install liteapi-react-native-payment-wrapper`

or

`yarn add liteapi-react-native-payment-wrapper`

## IOS

The LiteAPI Payment requires **Xcode 14.1** or later and is compatible with apps targeting **iOS 13** or above.
You'll need to run pod install in your iOS directory to install the native dependencies.

`cd ios && pod install`

## Android

Supports Android 5.0 (API level 21) and above; your `compileSdkVersion` must be 34. Android Gradle plugin supports version 4.x and above.

## Usage example

* `[OFFER-ID]`: You can retrieve the `offerID` by using the **hotels rates** API endpoint, as detailed in [the documentation](https://docs.liteapi.travel/reference/post_hotels-rates).
* `[YOUR-API-KEY]`: Your LiteAPI API KEY
* sandbox: the value is a boolean. Set it to true for sandbox testing.

```javascript
import { PayButton } from 'liteapi-react-native-payment-wrapper';
import LiteAPIPayment from 'liteapi-react-native-payment-wrapper/dist/LiteAPIPayment';

function App() {

    const handlePaymentSuccess = (transactionId: string) => {
        // Handle the book service
    };

    const handlePaymentFailure = () => {
        // handle Payment failure
    };


    return (
        <LiteAPIPayment sandbox={false}>
            <PayButton
              offerId="[OFFER-ID]"
              apiKey="[YOUR-API-KEY]"
              onPaymentSucceeded={handlePaymentSuccess}
              onPaymentFailed={handlePaymentFailure}
              buttonColor="blue"
              textColor="white"
              borderRadius={10}
              buttonWidth={200}
              buttonHeight={50}
              fontWeight="bold"
              buttonTitle="Book now"
            />
        </LiteAPIPayment>
    );
}
```

Once the payment is successful, the `onPaymentSucceeded` callback is triggered to retrieve the `transactionId`. You can then use this ID directly with the booking service to confirm the booking following the payment. [See documentation](https://docs.liteapi.travel/reference/post_rates-book)