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
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 |
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 |
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');
},
});
}
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>
Please note that the key to use with inline is the secret key
Last modified 9mo ago