Iframe Integration

Basic Usage

Embed the checkout directly on your website:

<iframe
  src="https://trp.tonramp.io/{payload}"
  width="440"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 12px;"
></iframe>

URL Builder

Use the generator at trp.tonramp.io in the Integration tab to generate the iframe code automatically.

Parameters

The iframe loads the same checkout page. No additional parameters are needed beyond the payload in the URL.

Recommended Dimensions

Device	Width	Height
Mobile	`100%`	`700px`
Desktop	`440px`	`700px`

Full Example

<!DOCTYPE html>
<html>
<head>
  <title>Payment - My Store</title>
</head>
<body>
  <h1>Complete your payment</h1>

  <div style="max-width: 440px; margin: 0 auto;">
    <iframe
      src="https://trp.tonramp.io/trp010148UQBJ6gU8..."
      width="100%"
      height="700"
      frameborder="0"
      style="border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
    ></iframe>
  </div>
</body>
</html>

Theme

The iframe respects the user’s operating system theme (light/dark) automatically via prefers-color-scheme. The user can also switch manually within the checkout.