Add the payment widget to your website

<form id="paymentForm">
  <label for="email-address">Email address</label>
  <input type="email" id="email-address" required />

  <label for="amount">Amount (in Naira)</label>
  <input type="number" id="amount" min="1" required />

  <button type="submit">Pay now</button>
</form>

<script src="https://sdk.afarapartners.com/omni-payment-gateway-sdk"></script>
<script>
  document.getElementById("paymentForm").addEventListener("submit", function (e) {
    e.preventDefault();

    var handler = AfaraPayPop.setup({
      key: "TPK_your_test_public_key", // 1. Paste your PUBLIC key here
      email: document.getElementById("email-address").value,
      // 2. The amount is in kobo, so multiply Naira by 100
      amount: Math.round(Number(document.getElementById("amount").value) * 100),
      currency: "NGN",
      callback: function (response) {
        // Payment finished. Send the customer to a page that confirms the order.
        window.location.href = "/thank-you?reference=" + response.reference;
      },
      onClose: function () {
        console.log("The customer closed the widget.");
      }
    });

    handler.openIframe();
  });
</script>

import { useState } from "react";

// Add this once to public/index.html:
// <script src="https://sdk.afarapartners.com/omni-payment-gateway-sdk"></script>

export default function CheckoutForm() {
  const [email, setEmail] = useState("");
  const [amount, setAmount] = useState("");

  const payNow = (e) => {
    e.preventDefault();

    const handler = window.AfaraPayPop.setup({
      key: "TPK_your_test_public_key", // Your PUBLIC key
      email: email,
      amount: Math.round(Number(amount) * 100), // Naira to kobo
      currency: "NGN",
      callback: (response) => {
        window.location.href = "/thank-you?reference=" + response.reference;
      },
      onClose: () => console.log("The customer closed the widget."),
    });

    handler.openIframe();
  };

  return (
    <form onSubmit={payNow}>
      <label>
        Email address
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
      </label>
      <label>
        Amount (in Naira)
        <input type="number" min="1" value={amount} onChange={(e) => setAmount(e.target.value)} required />
      </label>
      <button type="submit">Pay now</button>
    </form>
  );
}

// Add this once to src/index.html:
// <script src="https://sdk.afarapartners.com/omni-payment-gateway-sdk"></script>

import { Component } from "@angular/core";

declare const AfaraPayPop: any;

@Component({
  selector: "app-checkout-form",
  template: `
    <form (submit)="payNow($event)">
      <label>Email address <input type="email" [(ngModel)]="email" name="email" required /></label>
      <label>Amount (in Naira) <input type="number" [(ngModel)]="amount" name="amount" min="1" required /></label>
      <button type="submit">Pay now</button>
    </form>
  `,
})
export class CheckoutFormComponent {
  email = "";
  amount = 0;

  payNow(event: Event) {
    event.preventDefault();

    const handler = AfaraPayPop.setup({
      key: "TPK_your_test_public_key", // Your PUBLIC key
      email: this.email,
      amount: Math.round(this.amount * 100), // Naira to kobo
      currency: "NGN",
      callback: (response: any) => {
        window.location.href = "/thank-you?reference=" + response.reference;
      },
      onClose: () => console.log("The customer closed the widget."),
    });

    handler.openIframe();
  }
}