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'
};