Quick Start - Vanilla JS

Simple example

Allow user to choose amount, asset and wallet address inside widget:

<script src="https://cdn.jsdelivr.net/npm/@ramp-network/ramp-instant-sdk@2.3.0/dist/ramp-instant-sdk.umd.js" integrity="sha256-heFylj/fcCZffQpQuqUmrk1e08vdaGcpw0w9mWGnbz4=" crossorigin="anonymous"></script>
<script>
  function buy() {
    new rampInstantSdk.RampInstantSDK({
      hostAppName: "Your App Name",
      hostLogoUrl: "https://assets.ramp.network/misc/test-logo.png",
      variant: "auto",
    }).show();
  }
</script>
<section>
  <h4>Buy with Ramp Network</h4>
  <button type="button" onclick="buy()">Buy</button>
</section>

Advanced example

Integrate asset and amount form into your app. The user will not be able to change those inside widget.

<script src="https://cdn.jsdelivr.net/npm/@ramp-network/ramp-instant-sdk@2.3.0/dist/ramp-instant-sdk.umd.js" integrity="sha256-heFylj/fcCZffQpQuqUmrk1e08vdaGcpw0w9mWGnbz4=" crossorigin="anonymous"></script>
<script>
  function buy() {
    let data = Array.from(document.forms["ramp-instant-form"]).reduce(
      (acc, cur) => {
        acc[cur.id] = cur.value;
        return acc;
      },
      {}
    );
    let widget = new rampInstantSdk.RampInstantSDK({
      hostAppName: "Your App Name",
      hostLogoUrl: "https://assets.ramp.network/misc/test-logo.png",
      variant: "auto",
      swapAmount: parseFloat(data["ramp-instant-amount"]) * 10 ** 18,
      swapAsset: data["ramp-instant-asset"],
    });
    widget.domNodes.overlay.style.zIndex = 1000;
    widget.on("*", (event) => console.log(event));
    widget.show();
  }
</script>
<section>
  <h4>Buy with Ramp Network</h4>
  <form id="ramp-instant-form" class="ramp-instant-form">
    <div>
      <input id="ramp-instant-amount" type="number" step="0.01" value="10" />
      <select id="ramp-instant-asset">
        <option value="ETH">ETH</option>
        <option value="DAI" selected>DAI</option>
      </select>
    </div>
    <button type="button" onclick="buy()">
      Buy
    </button>
  </form>
</section>