LiteAPI Payment - React Native

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

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.
• [YOUR-API-KEY]: Your LiteAPI API KEY
• sandbox: the value is a boolean. Set it to true for sandbox testing.

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