Ibanera Customer API
Customer Portal
  • Overview
  • Terminology
    • Exchanges of Assets
    • Payees
    • Personal Customers
    • Business Customers
      • Managees
    • Enumerations, Codes and Definitions
      • Source of Funds Types
      • Transfer Purpose Codes Reference
  • Getting Started
    • Access the API
    • API Principal Account
    • Common Response Format
    • First API Call
    • Authentication & Authorization
      • Generating a Time-Based One-Time Password (TOTP) with a Shared Secret
  • API Endpoints
    • Accounts
    • Business Onboarding
    • Cards
    • Crypto Exchanges
    • Foreign Currency Exchange
    • Payees (Beneficiaries)
    • Transfers
    • Transaction Cancellation
    • Managees
    • Information Requests (RFIs)
    • Quick Buy
    • Simulated Testing
  • Callbacks
    • Managee Jumio Completed
    • Cryptocurrency Transfers
    • Exchange Status Updated
    • Fiat Deposit Received
    • Managee Card Approval Updated
    • Managee KYC Updated
    • Transaction Status Updated
    • Information Requests
  • QuickBuy
    • QuickBuy Callback
    • QuickBuy Front End Implementation
    • Validating the Webhook Signature
    • QuickBuy Pro
      • Visual Customization
      • Getting Started / Authentication
      • API Endpoints
        • Create Payment
        • Retrieve Payments
        • Delete Payment
      • Callbacks
        • Payment Captured
        • Cryptocurrency Transferred
Powered by GitBook
On this page
  • Embedding the QuickBuy Widget
  • Endpoints:
  • HTML Example:
  1. QuickBuy

QuickBuy Front End Implementation

PreviousQuickBuy CallbackNextValidating the Webhook Signature

Last updated 1 year ago

Embedding the QuickBuy Widget

Main steps

See the example HTML document included below. The key steps are as follows:

  • Import the stylesheet for the widget (line 5)

  • Override the stylesheet values with your own custom rules (if required).

  • Create a <div> with id="WidgetContainer" and appropriate dataset (lines 22-33).

  • Run the bundled index.js script (line 38).

Notes:

If the clientSignature used is invalid/expired, the widget will surface an error using window.postMessage(). In this case you should generate a new clientSignature and reload the widget javascript.


Endpoints:

Sandbox:

  • JavaScript:

  • CSS:

Production:


HTML Example:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- This is the stylesheet for the widget -->
<link rel="stylesheet" href="https://quickbuy-v2.ibanera.com/index.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div
      id="root"
      style="
>
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
left: 0;
    overflow-y: auto;
"
<!-- This div is where the widget will be inserted. The data attributes are user- provided values that will be used to authenticate requests -->
      <div
        id="WidgetContainer"
        data-clientsignature="YOUR_GENERATED_SIGNATURE_HERE”
        data-quickbuykey="YOUR_QUICKBUY_KEY_HERE"
        style="
                    background-color: #fff;
                    max-width: 650px;
                    margin-left: auto;
                    margin-right: auto;
"
    <!-
- Import the index.js script below and it will insert the widget into the div it finds with
 id="WidgetContainer" -->
    <script src="https://quickbuy-v2.ibanera.com/index.js" id="QuickBuyScript"></script>
  </body>
</html>

JavaScript:

CSS:

https://fintech-phoenix-quickbuywidget-v2.uat.avamae.co.uk/index.js
https://fintech-phoenix-quickbuywidget-v2.uat.avamae.co.uk/index.css
https://quickbuy-v2.ibanera.com/index.js
https://quickbuy-v2.ibanera.com/index.css