HTML JS checkout
You create a regular HTML form containing the payment details. When the customer submits the form, they'll be redirected to our payment page where they can complete the payment by Mobile Money or Credit Card.
Checkout integration
Create an account on the Qos platform and obtain Your QOSKEY by doing this few step First subscribe to CARD_API in offer section>offers Secondly generate a payment Link on payment Link section Finally go to Settings>privacy under ClientId column to get your QOSKEY
Test
Here are the necessaire information you will need for test
QCBJ001Number: 4456530000001096 date: 12/25 CCV: 123http://74.208.84.251:9014/public/v1/initTransactionProduction
On production you will need your QosKey on Settings>privacy under ClientId column and production URL
https://b-card.qosic.net/public/v1/initTransactionAn example
Here's an example of how you'd implement HTML checkout (refresh the page if the editor space does not show automatically)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Demo Checkout</title>
</head>
<body>
<div class="constainer p-3" >
<h1 class="p-2">Demo Checkout</h1>
<p class="p-2">
Payer 100 FCFA
</p>
<button onclick="sendRequest()" id="payButton " type="button" class="btn btn-primary">Pay Now</button>
</div>
<script>
function sendRequest() {
// initiale body for request ==> m = mandatory = obligatoire
var data = {
"type": "all", // in checkout value is mobile/card/all ==> m
"transref": new Date().getTime(), // transref ===> m et unique
"qosKey": "QCBJ137", // is provided by qos platform ==> m
"returnUrl": "https://www.qosic.com", // is callback redirection with parameter transref ans status ==> m
"amountDetails": {
"totalAmount": 100, // amount wil be pay by customer // ==> m
"currency": "XOF"
},
"saleDetails": {
"firstName": "jac", // m
"lastName": "Djac", // m
"middleName": "KJ",
"nameSuffix": "jac",
"title": "Mr", // m
"address1": "Cotonou", // m
"address2": "Cococodji",
"address4": "string",
"locality": "Litoral", // m
"administrativeArea": "",
"postalCode": "229", // m
"country": "Benin", // m
"district": "Bj", // m
"buildingNumber": "string",
"email": "jacques@qosic.com", // m
"emailDomain": "string",
"phoneNumber": "66895585", // m
"phoneType": "cel" // m
}
}
fetch("https://b-card.qosic.net/public/v1/initTransaction", {
// fetch("http://localhost:9011/public/v1/initTransaction", {
//fetch("https://b-checkout-api.qosic.net/public/v1/initTransaction", {
method: "POST",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
.then(response => response.json())
.then(res => {console.log(res)
window.location.href = res.url
// console.log("Request complete! response:", res);
});
/* var xhr = new XMLHttpRequest();
xhr.open("POST", 'https://b-checkout-api.qosic.net/public/v1/initTransaction', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (this.readyState != 4) return;
if (this.status == 200) {
var data = JSON.parse(this.responseText);
console.log(data)
// we get the returned data
}
// end of state change: it can be after some time (async)
};
xhr.send(JSON.stringify({
value: data
})); */
}
</script>
</body>
</html>