Overview

If you're looking to to easily enable your customers to access Kado Ramp from an overlay within your application, it will take about 15-30 minutes to set up.

When a user clicks the button on your website, Kado Ramp will immediately pop up for your user to make a purchase. Read on below for additional properties to pass into the iFrame to make it even easier for your customer to complete their transaction.

In less than 10 minutes, customers will be able to interact with your application 🤝.

How To

Embed a button in your code, e.g:

<button id='kadoRampBtn' href='javascript: void' title='Buy UST'>Buy UST</button>

Enable the button to load the Kado Ramp overlay, e.g:

// Vanilla JS
<script>
  var kadoRampBtn = document.getElementById('kadoRampBtn');
  kadoRampBtn.onclick = function(e) {
    e.preventDefault();
    var kadoRamp = document.createElement('iframe');
    kadoRamp.src = 'https://ramp.kado.money/global';
    kadoRamp.id = 'kadoRampOverlay';
    Object.assign(kadoRamp.style, { 'z-index': '1', 'width': '100vw', 'height': '100vh', 'border': 'none', 'border-width': '0', 'position': 'fixed', 'top': '0', 'left': '0', 'right': '0', 'bottom': '0' });
    document.body.appendChild(kadoRamp);
  }

  function receiveMessage(event) {
    if (event.data === 'ejectKadoRamp') {
      var element = document.getElementById('kadoRampOverlay');
      element.parentNode.removeChild(element);
    }
  }

  window.addEventListener('message', receiveMessage, false);
</script>


If you're building in React, you can utilize some helpers to set up and destroy the iFrame embed.

// React, Typescript
import { FC } from 'react';

const KadoRampButton: FC = () => {
  function handleRemoveKadoRamp(event): void {
    if (event.data === 'ejectKadoRamp') {
      const element = document.getElementById('kadoRampOverlay');
      element?.parentNode?.removeChild(element);
      window.removeEventListener('message', handleRemoveKadoRamp);
    }
  }

  const handleButton = (e): void => {
    e.preventDefault();
    const kadoRamp = document.createElement('iframe');
    kadoRamp.src = 'https://ramp.kado.money/global';
    kadoRamp.id = 'kadoRampOverlay';
    Object.assign(kadoRamp.style, { 'z-index': '2147483647', 'width': '100vw', 'height': '100vh', 'border': 'none', 'border-width': '0', 'position': 'fixed', 'top': '0', 'left': '0', 'right': '0', 'bottom': '0' });
    document.body.appendChild(kadoRamp);
    window.addEventListener('message', handleRemoveKadoRamp, false);
  }

  return (
    <button
      type='button'
      title='Buy UST'
      onClick={e => handleButton(e)}
    >
      Buy UST
    </button>
  )
};

export default KadoRampButton;


An updated SDK implementation is coming in v2, but for now, create your own component with these ~30 lines to easily allow your customers to purchase UST from your web application natively.

Do you connect to your customers wallets via WalletConnect? If so, easily pass the users' wallet address and/or desired amount by appending a query-string to the end of the iFrame URL, e.g:

https://ramp.kado.money/global

==> https://ramp.kado.money/global?address=terra17qpf15xk820leawx6m5f2khay10y5rsddahx81


You may also pass amount, e.g:

https://ramp.kado.money/global

==> https://ramp.kado.money/global?address=terra17qpf15xk820leawx6m5f2khay10y5rsddahx81&amount=250
Was this article helpful?
Cancel
Thank you!