Seerit React Native SDK can be used to integrate the SeerBit payment gateway into your react native application.
Register for a merchant account on Seerbit Merchant Dashboard to get started.
npm install seerbit-react-native
npm install react-native
npm install react-native-webview
yarn add seerbit-react-native
yarn add react-native
yarn add react-native-webview
If you have any problems, questions or suggestions, create an issue here or send your inquiry to developers@seerbit.com
You should already have your API keys, If not, go to Accounts -> Settings Section -> API Keys section on dashboard.seerbitapi.com.
import React, { useRef, useState } from 'react';
import Seerbit, { ISeerbit } from 'seerbit-react-native'
import { View } from 'react-native';
export default function App() {
const [amount, setAmount] = useState<string>('20');
const seerBitCheckoutRef = useRef<ISeerbit>(null);
const startPay = () => {
seerBitCheckoutRef.current?.startPayment();
}
const paymentSuccessful = (resp: any) => {
//RETURNS A RESPONSE OBJECT
// {
// code: '00',
// message: 'APPROVED',
// payments: {},
// reference: {},
// }
//HERE YOU CAN MANAGE CLOSING AND RESTARTING A PAYMENT USING THE seerBitCheckout REFERENCE
//seerBitCheckoutRef.current?.endPayment()
//seerBitCheckoutRef.current?.startPayment()
// THIS CLOSES THE CHECKOUT IMMEDIATELY A PAYMENT IS SUCCESSFUL
seerBitCheckoutRef.current?.endPayment();
// YOU CAN ALSO DELAY AND DO SOME OTHER LOGIC BEFORE CLOSING THE CHECKOUT
// setTimeout(() => {
// seerBitCheckoutRef.current?.endPayment();
// }, 2000);
};
return (
<View style={{ flex: 1 }}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Seerbit
buttonText="Pay with SeerBit" //OPTIONAL
showButton={true} //OPTIONAL DEFAULTS TO TRUE
autoLoad={false} //OPTIONAL DEFAULTS TO TRUE
amount={amount} //REQUIRED
ActivityIndicatorColor="blue" //OPTIONAL
btnStyles={{
alignItems: 'center',
backgroundColor: "#000",
padding: 15,
marginTop: 100,
marginLeft: 30,
marginRight: 30,
borderRadius: 10
}} //OPTIONAL
textStyles={{
color: "#fff",
}} //OPTIONAL
ref={seerBitCheckoutRef} //REQUIRED
transaction_reference={new Date().getTime().toString()} //REQUIRED
currency="NGN" //OPTIONAL FOR NIGERIA
pocket_reference="" //OPTIONAL
vendor_id="" //OPTIONAL
description="PAYMENT WITH SEERBIT" //OPTIONAL
full_name="John Bello"
email="bellokola@mail.com"
close_prompt={false} //Disable the prompt when the cancel button is closed
close_on_success={false} //Immediately close the checkout after a successful transaction
country="NG" //OPTIONAL
public_key="SBTESTPUBK_4oCO2Xxp8wOtHxmyuqPZMIjbt4CRTKn0" //REQUIRED
tokenize={false} //OPTIONAL
onSuccess={(response: any) => {
paymentSuccessful(response)
}}
onCancel={() => {} }
recurrent={false} // Recurrent Payment
planId="" // Subscription Plan ID
productId="" //Product ID
customization={{
theme: {
border_color: "#000000",
background_color: "#004C64",
button_color: "#0084A0",
},
payment_method: ["card", "account", "transfer", "wallet", 'ussd'],
confetti: true, // default true;
}}
callbackurl={'https://google.com'}
setAmountByCustomer={false}
onError={() => { console.log('onError=++++=') }}
/>
</View>
</View>
)
}
MIT