# 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 %}


---

# 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://docs.ourpass.co/checkout-button-on-your-website/ourpass-inline-html.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.