klump-react-native

Klump Checkout React Native

React native package for implementing the Klump Checkout - Klump is a modern, simple to use platform that allows the user to collect payments from customers in installments using a payment card (debit or credit) or a bank account.

Before getting started

• Create a merchant account on useklump.com
• Checkout our get started guide to create your mechant account and retrieve your API Keys.

Getting Started

This library would help you add Klump Checkout to your hybrid android/ios application in no time. All you need to do is ...

Installation

• To start using this package, simply install the package to your project using:

  npm install klump-react-native

• This package is dependent on react native webview. So add package to your project using:

  npm i react-native-webview

Usage

1. Import

To use this package, your must import the package in the file where you define all your routes using:

	import KlumpCheckout from 'klump-react-native';

2. Add KlumpCheckout view to the app navigator container

To use KlumpCheckout view, you need to add the view to the list of screens when defining your NavigationContainer.

  <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Checkout" component={KlumpCheckout}  options={{headerShown: false}} />
      </Stack.Navigator>
    </NavigationContainer>

3. Add your merchant public key

Declare your Merchant public key using:

  const publicKey = 'Klp_pk_......'

4. Define the Payment data object

Initialize the payment data object using:

  const data =
    {
      amount: 50000,
      shipping_fee: 0,
      currency: 'NGN',
      redirect_url: 'https://verygoodmerchant.com/checkout/confirmation',
      merchant_reference: 'what-ever-you-want-this-to-be',
      meta_data: {
        customer: 'Elon Musk',
        email: '[e-mail]'
      },
      items: [{
        image_url: "'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'",
        item_url: 'https://www.paypal.com/in/webapps/mpp/home',
        name: 'Awesome item',
        unit_price: '2000',
        quantity: 2,
      }]
    }

5. Define the callback function.

Define the Callback function to be run after completing checkout:

    var onComplete = (data) => {
      console.debug(data);
  }

6. Route to the checkout screen.

Route to the [KlumpCheckout] view pasing argumants using:

   <Button
        title="Complete checkout"
        onPress={() => navigation.navigate('Checkout', {publicKey, data, onComplete})}
    />