Nuanced Pumpkin Mavens

    @fluidcoins/react-native-fluidcoins-pay
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.9 • Public • Published

    Fluidcoins Pay React Native SDK

    Fluidcoins Pay.js is quick and secure way to receive crypto payments in your application. It works with all Javascript frameworks

    Documentation

    Getting Started

    1: Register a merchant account on Fluidcoins and get your public API key

    Installation

    You can install the package via NPM or Yarn;

    npm i @fluidcoins/react-native-fluidcoins-pay
    
    

    OR

    yarn add @fluidcoins/react-native-fluidcoins-pay
    

    Also install react-native-webview because it's a peer dependency for this package.

    Usage

    Hooks

    import * as React from 'react';
    
    import { StyleSheet, View, TouchableOpacity, Text, TextInput,} from 'react-native';
    import { FluidcoinsProvider, useFluidcoinsPay } from 'react-native-fluidcoins-pay';
    
    export default function App() {
      const [value, setValue] = React.useState('0');
    
      const config = {
        publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
        email: 'johndoe@test.com',
        onSuccess: () => {},
        amount: parseInt(value, 10) * 100,
      };
    
      const Button = () => {
        const { open } = useFluidcoinsPay();
    
        return (
          <View style={styles.button}>
            <TouchableOpacity onPress={open}>
              <Text style={styles.text}>Pay {value}</Text>
            </TouchableOpacity>
          </View>
        );
      };
      return (
        <View style={styles.container}>
          <FluidcoinsProvider {...config}>
            <TextInput
              style={styles.input}
              value={value}
              onChangeText={(v) => setValue(v)}
            />
            <Button />
          </FluidcoinsProvider>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        padding: 64,
      },
      box: {
        width: 60,
        height: 60,
        marginVertical: 20,
      },
      button: {
        backgroundColor: 'blue',
        paddingHorizontal: 16,
        paddingVertical: 16,
        borderRadius: 4,
        width: '100%',
      },
      text: {
        color: '#fff',
        fontSize: 18,
        textAlign: 'center',
      },
      input: {
        borderColor: 'green',
        borderWidth: 1,
        borderRadius: 2,
        marginBottom: 8,
        padding: 10,
        width: '100%',
      },
    });
    
    

    Configurations Options

    • publicKey
    • amount
    • email
    • onSuccess
    • onLoad (optional)
    • onClose (optional)
    • name (optional)
    • phone (optional)
    • metadata (optional)

    publicKey

    REQUIRED

    This is your Fluidcoins public API key from the Fluidcoins dashboard.

    amount

    REQUIRED

    This is amount in KOBO you'd want to collect from the customer.

    NOTE: The miumum amount is 500 NGN

    const config = {
        publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
        amount: parseInt(value, 10) * 100,
      };
    

    email

    REQUIRED

    This is the email address of the customer

    const config = {
        publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
        amount: parseInt(value, 10) * 100,
        email: 'johndoe@test.com',
      };
    

    onSuccess

    REQUIRED

    This is function that will be called when a successful transaction occurs.

    const config = {
      publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
      amount: parseInt(value, 10) * 100,
      email: 'johndoe@test.com',
      onSuccess: (data) => {
        console.log(data)
      }
    };
    

    A JSON payload is passed as argument with the structure below;

    {
        reference: TRANS_REFERENCE,
        coin: 'BTC',
        human_readable_amount: 1000,
        payment_status: 'underpaid | overpaid | paid_in_full'
    }
    

    Payment status could be overpaid, underpaid or paid_in_full

    onClose

    OPTIONAL

    This optional closure is called when a user closes the Fluidcoins Widget. It takes no argument

    const config = {
      publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
      amount: parseInt(value, 10) * 100,
      email: 'johndoe@test.com',
      onSuccess: (data) => {
        console.log(data)
      },
      onClose: () => {},
    };
    

    name

    OPTIONAL

    This optional parameter; which is the name of customer who want to initiate the transaction. It reflects on the Fluidcoins dashboard.

    const config = {
      publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
      amount: parseInt(value, 10) * 100,
      email: 'johndoe@test.com',
      onSuccess: (data) => {
        console.log(data)
      },
      onClose: () => {},
      name: 'Seun Akanni'
    };
    

    phone

    OPTIONAL

    This optional parameter; which is the phone number of customer who want to initiate the transaction. It reflects on the Fluidcoins dashboard.

    const config = {
      publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
      amount: parseInt(value, 10) * 100,
      email: 'johndoe@test.com',
      onSuccess: (data) => {
        console.log(data)
      },
      onClose: () => {},
      name: 'Seun Akanni',
      phone: '+2348090909090',
    };
    

    reference

    OPTIONAL

    This optional parameter; which is used to identify the initiated transaction.

    NOTE : It must be unique per transaction

    const config = {
      publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
      amount: parseInt(value, 10) * 100,
      email: 'johndoe@test.com',
      onSuccess: (data) => {
        console.log(data)
      },
      onClose: () => {},
      name: 'Seun Akanni',
      phone: '+2348090909090',
      reference: 'random-unique-identifier'
    };
    

    metadata

    OPTIONAL

    This optional parameter, which is should contain data you will like to be passed via webhooks about the transaction. NOTE: The metadata must be an OBJECT

    const config = {
      publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
      amount: parseInt(value, 10) * 100,
      email: 'johndoe@test.com',
      onSuccess: (data) => {
        console.log(data)
      },
      onClose: () => {},
      name: 'Seun Akanni',
      phone: '+2348090909090',
      reference: 'random-unique-identifier'
      metadata: {
          key: 1
      }
    };
    

    currency

    OPTIONAL

    Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar"

    NOTE: It defaults to default currency set on your Fluidcoins dashboard.

    const config = {
      publicKey: 'YOUR_FLUIDCOINS_PUBLIC_KEY',
      amount: parseInt(value, 10) * 100,
      email: 'johndoe@test.com',
      onSuccess: (data) => {
        console.log(data)
      },
      onClose: () => {},
      name: 'Seun Akanni',
      phone: '+2348090909090',
      reference: 'random-unique-identifier'
      metadata: {
          key: 1
      },
      currency: 'USD'
    };
    

    Install

    npm i @fluidcoins/react-native-fluidcoins-pay

    DownloadsWeekly Downloads

    2

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    66 kB

    Total Files

    39

    Last publish

    Collaborators

    • adelowo