Getting Started

The official React Native SDK for embedding Felloh payment forms in your React Native app. Uses a WebView-based component to render a secure payment form with card payments and open banking.

- Github Repository

Requirements

React Native 0.60+
react-native-webview peer dependency

Installation

Install the SDK and its peer dependency.

Install the SDK

npm install @felloh-org/react-native-sdk react-native-webview

Or with Yarn

yarn add @felloh-org/react-native-sdk react-native-webview

For iOS, install the CocoaPods dependencies:

iOS Setup

cd ios && pod install

The FellohPayment component renders the Felloh payment form inside a WebView. Pass your public key, a payment ID (obtained from your backend via the Ecommerce API), and callback props for payment events.

Use a ref to access imperative methods like pay() and getStatus().

The paymentId must be created server-side using one of the backend SDKs or the REST API. See the Ecommerce resource for details.

Quick Start

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import {
  FellohPayment,
  FellohPaymentHandle,
} from '@felloh-org/react-native-sdk';

function PaymentScreen() {
  const paymentRef =
    useRef<FellohPaymentHandle>(null);

  return (
    <View style={{ flex: 1 }}>
      <FellohPayment
        ref={paymentRef}
        publicKey="pk_live_YOUR_PUBLIC_KEY"
        paymentId="your-payment-uuid"
        onRender={() =>
          console.log('Form loaded')
        }
        onSuccess={(data) =>
          console.log(
            'Success',
            data.transactionID
          )
        }
        onDecline={(data) =>
          console.log(
            'Declined',
            data.transactionID
          )
        }
      />
      <Button
        title="Pay Now"
        onPress={() =>
          paymentRef.current?.pay()
        }
      />
    </View>
  );
}

Configuration

Pass an options prop to configure the payment form behaviour.

Props

Name
publicKeyrequired
Type
string
Description
Your publishable API key from the Felloh dashboard. This is safe to include in client-side code.
Name
paymentIdrequired
Type
string
Description
A valid UUID identifying the ecommerce payment instance, generated via the Felloh API.
Name
options
Type
FellohPaymentOptions
Description
Optional configuration object. See below.
Name
onRender
Type
() => void
Description
Called when the payment form finishes loading.
Name
onSuccess
Type
(data: TransactionData) => void
Description
Called when payment completes successfully.
Name
onDecline
Type
(data: TransactionData) => void
Description
Called when payment is declined.
Name
onProcessing
Type
(data: TransactionData) => void
Description
Called when payment is submitted and processing.

FellohPaymentOptions

Name
sandbox
Type
boolean
Description
Use the sandbox environment for testing. Defaults to false.
Name
moto
Type
boolean
Description
Enable Mail Order/Telephone Order mode. Defaults to false.
Name
design.pay_button
Type
boolean
Description
Show the built-in pay button. Defaults to true.
Name
design.store_card
Type
boolean
Description
Show the card storage option. Defaults to true.

Environments

Option	URL
Production (default)	`https://pay.felloh.com`
Sandbox	`https://pay.sandbox.felloh.com`

Full Configuration

<FellohPayment
  ref={paymentRef}
  publicKey="pk_live_YOUR_PUBLIC_KEY"
  paymentId="your-payment-uuid"
  options={{
    sandbox: true,
    moto: false,
    design: {
      pay_button: true,
      store_card: false,
    },
  }}
  onSuccess={(data) => {
    console.log(data.transactionID);
  }}
  onDecline={(data) => {
    console.log(data.transactionID);
  }}
/>