# Inline Payment

Receive payment with our inline script. To initialize the transaction, you'll need to pass information such as email, first name, last name 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                                            |

In this, notice how:

1. The Voguepay inline javascript is included using a `script` tag. This is how you import Voguepay into your code.
2. The amount here can be hardcoded if you want to charge a specific amount.
3. 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.

HTML:

```markup
<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:

```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: 'example@example.com',
          phone: 'Customer phone'
        },
        closed:closedFunction,
        success:successFunction,
        failed:failedFunction
      });
    }
    
    //Demo Link: https://codepen.io/sakarious/pen/OJmYVxM

```

**MORE SAMPLES**

This sample loads VoguePay using javascript Onclick function

HTML:

```markup
<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: 'example@example.com',phone: 'Customer phone' },
closed:closedFunction,
success:successFunction,
failed:failedFunction})">Pay using onclick</button >
<script src="https://pay.voguepay.com/js/voguepay.js"></script>
```

JAVASCRIPT:

```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 also loading VoguePay using function call.

HTML:

```markup
<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.

```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)
    }

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: 'example@example.com',
          phone: 'Customer phone'
        },
        closed:closedFunction,
        success:successFunction,
        failed:failedFunction
      });
    }
```