Fincra’s Popup is a Javascript library that allow developers to build a secure and convenient payment flow for their web applications.

This can be integrated to display a payment modal within your application, enabling your customers to complete transactions by entering their payment details by doing the following

1 - Get Payment Infomation

To get started, you need to initialise the transaction by passing the information like email, first name, last name, amount, transaction reference, etc.

Please find below the full request parameters for the endpoint (add the endpoint here) (add list of payment method)

If you already have the customer information in your database, you can retrieve it or through a form like the one below:

The Fincra inline JavaScript is added using a script tag, which is how Fincra Popup is imported into your code. The Pay button is linked to an onClick function called payFincra, which triggers the Fincra payment popup to appear.

<form id="payment-form">
  <div class="form-group">
    <label for="name"> Name</label>
    <input type="text" id="name" required />
  </div>
  <div class="form-group">
    <label for="email">Email Address</label>
    <input type="email" id="email" required />
  </div>
  <div class="form-group">
    <label for="phoneNumber">Phone Number</label>
    <input type="number" id="phoneNumber" required />
  </div>
  <div class="form-group">
    <label for="amount">Amount</label>
    <input type="tel" id="amount" required />
  </div>
  <div class="form-submit">
    <button type="submit" id="submit-button"> Pay </button>
  </div>
</form>
<script src="https://unpkg.com/@fincra-engineering/[email protected]/dist/inline.min.js"></script>

2 - Initialize Transaction

Once you have all the necessary information to start the transaction, link it to the JavaScript function that sends it to Fincra and triggers the checkout popup modal.

const paymentForm = document.getElementById('payment-form');
     paymentForm.addEventListener("submit", payFincra, false);
function payFincra(e) {
     e.preventDefault();
       Fincra.initialize({
         key: "pk_##########",
         amount: parseInt(document.getElementById("amount").value),
         currency: "NGN",
         customer: {
             name: document.getElementById("name").value,
             email: document.getElementById("email").value,
             phoneNumber: document.getElementById("phoneNumber").value,
           },
        //Kindly chose the bearer of the fees
        feeBearer: "business" || "customer",
 
         onClose: function () {
           alert("Transaction was not completed, window closed.");
         },
         onSuccess: function (data) {
           const reference = data.reference;
    alert("Payment complete! Reference: " + reference);
         },
       });
     }

📘

Take note of the following

• The key field here takes your Fincra public key.
• The amount field here is the amount to be collected.

3 - Receive and Verify Webhook Notification

Set up your system to listen for webhook events. We will send a notification to your webhook URL to indicate the status of the transaction. Refer to our guide on securing and validating webhook notifications on your end.

📘

Note

Webhooks will only be sent for successful transactions.

Webhook Response

A detailed explanation of the webhook response can be found here.