To accept payments online using the SafeHaven Checkout, add the SafeHaven Checkout JS script to your HTML page and configure the checkout as in the examples below.
Example 1 - With Redirect URL
<!DOCTYPE html>
<html lang="en">
<head>
<title>SafeHaven Checkout Demo</title>
</head>
<body>
<h1>Checkout Demo</h1>
<button onclick="payWithSafeHaven()">Click Me!</button>
<script src="https://checkout.safehavenmfb.com/assets/checkout.min.js"></script>
<script type="text/javascript">
let payWithSafeHaven = () => {
let checkOut = SafeHavenCheckout({
environment: "production", //sandbox || production
clientId: "{{ OAuth2 ClientID }}",
referenceCode: ''+Math.floor((Math.random() * 1000000000) + 1),
customer: {
firstName: "John",
lastName: "Doe",
emailAddress: "[email protected]",
phoneNumber: "+2348032273616"
},
currency: "NGN", // Must be NGN
amount: 100,
//feeBearer: "account", // account = We charge you, customer = We charge the customer
settlementAccount: {
bankCode: "090286", // 999240 = Sandbox || 090286 = Production
accountNumber: "{{ 10 Digits SafeHaven Account Number }}"
},
redirectUrl: "https://example.com/redirect",
//webhookUrl: "",
//customIconUrl: "https://safehavenmfb.com/assets/images/logo1.svg",
//metadata: { "foo": "bar" }
});
}
</script>
</body>
</html>
Example 2 - With Callback Function
<!DOCTYPE html>
<html lang="en">
<head>
<title>SafeHaven Checkout Demo</title>
</head>
<body>
<h1>Checkout Demo</h1>
<button onclick="payWithSafeHaven()">Click Me!</button>
<script src="https://checkout.safehavenmfb.com/assets/checkout.min.js"></script>
<script type="text/javascript">
let payWithSafeHaven = () => {
let checkOut = SafeHavenCheckout({
environment: "production", //sandbox || production
clientId: "{{ OAuth2 ClientID }}",
referenceCode: ''+Math.floor((Math.random() * 1000000000) + 1),
customer: {
firstName: "John",
lastName: "Doe",
emailAddress: "[email protected]",
phoneNumber: "+2348032273616"
},
currency: "NGN", // Must be NGN
amount: 100,
//feeBearer: "account", // account = We charge you, customer = We charge the customer
settlementAccount: {
bankCode: "090286", // 999240 = Sandbox || 090286 = Production
accountNumber: "{{ 10 Digits SafeHaven Account Number }}"
},
//webhookUrl: "",
//customIconUrl: "https://safehavenmfb.com/assets/images/logo1.svg",
//metadata: { "foo": "bar" },
onClose: () => { console.log("Checkout Closed") },
callback: (response) => { console.log(response) }
});
}
</script>
</body>
</html>
Heads Up!
All
SafeHavenCheckoutobject parameters commented out are optional parameters.
Checkout Demo
Try out the checkout yourself.