Inline Payment

Quickly embed VoguePay in your website using our Inline JavaScript integration.

Receive payment with our inline script. To initialize the transaction, you'll need to include the VoguePay inline script anywhere on your page and pass the required information such as email, amount, transaction reference, etc. Here is the full list of parameters you can pass.

Parameter	Required	Description
v_merchant_id	Yes	Merchant ID
total	Yes	Total Amount to be paid
notify_url	Yes	Link to Send Transaction status/details to
cur	Yes	Currency code. e.g NGN
merchant_ref	No	Merchant Reference or Transaction Reference. Can be any value provided by merchant.
memo	Yes	Transaction Memo
developer_code	No	A code unique given to every developer.
items	No	An object containing all items to be paid for
customer	Yes	An Object containing customer's details.
closed	No	Function that runs when payment window is closed without completing payment.
success	No	Function that runs when payment is successful.
failed	No	Function that runs when payment is fails

HTML:

<h3>Inline Payment Demo</h3>
<button type="button" onclick="pay('shirt',500)"> Pay for shirt </button>
<button type="button" onclick="pay('shoe',10000)"> Pay for shoe </button>
<script src="https://pay.voguepay.com/js/voguepay.js"></script>

JAVASCRIPT:

let closedFunction = function() {
        alert('window closed by Sakarious');
    }

let successFunction=function(transaction_id) {
        alert('Transaction was successfully carried out, Ref: '+transaction_id)
    }

let failedFunction = function(transaction_id) {
        alert('Transaction was not successful, Ref: '+transaction_id)
    }

function pay(item,price){
      //Initiate voguepay inline payment
      Voguepay.init({
        v_merchant_id: 'sandbox_760e43f202878f651659820234cad9',
        total: price,
        notify_url:'http://domain.com/notification.php',
        cur: 'NGN',
        merchant_ref: 'ref123',
        memo:'Payment for '+item,
        developer_code: '5a61be72ab323',
        items: [
          {
            name: "Item name 1",
            description: "Description 1",
            price: 500
          },
          {
            name: "Item name 2",
            description: "Description 2",
            price: 1000
          }
        ],
        customer: {
          name: 'Customer name',
          address: 'Customer address',
          city: 'Customer city',
          state: 'Customer state',
          zipcode: 'Customer zip/post code',
          email: '[email protected]',
          phone: 'Customer phone'
        },
        closed:closedFunction,
        success:successFunction,
        failed:failedFunction
      });
    }
    
    //Demo Link: https://codepen.io/sakarious/pen/OJmYVxM

In the code snippets above, notice how:

1. The Voguepay inline javascript is included using a script tag. This is how you import Voguepay into your code.

2. The Pay for shirt and Pay for shoe buttons has been tied to an onClick function called pay. This is the action that causes the Voguepay popup to load.

MORE SAMPLES

This sample loads VoguePay using javascript Onclick function

HTML:

<button onclick="Voguepay.init(
{v_merchant_id: 'sandbox_760e43f202878f651659820234cad9',total: 2000, notify_url:'http://domain.com/notification.php',
loadText:'Custom load text', cur: 'NGN',
merchant_ref: 'ref123',memo:'Payment for books',
developer_code: '5a61be72ab323',
items: [{ name: 'Item name 1',description: 'Description 1',price: '500'},
{name: 'Item name 2',description: 'Description 2',price: '1000' }],
customer: {name: 'Customer name',address: 'Customer address',
city: 'Customer city',state: 'Customer state',zipcode: 'Customer zip/post code',
email: '[email protected]',phone: 'Customer phone' },
closed:closedFunction,
success:successFunction,
failed:failedFunction})">Pay using onclick</button >
<script src="https://pay.voguepay.com/js/voguepay.js"></script>

JAVASCRIPT:

let closedFunction = function() {
        alert('window closed');
    }

let successFunction = function(transaction_id) {
        alert('Transaction was successful, Ref: '+transaction_id)
    }

let failedFunction = function(transaction_id) {
         alert('Transaction was not successful, Ref: '+transaction_id)
    }
    
  //Demo Link: https://codepen.io/sakarious/pen/NWjVENv

This sample loads VoguePay using function call.

HTML:

<button onclick="payWithVoguePay()">Pay function call</button>
<script src="https://pay.voguepay.com/js/voguepay.js"></script>

JAVASCRIPT:

The function "payWithVoguePay" can be any name.

let closedFunction = function() {
        alert('window closed');
    }

let successFunction = function(transaction_id) {
        alert('Transaction was successful, Ref: '+transaction_id)
    }

let failedFunction = function(transaction_id) {
         alert('Transaction was not successful, Ref: '+transaction_id)
    }

function payWithVoguePay() {
      Voguepay.init({
        v_merchant_id: 'sandbox_760e43f202878f651659820234cad9',
        total: 1500,
        notify_url: 'http://domain.com/notification.php',
        cur: 'NGN',
        merchant_ref: 'ref123',
        memo: 'Payment for shirt',
        developer_code: '5a61be72ab323',
        loadText:'Custom load text',
        items: [
          {
            name: "Item name 1",
            description: "Description 1",
            price: 500
          },
          {
            name: "Item name 2",
            description: "Description 2",
            price: 1000
          }
        ],
        customer: {
          name: 'Customer name',
          address: 'Customer address',
          city: 'Customer city',
          state: 'Customer state',
          zipcode: 'Customer zip/post code',
          email: '[email protected]',
          phone: 'Customer phone'
        },
        closed:closedFunction,
        success:successFunction,
        failed:failedFunction
      });
    }