Standard Integration

This shows you how to accept payments using the standard integration flow

Accept payment quickly and securely using the standard method by calling our API. When you call the API with the required parameters, we will return a response with a payment link. Do a redirect to the link and a secure checkout modal will be loaded for your customer to enter their payment details and complete the payment.

When the transaction is completed and your customer closes the payment modal, if the transaction was successful, we would call your success_url

Follow the steps below to integrate VoguePay Standard

Standard API

https://pay.voguepay.com

STEP 1 - Collect payment details, Customer details and Pass required query parameters

Collect the customer's email address, total amount to be paid and currency if they are not paying in NGN.

When you've collected the necessary details, add it to your request object and call our standard payment API.

VoguePay Standard Query Parameters

Here are the standard request parameters and descriptions:

Parameter	Required	Description
p	Yes	Required for payment link generation. Value must be 'linkToken'. i.e ?p=linkToken
v_merchant_id	Yes	Merchant's ID
merchant_ref	No	Merchant Reference or Transaction Reference. Can be any value provided by merchant. Merchant value will be returned with the confirmation results from the confirmation API. VoguePay doesn't need this value, it is used by the merchant to store any data to be retrieved later with the transaction details.
memo	Yes	Transaction Memo
cur	Yes	Currency code. e.g NGN
developer_code	No	A code unique given to every developer. Using this code earns the developer a commission on every successful transaction made through any selected integration methods.
total	Yes	Total Cost
email	Yes	Merchant's Email Address
notify_url	Yes	Link to Send Transaction ID to. Same as Webhook URL.
success_url	Yes	Link to redirect users to if payment is successful
fail_url	Yes	Link to redirect users to if payment is fails.

Step 2 - Initiate payment

After collecting payment details and filling required parameters, initiate the payment by calling our API with the collected payment details, see example below.

Method: POST Endpoint: https://pay.voguepay.com

 https://voguepay.com/?p=linkToken&v_merchant_id=demo&
 memo=Payment for laptop&total=1000&merchant_ref=ref123&
 notify_url=https://example.com/notification.php&
 success_url=https://example.com/success.php&
 fail_url=https://example.com/fail.php&developer_code=ddd&cur=NGN

Query Parameter for Request Above

 ?p=linkToken&
 v_merchant_id=demo&
 memo=Payment for laptop&total=1000&
 merchant_ref=ref123&
 notify_url=https://example.com/notification.php&
 success_url=https://example.com/success.php&
 fail_url=https://example.com/fail.php&
 developer_code=ddd&
 cur=NGN

When you send this request to our API, we will return a payment link in the response. Pass this link back to your customer for them to complete the transaction. The link will load up our checkout modal in accordance with the configurations you defined in your initial payment call.

VoguePay Standard Sample Response

Here's a sample response object containing the payment link returned:

https://checkout.voguepay.com/?data=%7B%22_amount%22%3A1000%2C%22_callback%22%3A%7B%22_webhook%22%3A%22https%3A%2F%2Fsakarious.requestcatcher.com%2Ftest%22%7D%2C%22_created%22%3A%222021-08-20+11%3A34%3A02%22%2C%22_currency%22%3A%22NGN%22%2C%22_customer%22%3A%7B%22tokenize%22%3Afalse%2C%22email%22%3A%22ajayishegs%40gmail.com%22%2C%22phone%22%3A%22%22%2C%22address%22%3A%22%5Bobject+Object%5D%22%2C%22name%22%3A%22%22%7D%2C%22_ip%22%3A%2254.74.141.25%22%2C%22_items%22%3A%5B%7B%22name%22%3A%22Payment%22%2C%22description%22%3A%22Payment%22%2C%22amount%22%3A%221000%22%7D%5D%2C%22_live%22%3Afalse%2C%22_merchantCurrency%22%3A%22NGN%22%2C%22_parameters%22%3A%7B%7D%2C%22_paymentStatus%22%3A%22Awaiting+Payment%22%2C%22_reference%22%3A%22ref123%22%2C%22_schedule%22%3A%7B%7D%2C%22_status%22%3A%22Open%22%2C%22_uid%22%3A%2211dd49b79ba24a8caf1aa52ab0b32877%22%7D&merchantId=sandbox_760e43f202878f651659820234cad9&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJqdGlfNjExZjkzMmE4YzE3YzEuMzM4NTY0MDIiLCJpYXQiOjE2Mjk0NTkyNDIsImlzcyI6IjVmM2NmNTQ0NDFkMmVjMDYyYzUxMzQ2NSIsIk9yZ1VuaXRJZCI6IjVmMzkzYmUxOTZmOGNmN2YyZDRjMzE5NiIsIlJlZmVyZW5jZUlkIjoiMTFkZDQ5Yjc5YmEyNGE4Y2FmMWFhNTJhYjBiMzI4NzciLCJQYXlsb2FkIjp7Ik9yZGVyRGV0YWlscyI6eyJPcmRlck51bWJlciI6Imp3dE9yZGVyXzYxMWY5MzJhOGMxODQ0Ljg5MzM4NDg5IiwiQW1vdW50IjoxMDAwLCJDdXJyZW5jeUNvZGUiOiJOR04ifX0sIk9iamVjdGlmeVBheWxvYWQiOiJ0cnVlIiwiZXhwIjoxNjI5NDYwMTQyfQ.gD8HKPu2IiFwpItr8Ve6juveCyOe02dVoVdZzv7S2tw&refererUrl=

Now when you pass the returned link to the user, they will be provided with our payment modal to complete the payment.

Step 3 - Get Transaction ID

- What happens when the user completes the transaction on the page?

When the user enters their payment details, VoguePay would validate then charge the card. Once the charge is completed we would:

1. Call your specified notify_url and post the transaction ID to you.

{
    "transaction_id": "e6ba64edcdda472dad814020bcaecd10"
}

2. Send an email to you and your customer on the successful payment.

Step 4 - Verifying Payment

When the transaction is completed, we send the transaction ID to your notify_url link or webhook (If one is set). You can use the transaction ID sent to verify the payment or perform other action by sending a GET request to our Confirmation API. See format and required query parameters below.

Confirmation API

https://pay.voguepay.com

Query Parameter	Required	Description
v_transaction_id	Yes	Transaction ID of transaction to be queried
type	Yes	Format for the expected data. e.g xml, json. Defaults type is xml
v_merchant_id	Yes	Merchant ID

Method: GET Endpoint: https://pay.voguepay.com

 https://pay.voguepay.com/?v_transaction_id=409a283ede12461aa674d3abb9f9b92e&v_merchant_id=demo&type=json

Query Parameter for Request Above

?v_transaction_id=409a283ede12461aa674d3abb9f9b92e&
v_merchant_id=demo&
type=json

When you send this request to our API, we will return a json or xml response of the transaction queried and you can perform an action afterwards e.g save to some details to database.

Confirmation API Sample Response

Here's a sample response object containing details about the transaction ID queried:

JSON type

{
    "cur": "NGN",
    "total_paid_by_buyer": "1000",
    "total": "1000",
    "fund_maturity": "1970-01-01",
    "buyer_email": "[e-mail]",
    "status": "Approved",
    "merchant_id": "sandbox_760e43f202878f651659820234cad9",
    "merchant_ref": "ref123",
    "transaction_id": "409a283ede12461aa674d3abb9f9b92e",
    "process_duration": 0.836074
}

XML type

<?xml version="1.0" encoding="UTF-8"?>
<voguepay>
    <cur>NGN</cur>
    <total_paid_by_buyer>1000</total_paid_by_buyer>
    <total>1000</total>
    <fund_maturity>1970-01-01</fund_maturity>
    <buyer_email>[e-mail]</buyer_email>
    <status>Approved</status>
    <merchant_id>sandbox_760e43f202878f651659820234cad9</merchant_id>
    <merchant_ref>ref123</merchant_ref>
    <transaction_id>409a283ede12461aa674d3abb9f9b92e</transaction_id>
    <process_duration>0.566156</process_duration>
</voguepay>