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😌
Working with OurPass CDN Inline
This works well for HTML and JavaScript code bases

Basic Parameters

Basic parameters
Query Parameters for lazy mode
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

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/[email protected]/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