# Hosted Checkout

{% hint style="info" %}
There are two important implementation in this section

* Backend implementation
* Frontend implementation
  {% endhint %}

{% hint style="info" %}
BASE URL: <mark style="color:purple;"><https://airgate.ng/api2checkout></mark>
{% endhint %}

### API/Backend Implementation:

With just few steps, you can integrate a smooth payment experience for your users in your current applications by using the Airgate Payment Link Rest API

1. Send a POST request to this endpoint `/payment_initiate_hosted`

```javascript
const axios = require('axios');
let data = JSON.stringify({
  "amount": 1000,
  "user": {
    "name": "Alex Hunter",
    "phone": "08134575575",
    "email": " alexhunter@callphoneng.com "
  },
  "callback_url": <YOUR_CALLBACK_URL>,
  "customer_transaction_ref": <YOUR_UNIQUE_REFERENCE>, // optional
});

let config = {
  method: 'post',
  maxBodyLength: Infinity,
  url: '/payment_initiate_hosted' ,
  headers: { 
    'secret-key': 'YOUR_SECRET_KEY', 
    'merchant-key': 'YOUR_MERCHANT_KEY', 
    'Content-Type': 'application/json'
  },
  data : data
};

axios.request(config)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
});
```

{% hint style="info" %}
**`amount`**  **`user`** and **`callback_url`** are important payload you must include in your request body.

* The **callback\_url** represent the endpoint that will be called when a payment process completes. When the payment process reaches a completed state such as ***Success***, ***Failed***, or ***Cancelled**,* Airgate will trigger a request to your endpoint.
* The **user** object represent your customer's information, and an electronic or SMS receipt will be sent to the provided contact details.
  {% endhint %}

### Frontend Implementation

2. If above request was successful, you should get a response in the format below. You can decide to redirect your customer to the link, render via WebView, etc., it's up to you

```javascript
  { 
   "message": "payment initiated", 
   "link": "https://pay.airgate.ng/payment_process/hosted/c5683ed4-a5d9-48ab-9812-a2da9da4703b?mode=sandbox&callback=https://airgate.ng" 
 }
```

3. Once payment process is completed and the request hits your server, make a GET request to this endpoint to confirm transaction status `/payment_process/confirmation/{AIRGATE_TRANSACTION_REF}`  or `/payment_process/confirmation_by_cutomer_ref/{CUSTOMER_TRANSACTION_REF}`&#x20;

```javascript
let config = {
  method: 'GET',
  url: '/payment_process/confirmation/{AIRGATE_TRANSACTION_REF}',
  headers: { 
    'mode': <YOUR_MODE>
  }
};

axios.request(config)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
});

```
