Skip to main content
Version: Next

Payment Widget

Web Integrate​

PayCruiser® gives you an easy way to integrate your best payment system in your web app. It requires few steps to follow.

Checkout Options​

Use these following options.

PropertyData TypeRequiredDescription
security_codestringfalseAn unquie code generated for every invoice.
merchant_namestringfalsemerchant_name or merchant_id
invoice_nostringfalseAn unquie code generated for every invoice.
default_paymentstringfalseDefault all options. See all payment options details here. Ex: ["wave", "orange"]
brand_logostringfalse
callback_urlstringfalseOn successful payment, the customer is redirected to the specified URL, for example, a payment success page.
theme_colorstringfalse
prefillobjectfalseSee all prefill details here.

Prefill options​

Use these following prefill options.

PropertyData TypeRequiredDescription
amountobjectfalseThe amount to be paid by the customer. Ex: {value: "100.00", disabled: false}
user_first_nameobjectfalseEx: {value: "John", disabled: false}
user_last_nameobjectfalseEx: {value: "Doe", disabled: false}
user_mobile_noobjectfalseEx: {value: "+2217777777777", disabled: false}
user_card_noobjectfalseEx: {value: "4111111111111111", disabled: false}
user_card_exp_yrobjectfalseEx: {value: "28", disabled: false}
user_card_exp_mobjectfalseEx: {value: "12", disabled: false}
user_card_cvvobjectfalseEx: {value: "123", disabled: false}
user_currencystringfalseEx: "USD" or "XOF"

All Payment options​

Payment TypeValue
Credit Card"cc"
Paypal"paypal"
Paycruiser"paycruiser"
Wave"wave"
Orange Money"orange"
Free Money"free"
E Money"express"
Stable Coin"usdc"

Vanilla JS​

Step 1 (add checkout js file)​

Add our single JS file in your index.html file.

Step 2 (add options)​

After adding JS file, now you can open paycruiser payment widget into your site.

<button id="paycruiser-button">Pay</button>
<script>
var pay = new window.Paycruiser();
var options = {
invoice_no: "1234",
security_code: "258975",
merchant_name: "your_merchant_name",
brand_logo: "your_brand_logo",
prefill: {
amount: {value: "10.00", disabled: true},
user_first_name: {value: "John", disabled: false},
user_last_name: {value: "Doe", disabled: false},
user_card_no: {value: "4111111111111111", disabled: false}, // VISA
user_card_exp_yr: {value: "28", disabled: false}, // 2028
user_card_exp_m: {value: "12", disabled: false},
user_card_cvv: {value: "123", disabled: false},
},
};
try {
// return promise wheather it's successfully initialized or not
pay.init().then(console.log).catch(console.log);
} catch (err) {
console.log(err);
}
// Your custom payment button
var paycruiserBtn = document.getElementById("paycruiser-button");

// Adding listner and open widget
paycruiserBtn.addEventListener("click", function (e) {
pay.open(options);
e.preventDefault();
});
</script>

React​

First include checkout js file in index.html

<script src="https://storage.googleapis.com/paycruiser/paycruiser-checkout.js"></script>

Then update YourComponet.tsx

import {useEffect, useRef} from "react";

interface Iopt {
invoice_no: string;
security_code: string;
merchant_name: string;
brand_logo: string;
prefill: {
amount: {value: string; disabled: boolean};
user_first_name: {value: string; disabled: boolean};
user_last_name: {value: string; disabled: boolean};
user_card_no: {value: string; disabled: boolean}; // VISA "4111111111111111"
user_card_exp_yr: {value: string; disabled: boolean}; // 2028
user_card_exp_m: {value: string; disabled: boolean};
user_card_cvv: {value: string; disabled: boolean};
};
}

function App() {
// Payment widget ref
const pay: any = useRef(null);

useEffect(() => {
try {
pay.current = (window as any)?.Paycruiser();
} catch (err) {
console.error(err);
}

// If payment ref then intialize only once
if (pay.current) {
pay.current.init().then(console.log).catch(console.log);
}
}, []);

const paymentHandler = (options?: Iopt) => {
// open widget with checkout options
if (pay.current && options) pay.current.open({...options});

// open widget without any checkout options
if (pay.current && !options) pay.current.open();
};

return (
<>
<section className="container">
<h4>Test Paycruiser page demo unsing React</h4>
<button className="btn" onClick={() => paymentHandler()}>
Pay
</button>
</section>
</>
);
}

export default App;

Congratulations, you have succesfully integrate PayCruiser® payment widget in your application!