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
scripttag. This is how you import Voguepay into your code. - 2.The
Pay for shirtandPay for shoebuttons has been tied to anonClickfunction calledpay. 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
});
}
Last modified 1yr ago