Usage

Rendering the Payment Form

The FellohPayment component renders a WebView containing the Felloh payment form. It will fill the width of its parent container. Wrap it in a View with appropriate flex or height styling.

Required Props

Name
publicKey
Type
string
Description
Your publishable API key from the Felloh dashboard.
Name
paymentId
Type
string
Description
A valid UUID identifying the ecommerce payment instance, generated via the Felloh API.

Basic Rendering

import { View } from 'react-native';
import { FellohPayment } from
  '@felloh-org/react-native-sdk';

function PaymentScreen() {
  return (
    <View style={{ flex: 1 }}>
      <FellohPayment
        publicKey="pk_live_YOUR_PUBLIC_KEY"
        paymentId="your-payment-uuid"
      />
    </View>
  );
}

Custom Pay Button

You can hide the built-in pay button and trigger payment from your own UI by setting design.pay_button to false in the options and calling pay() via a ref.

This is useful when you want to match your app's design language or add custom validation before submitting payment.

Custom Pay Button

import React, { useRef } from 'react';
import { View, TouchableOpacity, Text }
  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"
        options={{
          design: { pay_button: false },
        }}
      />
      <TouchableOpacity
        onPress={() =>
          paymentRef.current?.pay()
        }
      >
        <Text>Pay Now</Text>
      </TouchableOpacity>
    </View>
  );
}

Events

Pass callback props to receive payment lifecycle events.

Prop	Fires when
`onRender`	The payment form finishes loading
`onSuccess`	Payment completes successfully
`onDecline`	Payment is declined
`onProcessing`	Payment is submitted and processing

The onSuccess, onDecline, and onProcessing callbacks receive a TransactionData object with a transactionID property.

Event Callbacks

<FellohPayment
  publicKey="pk_live_YOUR_PUBLIC_KEY"
  paymentId="your-payment-uuid"
  onRender={() => {
    console.log('Form rendered');
  }}
  onSuccess={(data) => {
    console.log(
      'Success:',
      data.transactionID
    );
    // Navigate to confirmation
  }}
  onDecline={(data) => {
    console.log(
      'Declined:',
      data.transactionID
    );
    // Show error to user
  }}
  onProcessing={(data) => {
    console.log(
      'Processing:',
      data.transactionID
    );
    // Show loading indicator
  }}
/>

Payment Status

You can check the current state of the payment form at any time via the getStatus() ref method.

The SDK also exports status constants for comparison.

Status	Description
`PRELOAD`	The form has not yet loaded
`RENDERED`	The form is loaded and ready for input
`PROCESSING`	Payment has been submitted and is processing
`SUCCESS`	Payment completed successfully
`DECLINED`	Payment was declined

Checking Status

import {
  PRELOAD,
  RENDERED,
  PROCESSING,
  SUCCESS,
  DECLINED,
} from '@felloh-org/react-native-sdk';

const status =
  paymentRef.current?.getStatus();

switch (status) {
  case PRELOAD:
    console.log('Loading...');
    break;
  case RENDERED:
    console.log('Ready for payment');
    break;
  case PROCESSING:
    console.log('Processing...');
    break;
  case SUCCESS:
    console.log('Complete!');
    break;
  case DECLINED:
    console.log('Declined');
    break;
}