# Simple HTML Form

VoguePay can be integrated into your application via HTML form following these easy steps, making it the easiest way to start accepting payments

**1. Pass required Information in HTML Form**

To initialize a transaction, you'll need to pass information such as merchant ID, memo, amount, item name, item description, item value, merchant reference (transaction reference) etc. Merchant ID, memo and amount are required. Here is the full list of parameters you can pass:

| Params          | Required | Description                                                                                                                                                                                                                                                                                                     |
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| v\_merchant\_id | Yes      | Merchant 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                                                                                                                                                                                                                                                                                                |
| notify\_url     | Yes      | Link to Send Transaction status/details to                                                                                                                                                                                                                                                                      |
| success\_url    | Yes      | Link to redirect users to if payment is successful                                                                                                                                                                                                                                                              |
| fail\_url       | Yes      | Link to redirect users to if payment is fails.                                                                                                                                                                                                                                                                  |

**2. Add VoguePay Link in HTML Form Action attribute**

To get VoguePay Payment window, It is required to add VoguePay Payment Link as the value of your HTML Form Action attribute. 

See code snippets below.

```markup
<form method='POST' action='https://pay.voguepay.com'>
</form>
```

```markup
<form method='POST' action='https://pay.voguepay.com'>
  <input type="hidden" name='v_merchant_id' value='sandbox_760e43f202878f651659820234cad9' />
  <input type="hidden" name='merchant_ref' value='234-567-890' />
  <input type="hidden" name='memo' value='Bulk order from McAckney Web Shop' />
  <input type="hidden" name='item_1' value='Face Cap' />
  <input type="hidden" name='description_1' value='Blue Zizi facecap' />
  <input type="hidden" name='price_1' value='2000' />
  <input type="hidden" name='item_2' value='Laban T-shirt' />
  <input type="hidden" name='description_2' value='Green XXL' />
  <input type="hidden" name='price_2' value='3000' />
  <input type="hidden" name='cur' value='NGN' />
  <input type="hidden" name='item_3' value='Black Noni Shoe' />
  <input type="hidden" name='description_3' value='Size 42' />
  <input type="hidden" name='price_3' value='8000' />
  <input type="hidden" name='developer_code' value='pq7778ehh9YbZ' />
  <input type="hidden" name='total' value='13000' />
  <input type="hidden" name='name' value='Customer name'/>
  <input type="hidden" name='address' value='Customer Address'/>
  <input type="hidden" name='city' value='Customer City'/>
  <input type="hidden" name='state' value='Customer State'/>
  <input type="hidden" name='zipcode' value='Customer Zip/Post Code'/>
  <input type="hidden" name='email' value='ajayishegs@gmail.com'/>
  <input type="hidden" name='phone' value= 'Customer phone' />
  <input type="hidden" name='notify_url' value= 'https://example.com/notification.php'/>
  <input type="hidden" name='fail_url' value= 'https://example.com/notification.php'/>
  <input type="hidden" name='success_url' value= 'https://example.com/notification.php'/>
  <input type='submit' alt='Submit' />
</form>

<!-- Demo Link: https://codepen.io/sakarious/pen/yLbWyNB -->
```

For notification, if a URL is provided in 'notify\_url', a transaction notification will be sent. If transaction is successful, customers are automatically redirected to 'success\_url'.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.voguepay.com/simple-html-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.