# 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:

```markup
QCBJ001
```

Card Information For Test:

```
Number: 4456530000001096 date: 12/25   CCV: 123
```

Url for Test:

```undefined
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:

<mark style="color:green;">`POST`</mark> `/`<https://b-card.qosic.net/public/v1/initTransaction>

**An example**

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

{% code lineNumbers="true" %}

```html
 <!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>
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://qosic.gitbook.io/qospay-eng/checkout/card-checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
