deema SDK for BNPL Payment Service (React Native)

Introduction

The deema SDK for React Native enables seamless integration with our Buy Now, Pay Later (BNPL) payment service. It provides a streamlined API for developers to launch payment flows, handle statuses, and manage transactions effectively.

Prerequisites

Minimum Requirements:
- React Native 0.64 or higher.
- iOS 11.0+ or Android API Level 21+.

Installation

To include the Deema SDK in your React Native project:

Install the SDK using npm or yarn:

npm install dema-react-native-sdk
# or
yarn add dema-react-native-sdk

Install the dependencies for native platforms:

npx pod-install

Quick Start

Step 1: Import the SDK

Import the DeemaSDK component into your React Native app:

import DeemaSDK from 'dema-react-native-sdk';

Step 2: Initialize the SDK

Use the DeemaSDK component to configure the payment flow with your sdkKey, environment, currency, purchase amount, and merchant order ID.

import React from 'react';
import { View, Alert } from 'react-native';
import DeemaSDK from 'dema-react-native-sdk';

const App = () => {
  const handlePaymentStatus = (status, message) => {
    switch (status) {
      case 'success':
        Alert.alert('Payment Successful', message);
        break;
      case 'failure':
        Alert.alert('Payment Failed', message);
        break;
      default:
        Alert.alert('Payment Status', message);
        break;
    }
  };

  return (
    <DeemaSDK
      sdkKey="your-sdk-key"
      merchantOrderId="order123"
      amount={50.0}
      currencyCode="KWD"
      environment="sandbox" // or "production"
      onPaymentStatus={handlePaymentStatus}
    />
  );
};

export default App;

Example Integration

Basic Integration

Here is a basic example to integrate the Deema SDK into a React Native application:

import React, { useState } from 'react';
import { View, Text, Button, Alert } from 'react-native';
import DeemaSDK from 'dema-react-native-sdk';

const PaymentScreen = () => {
  const [showSDK, setShowSDK] = useState(false);

  const handlePaymentStatus = (status, message) => {
    switch (status) {
      case 'success':
        Alert.alert('Payment Successful', message);
        break;
      case 'failure':
        Alert.alert('Payment Failed', message);
        break;
      default:
        Alert.alert('Payment Status', message);
        break;
    }
    setShowSDK(false);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {showSDK ? (
        <DeemaSDK
          sdkKey="your-sdk-key"
          merchantOrderId="order123"
          amount={100.0}
          currencyCode="KWD"
          environment="sandbox"
          onPaymentStatus={handlePaymentStatus}
        />
      ) : (
        <Button title="Start Payment" onPress={() => setShowSDK(true)} />
      )}
    </View>
  );
};

export default PaymentScreen;

API Reference

Props

Prop Name	Type	Required	Description
`sdkKey`	`string`	Yes	Your SDK API key.
`merchantOrderId`	`string`	Yes	Unique identifier for the merchant order.
`amount`	`number`	Yes	The total purchase amount.
`currencyCode`	`string`	Yes	The currency code (e.g., `KWD`, `BHD`).
`environment`	`string`	Yes	Specifies the SDK environment (`sandbox` or `production`).
`onPaymentStatus`	`function`	Yes	Callback function to handle payment statuses (`success`, `failure`).

Payment Statuses

The onPaymentStatus callback provides the following statuses:

success: Payment completed successfully.
failure: Payment failed with an optional message.
unknown: An unexpected status occurred.

Example `onPaymentStatus` Callback

const handlePaymentStatus = (status, message) => {
  if (status === 'success') {
    console.log('Payment Successful:', message);
  } else if (status === 'failure') {
    console.error('Payment Failed:', message);
  } else {
    console.warn('Unknown Payment Status:', message);
  }
};

Troubleshooting

Common Issues

No order found:
- Ensure that sdkKey, merchantOrderId, amount, and currencyCode are correctly configured.
Callback not triggered:
- Verify that the onPaymentStatus function is properly defined and passed as a prop.
Network errors:
- Check your internet connection and ensure the correct environment (sandbox or production) is specified.

Handling Redirect Links

The SDK internally handles redirect links for the payment flow. Use the onPaymentStatus callback to capture the final payment status based on the navigation state.

Notes

For production, ensure the environment prop is set to "production".
Test the integration thoroughly in the sandbox environment before switching to production.

For further assistance, please contact Deema Support.