> ## Documentation Index
> Fetch the complete documentation index at: https://docs.payaza.africa/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment Page

> Welcome to the Payment Page documentation. This guide will help you integrate our payment gateway and implement a secure and seamless checkout experience on your website.

## Introduction

Payment Page provides a secure and PCI-compliant solution for processing online payments. It allows your customers to complete their transactions on a secure payment page hosted by our payment gateway, reducing your PCI scope and ensuring a seamless checkout experience.

## Getting Started

### Retrieving your API Keys.

To use our Payment Page, you will need an API key. Your API keys are available on your dashboard. Follow the steps below to access them:

1. Login to your **Payaza** dashboard
2. Click on the **Settings** option which is located on the left side-bar of the dashboard
3. Click the **Developers** option from the dropdown menu
4. Click on the **Generate Keys** Button to generate your API keys which can also be copied.

### Integration Steps.

1. Payment Page Checkout URL - [https://payment.payaza.africa/](https://payment.payaza.africa/) Redirects the customer to the Payment Page Checkout page, appending the following parameters to the URL provided above.
2. On the Payment Page Checkout page, the customer will enter their payment details and complete the transaction.
3. Sample URL:

```
https://payment.payaza.africa/?merchant_key=PZ78-PKLIVE-8D51A540-4A36-4901-A314-43C9AB859068&connection_mode=live&checkout_amount=500&currency_code=NGN&email_address=johndoe@gmail.com&first_name=John&last_name=Doe&phone_number=23480123456&transaction_reference=testpayrment&redirect_url=https://google.com
```

### HTML Code Block

```md theme={null}
<!DOCTYPE html>
<html>
<head>
  <title>Sample Webpage</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #333333;
      text-align: center;
    }

    form {
      max-width: 400px;
      margin: 20px auto;
    }

    label {
      display: block;
      font-weight: bold;
      margin-bottom: 5px;
    }

    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #dddddd;
      border-radius: 3px;
    }

    select {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #dddddd;
      border-radius: 3px;
    }

    input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color: #4caf50;
      color: #ffffff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: #45a049;
    }

  </style>
</head>
<body>
  <div class="container">
    <h1>Sample Webpage</h1>

    <form action="process_form.php" method="POST" id="myForm">
      <label for="merchant_key">Merchant Key:</label>
      <input type="text" id="merchant_key" name="merchant_key" required>

      <label for="connection_mode">Connection Mode:</label>
      <select id="connection_mode" name="connection_mode">
        <option value="Live">Live</option>
        <option value="Test">Test</option>
      </select>

      <label for="checkout_amount">Amount:</label>
      <input type="number" id="checkout_amount" name="checkout_amount" required>

      <label for="currency_code">Currency Code:</label>
      <select id="currency_code" name="currency_code">
        <option value="NGN">NGN</option>
        <option value="USD">USD</option>
      </select>

      <label for="email_address">Email:</label>
      <input type="email" id="email_address" name="email_address" required>

      <label for="first_name">First Name:</label>
      <input type="text" id="first_name" name="first_name" required>

      <label for="last_name">Last Name:</label>
      <input type="text" id="last_name" name="last_name" required>

      <label for="phone_number">Phone:</label>
      <input type="tel" id="phone_number" name="phone" required>


      <label for="transaction_reference">Reference:</label>
      <input type="text" id="transaction_reference" name="transaction_reference" required>

      <!-- These are to be sent in the addition_details in json format. They are specific to your use case if you have any extra parameter you want to see on your dashboard -->
      <!-- This is an example for an Airline -->

      <label for="pnr">PNR:</label>
      <input type="text" id="pnr" name="Passenger Name Record" required>

      <label for="ticket_number">Ticket Number:</label>
      <input type="text" id="ticket_number" name="Ticket Number" required>


      <label for="redirect_url">Redirect URL:</label>
      <input type="text" id="redirect_url" name="redirect_url" required>

      <input type="submit" value="Submit">
    </form>

  <script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
      event.preventDefault(); // Prevent form submission

      // Get form field values
      var merchant_key= document.getElementById("merchant_key").value;
      var connection_mode= document.getElementById("connection_mode").value;
      var checkout_amount = document.getElementById("checkout_amount").value;
      var currency_code = document.getElementById("currency_code").value;
      var email_address = document.getElementById("email_address").value;
      var first_name = document.getElementById("first_name").value;
      var last_name = document.getElementById("last_name").value;
      var phone_number = document.getElementById("phone_number").value;
      var transaction_reference = document.getElementById("transaction_reference").value;

      // Note that these are to be passed as optional parameters
      var pnr = document.getElementById("pnr").value;
      var ticket_number = document.getElementById("ticket_number").value;

      // compose the additional details as a JSON object
      var additional_details = JSON.stringify({
        "pnr": pnr,
        "ticket_number" : ticket_number
        });

      var redirect_url = document.getElementById("redirect_url").value;

      // Build URL with form field values
      var url = "https://payment.payaza.africa?merchant_key=" + encodeURIComponent(merchant_key) +
                "&connection_mode=" + encodeURIComponent(connection_mode) +
                "&checkout_amount=" + encodeURIComponent(checkout_amount) +
                "&currency_code=" + encodeURIComponent(currency_code) +
                "&email_address=" + encodeURIComponent(email_address) +
                "&first_name=" + encodeURIComponent(first_name) +
                "&last_name=" + encodeURIComponent(last_name) +
                "&phone_number=" + encodeURIComponent(phone_number) +
                "&transaction_reference=" + encodeURIComponent(transaction_reference) +
                "&additional_details=" + encodeURIComponent(additional_details) + // Encoded JSON; Note that this is optional
                "&redirect_url=" + encodeURIComponent(redirect_url);
        const a = document.createElement('a')
        a.href = url
        a.click()

      
    });
  </script>

  </div>
</body>
</html>
```

### Arguments

| Parameter              | Description                                                                                                           | Format |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------- | ------ |
| merchant\_key          | Your public API key.                                                                                                  | string |
| connection\_mode       | Connection mode. (Live or Test).                                                                                      | string |
| checkout\_amount       | The amount to charge the customer.                                                                                    | double |
| currency\_code         | The currency to charge in.                                                                                            | string |
| email\_address         | The email address of the customer.                                                                                    | string |
| first\_name            | The first name of the customer.                                                                                       | string |
| last\_name             | The last name of the customer.                                                                                        | string |
| phone\_number          | The phone number of the customer.                                                                                     | string |
| transaction\_reference | The unique identifier given to a particular transaction by the merchant.                                              | string |
| additional\_details    | The custom data to your payload (should be encoded).                                                                  | JSON   |
| redirect\_url          | The URL the customer is redirected to (should be encoded). This must be the last parameter in the request if included | string |
