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:

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

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": "ajayishegs@gmail.com",
    "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>ajayishegs@gmail.com</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>

Last updated