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.

Property	Data Type	Required	Description
security_code	string	false	An unquie code generated for every invoice.
merchant_name	string	false	merchant_name or merchant_id
invoice_no	string	false	An unquie code generated for every invoice.
default_payment	string	false	Default all options. See all payment options details here. Ex: ["wave", "orange"]
brand_logo	string	false
callback_url	string	false	On successful payment, the customer is redirected to the specified URL, for example, a payment success page.
theme_color	string	false
prefill	object	false	See all prefill details here.

Prefill options

Use these following prefill options.

Property	Data Type	Required	Description
amount	object	false	The amount to be paid by the customer. Ex: {value: "100.00", disabled: false}
user_first_name	object	false	Ex: {value: "John", disabled: false}
user_last_name	object	false	Ex: {value: "Doe", disabled: false}
user_mobile_no	object	false	Ex: {value: "+2217777777777", disabled: false}
user_card_no	object	false	Ex: {value: "4111111111111111", disabled: false}
user_card_exp_yr	object	false	Ex: {value: "28", disabled: false}
user_card_exp_m	object	false	Ex: {value: "12", disabled: false}
user_card_cvv	object	false	Ex: {value: "123", disabled: false}
user_currency	string	false	Ex: "USD" or "XOF"

All Payment options

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

Vanilla JS

index.html

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

page.js

```js
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();
});
```

page.css

```css
    .your-button {}
```

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!