# OurPass Inline - HTML

{% hint style="info" %}
[**OurPass Checkout Demo**](https://pass-checkout-cdn.netlify.app/)
{% endhint %}

Working with OurPass CDN Inline

{% hint style="info" %}
**This works well for HTML and JavaScript code bases**
{% endhint %}

## **Basic Parameters** 

{% tabs %}
{% tab title="Basic parameters" %}

| **Options**       | **Type** | **Required** |                                                                     **Description** |
| ----------------- | :------: | :----------: | ----------------------------------------------------------------------------------: |
| src               |  string  |     true     |                                                                       Product image |
| amount            |  string  |     true     |                                                                      Product amount |
| url               |  string  |     true     |                                                          Merchant's website address |
| name              |  string  |     true     |                                                                        Product name |
| email             |  string  |     false    |                                                               Email of OurPass user |
| qty               |  string  |     true     |                                                    Quantity of products been bought |
| description       |  string  |     true     |                                                                 Product description |
| items             |   array  |     true     |                                                               List of items in cart |
| api\_key          |  string  |     true     |                                                         OurPass Merchant secret key |
| subAccountAuthKey |  string  |     false    |     OurPass  Merchant sub-account  authorisation key. this is for sub-account cases |
| onClose           | function |     true     | Javascript function that should be called if the customer closes the payment window |
| onSuccess         | function |     true     |              Javascript function that should be called if the payment is successful |
| {% endtab %}      |          |              |                                                                                     |

{% tab title="Query Parameters for lazy mode" %}

#### This is the query parameters for "src" under the Iframe

| Options       |  Type  | Required |                  **Description** |
| ------------- | :----: | :------: | -------------------------------: |
| src           | string |   true   |                    Product image |
| amount        | string |   true   |                   Product amount |
| url           | string |   true   |       Merchant's website address |
| name          | string |   true   |                     Product name |
| email         | string |   false  |            Email of OurPass user |
| qty           | string |   true   | Quantity of products been bought |
| description   | string |   true   |              Product description |
| key           | string |   true   |   Your Seller OurPass secret key |
| {% endtab %}  |        |          |                                  |
| {% endtabs %} |        |          |                                  |

## **Installation**

To use OurPass, use the CDN below and the button below

{% tabs %}
{% tab title="HTML" %}

```markup
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Cheetah-Speed-Technology/core-cdn@1.0.5/cdn.min.js"></script>

<button id="button" style="padding: 10px 32px;">Checkout with Pass</button>
```

{% endtab %}
{% endtabs %}

```javascript
function runIframe() {
  OurpassCheckout.openIframe({
    api_key: 'pass_sec_test_APJn8wy3ggvBVqiI61111111qaOypT4l',
    subAccountAuthKey: 'auth_live_fgegsdgsdgsdgdsgd',
    reference: 'OURPASS_ORDER_73aeefff68430210ae3a8e88ccfe2erbf214171',
    amount: 200,
    qty: 1,
    name: 'Cap',
    description: 'Great Pass Cap',
    src: 'https://raw.githubusercontent.com/Cheetah-Speed-Technology/website_dstore/master/Cap-front1.png',
    url: 'ourpass.co',
    items: [
      {
        itemAmount: 100,
        itemName: 'Cap',
        itemWeight: 1,
        itemQuantity: 1,
        imageUrl: 'https://raw.githubusercontent.com/Cheetah-Speed-Technology/website_dstore/master/Cap-front1.png',
        itemDescription: 'Cap',
      },
      {
        itemAmount: 100,
        itemName: 'Cap',
        itemWeight: 1,
        itemQuantity: 1,
        imageUrl: 'https://raw.githubusercontent.com/Cheetah-Speed-Technology/website_dstore/master/Cap-front1.png',
        itemDescription: 'Cap',
      },
    ],
    metadata: {
      name: 'MARIO GOTZE',
    },
    onSuccess: (res) => {
      alert('It Succeeded');
    },
    onClose: () => {
      alert('It Closed');
    },
  });
}
```

## OurPass Inline (Lazy) Sample

A simple way to load OurPass

```javascript
<iframe
    id="iframe1"
    src="'https://merchant-sandbox.ourpass.co/checkout/?src='+content.src+'&amount='+content.amount+'&url='+dUrl+'&name='+content.name+'&email='+userEmail+'&qty='+form.qty+'&description='+content.subtagline+'&key=pass_sec_test_APJn8wy3ggvBVqiI63TxCBSjqaOypT4l'"
    title="Pass Checkout"
    style="border:none; height:100%;width:90%;z-index:99999"
></iframe>
```

## Configuration Options&#x20;

{% hint style="warning" %}
**Please note that the key to use with inline is the secret key**
{% endhint %}