Fluidcoins Pay.js is quick and secure way to receive crypto payments in your application. It works with all Javascript frameworks
1: Register a merchant account on Fluidcoins and get your public API key
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.
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: '[email protected]',
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%',
},
});
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: '[email protected]',
};
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: '[email protected]',
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: '[email protected]',
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: '[email protected]',
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: '[email protected]',
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: '[email protected]',
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: '[email protected]',
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: '[email protected]',
onSuccess: (data) => {
console.log(data)
},
onClose: () => {},
name: 'Seun Akanni',
phone: '+2348090909090',
reference: 'random-unique-identifier'
metadata: {
key: 1
},
currency: 'USD'
};