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',
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. 1.
    The Voguepay inline javascript is included using a script tag. This is how you import Voguepay into your code.
  2. 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',
phone: 'Customer phone'
},
closed:closedFunction,
success:successFunction,
failed:failedFunction
});
}