# Carte

Vous créez un formulaire HTML standard contenant les détails de paiement. Lorsque le client soumet le formulaire, il sera redirigé vers notre page de paiement où il pourra effectuer le paiement par Mobile Money ou par carte de crédit.

&#x20;**Integration du Checkout**

Créez un compte sur la plateforme Qos et obtenez votre QOSKEY en suivant ces quelques étapes : générez  un lien de paiement dans la section des liens de paiement, enfin, allez dans les paramètres> Clé API sous la colonne ClientId pour obtenir votre QOSKEY.

**Teste**

Voici les informations nécessaires dont vous aurez besoin pour tester :

Teste 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**

En production, vous aurez besoin de votre QosKey dans  paramètres > Clé API sous la colonne ClientId et de l'URL de production.

Url de Prod:

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

**Un exemple**

Voici un exemple de mise en œuvre de la caisse HTML (rafraîchissez la page si l'espace d'édition ne s'affiche pas automatiquement)

{% 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/checkout/carte.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.
