OurPass Inline - HTML

This is the HTML & Vanilla javascript library for implementing Ourpass checkout button on your platform. This library would help you integrate the button into your system in no time😌

OurPass Checkout Demo

Working with OurPass CDN Inline

This works well for HTML and JavaScript code bases

Basic Parameters

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

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

Installation

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

HTML

<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>

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

<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

Please note that the key to use with inline is the secret key