Iframe Integration

Basic Usage

Embed the checkout directly on your website:

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

Generating the payload

Generate the payload through the authenticated API (POST /v1/wallet/trp/generate) and use the payload field from the response in the iframe URL. The page only renders payments for a registered partner’s wallet.

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/trp/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.