Card 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 generate a payment Link on payment Link section Finally go to Settings>privacy under ClientId column to get your QOSKEY

Test

Here are the necessary information you will need for test

Test QosKey:

QCBJ001

Card Information For Test:

Number: 4456530000001096 date: 12/25   CCV: 123

Url for Test:

http://74.208.84.251:9014/public/v1/initTransaction

Production

On production you will need your QosKey on Settings>privacy under ClientId column and production URL

Url for Prod:

POST /https://b-card.qosic.net/public/v1/initTransaction

An example

Here's an example of how you'd implement HTML checkout

 <!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);
    }); 

 

}


    </script>

</body>

</html>

PreviousCheckout NextTransaction Status

Last updated 1 year ago