開発者向け
埋め込みウィジェット
顧客は自社ドメインを離れることなく支払いを完了できます。APIで請求書を作成し、CryBitの決済フォームを自社ページ上に表示します。
1. 請求書を作成する
通常と同じPOST /api/v1/paymentsを使用します。レスポンスには常にconfirmation.confirmation_tokenが含まれ、これは請求書のuuidと同じ値になります。リクエストのconfirmationフィールドは任意です。
2. スクリプトを読み込み、コンテナを追加する
HTML
<script src="https://pay.crybit.net/widget.js"></script>
<div id="payment-form"></div>3. フォームを表示する
JavaScript
const checkout = new CryBitCheckout({
confirmation_token: 'INVOICE-UUID',
return_url: 'https://merchant.example/thanks',
lang: 'en',
error_callback: (err) => console.log(err),
})
checkout.render('payment-form').then(() => { /* the form is shown */ })
checkout.on('success', () => { /* status paid: confirm the order by webhook or GET */ })
checkout.on('fail', () => { /* expired, cancelled or refunded */ })
checkout.on('complete', () => checkout.destroy())モーダルウィンドウ
ページ内にコンテナがない場合は、customization: { modal: true }(またはmodal: true)を指定してサイト上にウィジェットをオーバーレイ表示し、引数なしでcheckout.render()を呼び出します。
オプションとイベント
| オプション | 説明 |
|---|---|
confirmation_token | 必須。請求書のuuid(エイリアス: uuid、invoice_uuid)。 |
return_url | 支払い後に顧客が遷移する先。 |
lang | 画面表示言語。指定がない場合はブラウザの言語が使用されます。 |
modal / customization.modal | コンテナの代わりにポップアップ表示する場合はtrue。 |
error_callback, success_callback | エラー発生時(トークンなし、コンテナなし)と、ステータスがpaidになったときに呼び出されます。 |
イベント: ready、status、success、fail、complete、close、error。メソッド: render(id)、on(event, fn)、destroy()。
注文の確定は、ウェブフックまたはステータスの取得によって行ってください。ウィジェットのイベントはユーザーインターフェース用途に限られます。
FAQ
ウィジェットをテストできますか?
はい。テスト加盟店では、ウィジェットに請求書を支払い済みにするボタンが表示されますが、残高には反映されません。