本文へスキップ
開発者向け

BayChangeウィジェットを埋め込む

1行のHTMLで、当社の交換フォームをサイトに追加できます。このフォームで開始された交換は、お客様のパートナーコードにひも付けられます。

公開REST APIはまだ提供していません。現在は、下記のウィジェットとパートナーリンクでBayChangeと連携できます。パートナーコードはアカウントで取得できます。アカウントには、ライブプレビュー付きのコード作成ツールもあります。

クイックスタート

フォームを表示したい場所に、このコードを貼り付けてください。your-codeはご自身のパートナーコードに置き換えます。デフォルトの高さ（720px）でフォームは収まります。高さをぴったり合わせるには、下記のリサイズ用スクリプトを追加してください。

HTML
<iframe
  src="https://baychange.com/embed?ref=your-code&amp;from=usdt.tron&amp;to=btc.btc"
  title="Crypto exchange by BayChange"
  width="100%" height="720"
  style="display:block;width:100%;max-width:480px;border:0;color-scheme:light"
  allow="clipboard-read; clipboard-write" loading="lazy"></iframe>

パラメーター

パラメーターはすべてiframeのURLに指定します（https://baychange.com/embed?ref=…&from=…）。いずれも省略できます。

refk7m2qxaパートナーコード（アカウントで確認できます）。ウィジェットで開始された交換がお客様の実績になります。指定しなくてもウィジェットは動作しますが、実績には計上されません。
fromusdt.tron送る通貨。SYMBOL.NETWORKの形式で指定します。大文字・小文字は区別しません。デフォルト：トロンのUSDT。
tobtc.btc受け取る通貨。デフォルト：BTC。
amount250送金する数量（「from」の通貨の単位）。訪問者が変更することもできます。
themelightフォームの周囲の背景：light（白、デフォルト）またはtransparent（透明）。
localeja表示言語：en, es, pt-br, tr, ru, uk, kk, uz, az, de, fr, it, pl, ja, zh, id, vi。デフォルト：en。指定するとウィジェットは/<言語コード>/embedで開きます（このURLを直接使うこともできます。例：https://baychange.com/ja/embed?ref=your-code）。

イベント

ウィジェットはpostMessageでお客様のページにメッセージを送信します。event.originがhttps://baychange.comであることを必ず確認してください。

baychange:ready—ウィジェットの読み込みが完了したとき。
baychange:resize{ height }ウィジェットのコンテンツの高さ（ピクセル）。iframeの高さの調整に使います。
baychange:order_created{ order: { id, from, to, amountIn } }訪問者が注文を作成したとき。注文ページはbaychange.comで、新しいタブで開きます。

iframeの高さを自動で調整する

HTML
<iframe
  src="https://baychange.com/embed?ref=your-code"
  title="Crypto exchange by BayChange"
  width="100%" height="720"
  style="display:block;width:100%;max-width:480px;border:0;color-scheme:light"
  allow="clipboard-read; clipboard-write" loading="lazy"></iframe>
<script>
window.addEventListener("message", function (e) {
  if (e.origin !== "https://baychange.com" || !e.data || e.data.type !== "baychange:resize") return;
  document.querySelectorAll('iframe[src^="https://baychange.com/embed"]').forEach(function (f) {
    if (f.contentWindow === e.source) f.style.height = e.data.height + "px";
  });
});
</script>

新しい注文を検知する

JavaScript
window.addEventListener("message", function (e) {
  if (e.origin !== "https://baychange.com" || !e.data) return;
  if (e.data.type === "baychange:order_created") {
    // e.data.order = { id, from, to, amountIn }
    console.log("BayChange order created", e.data.order.id);
  }
});

訪問者から見た流れ

  1. 見積もりを確認通貨と数量を選び、何かを送金する前に手数料と受取額を確認します。
  2. アドレスを入力受取アドレスと返金アドレスは、当社サイトと同じようにフォーム内でチェックされます。
  3. 注文ページを開く「交換を開始」を押すと注文が作成され、baychange.comの注文ページが新しいタブで開きます。入金アドレスとリアルタイムのステータスが表示されます。

制限事項とルール

  • 公開REST APIはまだありません。現在の連携方法は、ウィジェットとパートナーリンクのみです。
  • iframeにsandbox属性を付けないでください。どうしても必要な場合は、allow-scripts、allow-same-origin、allow-forms、allow-popups、allow-popups-to-escape-sandboxを追加してください。追加しないと、フォームと注文ページが動作しません。
  • iframeの幅は320px以上にしてください。フォームは幅360〜480pxを想定して設計されています。
  • フォームを覆ったり、切り取ったり、スタイルを変更したりしないでください。また、フォームの外で訪問者にウォレットアドレスを尋ねないでください。
  • 入金アドレスが表示される注文ページは、お客様のサイト内ではなく、常にbaychange.comで開きます。
  • 通常の制限が適用されます：通貨ごとの最小数量、訪問者ごとのリクエスト数の制限、サービスを提供していない地域。
  • baychange:order_createdイベントで届く注文番号で、注文ページを開くことができます。非公開の情報として扱い、他人が見られる場所に公開したり、ログに記録したりしないでください。

報酬、支払い、パートナーのルールについては、パートナープログラムとパートナー規約をご覧ください。

パートナーコードを取得