ウィジェット:HTML

HTMLタグでウィジェットをセットアップする際は、事前に管理画面のHTMLジェネレータから出力されたタグを使うか、アプリトークンIDを控えてから開始してください。

会員番号等、管理上必要なパラメータは data-foo という形式で任意の data 属性として指定してください。

サンプルコード

<script src="https://widget.gyro-n.money/client/checkout.js"></script>
<form action="<任意のURL>">
 <span data-app-id="<アプリトークンID>"
      data-checkout="payment"
      data-amount="1000"
      data-currency="jpy"
      data-auto-submit="true"
 ></span>
</form>

これは 1000 円を支払うためのウィジェットをセットアップしています。このページをブラウザで表示すると、<span> 要素はボタンになり、クリックかタップでウィジェットが表示されます。

決済完了後の処理

決済完了後、トランザクショントークン(data-checkout-type=“token”指定時には univapayTokenId)と決済番号(data-checkout-type=“payment” 指定時には univapayChargeIddata-token-type=“subscription” 指定時には univapaySubscriptionId)が、それぞれ input 要素として追加されます。
data-auto-submit を利用することにより完了ボタンを押した時にはウィジェットが含まれるフォームを<form>要素を自動でsubmit します。

data-auto-submit="true"

このアクションが不要な場合は、上記を<span> の属性から取り除いてください。

ウェブフック

トランザクションの結果は、JSONデータとして管理画面の「Webhook」セクションで指定されたURLにPOSTされます。

リファレンス > ウェブフック」を参照して、POSTされたデータを取得して注文状況などを更新するスクリプトを作成してください。

ウィジェットで使えるパラメーター

コールバック

ウィジェットからは下記のイベントをウィンドウに渡します。

Parameters
data-app-idstring (TOKEN)
ウィジェットが支払いを行うストアで発行したアプリケーショントークンを指定します。
必須: はい
指定可能な値: 有効なアプリケーショントークン
インラインフォームでの利用:
data-checkoutstring
トランザクショントークンを作成するだけ(token)か、トランザクショントークンと課金/定期課金の両方を作成する (payment)か、トランザクショントークンのみ作成しQRコードを表示する(qr)かを指定します。
表示されたQRコードの読み取りについては、こちらをご覧ください。
必須: はい
指定可能な値:
token, payment, qr
インラインフォームでの利用:可(qrのみ不可)
data-payment-typestring
ここで指定した決済方法のみが支払いで利用できるようになり、他の支払い手段はウィジェットに表示されません。
指定したpaymentTypeが利用不可だった場合、チェックアウトでエラーを返します。
必須: いいえ(デフォルトは 全ての支払い方法)
指定可能な値: card, konbini, paidy, online,bank_transfer
インラインフォームでの利用:不可
data-payment-typesstring
支払方法をフィルタリングさせることができます。
必須: いいえ(デフォルトは 全ての支払い方法)
指定可能な値: “,”で区切られたcard, konbini, paidy, online, pay_pay_online, we_chat_online, alipay_online, alipay_plus_online, bank_transfer
※各決済手段が利用可能な設定の場合、ブランドで更にフィルタリングすることができます。
下記パラメータを利用する場合、card, konbiniは指定不要です。
クレジットvisa,mastercard,maestro,diners_club,discover,jcb,unionpay,american_express
コンビニseven_eleven,family_mart,lawson,mini_stop,seico_mart,pay_easy,circle_k,sunkus,daily_yamazaki,yamazaki_daily_store
インラインフォームでの利用:不可
data-amountnumber
ワンタイム課金の場合に課金金額を指定します。
回数無制限の定期課金の場合は、1回の支払いで課金する金額を指定します。
分割払いおよび回数制限付き定期課金の場合は、すべての支払の合計金額を指定します。
補助通貨を使用する通貨の場合、補助通貨を含んだ金額を指定するよう注意してください。
例:9.50 USD の場合は 950 と表記します。
必須: はい
指定可能な値:
正の整数
インラインフォームでの利用:
data-currencystring (currency code)
課金金額の通貨を指定します。
必須: はい
指定可能な値: 通貨コード
インラインフォームでの利用:
data-token-typestring
作成するトランザクショントークンの種類を指定します。
必須: いいえ (デフォルトは one_time)
指定可能な値: one_time, recurring, subscription
インラインフォームでの利用:
data-product-codesstring
商品コードの指定を行い、商品に紐づいた情報を基に決済を行います。
都度課金商品は","で区切ることで複数指定することができます。(定期課金商品は不可)
このパラメータを指定する場合は、app-id,checkoutを指定する必要があります。
商品に含まれる情報をパラメータで別途指定すると商品の情報より優先されますのでご注意ください。
 商品に含まれない情報であればその他パラメータで併用可能です。
ex)初回0円の定期課金を作成する際はcvv-authorizeの指定が必要です。
仮売上を行いたい場合はcaptureを併用して指定してください。
必須:いいえ
指定可能な値:事前に作成した商品の商品コード
インラインフォームでの利用:
data-subscription-periodstring
定期課金の課金の間隔を指定します。
必須: トークンタイプが subscription の場合
指定可能な値: daily(毎日), weekly(毎週), biweekly(隔週), monthly(毎月), bimonthly(隔月), quarterly(3ヶ月), semiannually(6ヶ月), annually(毎年),
ISO8601 duration text の間隔… P●D(〇日毎),P●W(〇週間毎),P●M(〇か月毎),P●Y(〇年毎)
インラインフォームでの利用:
data-subscription-idstring
定期課金の作成ではなく、指定された定期課金に適用可能なトランザクショントークンを作成します。
必須: いいえ
指定可能な値: アプリケーショントークンに紐付いたストアに作成されている定期課金のID
インラインフォームでの利用:
data-installment-planstring
クレジットカード会社の分割払いの定期課金を作成します。
固定の回数の支払い(fixed_cycles)か、リボ払い(revolving)を指定できます。
必須: いいえ
指定可能な値: fixed_cycles, revolving
インラインフォームでの利用:
data-installment-qtynumber
分割払いプランに fixed_cyclesを指定している場合、支払回数を指定します。
必須: 分割払いプランを指定している場合
指定可能な値: 3, 5, 6, 10, 12, 15, 18, 20, 24
インラインフォームでの利用:
data-installment-initial-amount※5/11に仕様変更がありこのパラメータは利用不可になりました。
クレジットカード分割の定期課金では初回課金金額を指定できません。
回数指定の定期課金を作成する場合はdata-subscription-initial-amountを指定してください。
data-subscription-planstring
回数指定の定期課金を作成します。
固定の回数の支払い(fixed_cycles)か、毎回の課金額を固定にする(fixed_cycle_amount)を指定できます。
必須: いいえ
指定可能な値: fixed_cycles, fixed_cycle_amount
インラインフォームでの利用:
data-subscription-qtynumber
回数指定プランに fixed_cyclesを指定している場合、支払回数を指定します。初回課金を含めた回数を指定してください。
fixed_cycle_amount を指定した場合は、課金ごとの金額を指します。
必須: 回数指定プランを指定している場合
指定可能な値: 正の整数
インラインフォームでの利用:
data-subscription-initial-amountnumber
分割払いプランではない定期課金の場合、初回の支払いの金額を指定します。
初回カード登録(0円)の定期課金の場合、このパラメータに「0」を指定する必要があります。
必須: いいえ
指定可能な値:
正の整数
インラインフォームでの利用:

※5/11に仕様変更があり、回数指定の定期課金を作成する場合はこのパラメータで初回金額を指定してください。
data-subscription-startstring
作成された定期課金の2回目の課金を行う日付を指定します(初回の課金は定期課金作成時に行われます)。
必須: いいえ
指定可能な値: ISO8601
形式の日付
インラインフォームでの利用:
data-subscription-start-instring
定期課金の2回目の課金が行われるまでの期間。(初回課金は定期課金の作成時に行われます。)
subscriptionStartが設定されていない場合のみ動作します。
必須: いいえ
指定可能な値: ISO8601 duration text。 例:P●D、P●M(P1D、P5D、P4M、P2M)
インラインフォームでの利用:
data-subscription-start-day-of-monthnumber
定期課金の2回目の課金が行われる日付。(初回課金は定期課金の作成時に行われます。) subscriptionStartInと組み合わせることも可能です。
(例: subscriptionStartDayOfMonth: 20 subscriptionStartIn: “P1M” と設定した場合、2回目の課金は翌月の20日に行われます。)
subscriptionStartInが設定されていない場合、当月(その日付が過ぎていれば翌月)の設定した日付(もしくは末日)に定期課金が開始されます。
(例:2022/10/13にこのパラメータで5を設定した場合、2022/11/5に定期課金が開始されます。)
subscriptionStartが設定されていない場合のみ動作します。
必須: いいえ
指定可能な値:1から31までの整数
インラインフォームでの利用:
data-subscription-preserve-end-of-monthboolean
periodmonthlyで、指定された定期課金サイクルの開始日が月末日である場合、trueを指定すると、以降は月の最終日に料金を請求できます。例えば、開始日2018-06-30の場合、次の請求はtrueの場合は2018-07-31falseの場合は2018-07-30となります。
必須: いいえ(デフォルトはfalse)
指定可能な値:true,false
インラインフォームでの利用:
data-subscription-retry-intervalstring
定期課金の支払いが失敗したときにリトライを行う間隔を指定します。

必須: いいえ
指定可能な値: ISO 8601 duration 形式の期間
※指定する間隔は1日以上かつ定期課金のサイクルよりも短い必要があります。
例: P5D…失敗後5日毎にリトライ
インラインフォームでの利用:
data-textstring
HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに表示されるテキストを指定します。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-sizestring
HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンの大きさを指定します。
必須: いいえ (デフォルトは normal)
指定可能な値: small, normal, large
インラインフォームでの利用:不可
data-classstring
HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに設定される class 属性を指定します。
このパラメータを指定しない場合、ボタンには class が設定されません。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-stylestring
HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに設定される style属性を指定します。
このパラメータを指定しない場合、ボタンには styleがデフォルトに設定されます。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-hover-stylestring
HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに設定される ホバーの時のstyle属性を指定します。
このパラメータを指定しない場合、ボタンにはホバーの時の styleがdata-styleかデフォルトに設定されます。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-headerstring
ウィジェットのヘッダのバーに表示されるテキストを指します。
必須: いいえ (デフォルトは “UnivaPay”)
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-titlestring
ウィジェット内の店舗の名前がこの値に置き換えられます。
必須: いいえ (デフォルトは店舗で設定されている名前)
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-descriptionstring
このパラメータが設定されている場合は、ウィジェット内のサブヘッダーで説明の文字列を表示できます。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-submit-button-textstring
このパラメータが設定されている場合は、ウィジェット内の支払いボタンがこの値に置き換えられます。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-namestring
チェックアウトが正常に完了したときに、作成されたリソースIDを保持する注入された入力要素の名前が、この値に変更されます。
トランザクショントークンのみが作成された場合、入力要素の名前はnameパラメータで指定されたものになり、指定されていない場合はunivapayTokenIdになることに注意してください。
サブスクリプションまたは定期的なトークンに基づくチャージが作成された場合、入力要素の名前は name パラメータで指定されたとおりになり、指定されない場合はそれぞれ univapaySubscriptionId / univapayChargeId となります。
この場合、トランザクション・トークンIDを保持する注入要素は、常にunivapayTokenIdとなります。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-captureboolean
課金が作成される場合、このパラメータを false に指定することで、キャプチャを行わずオーソリのみを行うようにします。
その際、課金は手動でキャプチャするか、capture at パラメータを指定することで自動的にキャプチャすることができます。
必須: いいえ (デフォルトは true)
指定可能な値: true, false
インラインフォームでの利用:
data-capture-atstring
capture パラメータを false に指定したうえでこのパラメータを設定した場合、ここで指定した日時に課金が自動的にキャプチャされます。
コンビニ、銀行振込の場合は入金の期限日時を指定することができ、expiration-periodやデフォルトの振込期間の設定よりも優先します。
※「セブンイレブン」「セイコーマート/他支払(サークルK/サンクス/ペイジー)」は時刻指定が利用できないため、時刻は無視されその日までという扱いになります。
クレジット:キャプチャの日時は仮売上から1時間後かつ7日以内である必要があります。
コンビニ:決済申込から入金期限日時は30分後かつ60日以内である必要があります。
必須: いいえ
指定可能な値: ISO8601 形式の日時
インラインフォームでの利用:
data-expiration-periodstring
このパラメータで期間を指定すると、決済が行われてから振込をするまでの期間を設定できます。
銀行振込/コンビニ決済で有効です。
必須: いいえ(デフォルトは銀行振込:1週間、コンビニ決済:30日)
指定可能な値: ISO8601 duration text。 例:P●D、P●M(P1D、P5D、P0M、P1M)
インラインフォームでの利用:
data-bank-transfer-expiration-periodstring
このパラメータで時間を指定すると、銀行振込の振込期限(日にち)を設定できます。

必須: いいえ(デフォルトは1週間)
指定可能な値: ISO8601 duration text
例:P●D、P●M(P1D、P5D、P0M、P1M)
data-convenience-store-expiration-periodstring
このパラメータで時間を指定すると、コンビニのお支払い期限(日にち)を設定できます。

必須: いいえ(デフォルトは30日)
指定可能な値: ISO8601 duration text
例:P●D、P●M(P1D、P5D、P0M、P1M)
data-expiration-time-shiftstring
このパラメータで時間を指定すると、振込期限の時間を設定できます。
銀行振込/コンビニ決済で有効です。
※このパラメータで時間を指定する場合、data-expiration-periodは1日以上を指定してください。
※「セブンイレブン」「セイコーマート/他支払(サークルK/サンクス/ペイジー)」は時刻指定が利用できないため、このパラメータは無視されます。
必須: いいえ(デフォルトは銀行振込:23:59:59、コンビニ決済:決済が行われた時間)
指定可能な値: ISO8601 例:12:00:00+09:00
インラインフォームでの利用:
data-bank-transfer-expiration-time-shiftstring
このパラメータで時間を指定すると、銀行振込の振込期限(時間)を設定できます。
※このパラメータで時間を指定する場合、expirationPeriodは1日以上を指定してください。
※「セブンイレブン」「セイコーマート/他支払(サークルK/サンクス/ペイジー)」は時刻指定が利用できないため、本パラメータは無視されます。

必須: いいえ(デフォルトは23:59:59)
指定可能な値: URLエンコードした値またはISO8601(例:12:00:00+09:00)
data-convenience-store-expiration-time-shiftstring
このパラメータで時間を指定すると、コンビニのお支払い期限(時間)を設定できます。
※このパラメータで時間を指定する場合、expirationPeriodは1日以上を指定してください。
※「セブンイレブン」「セイコーマート/他支払(サークルK/サンクス/ペイジー)」は時刻指定が利用できないため、本パラメータは無視されます。

必須: いいえ(デフォルトは決済が行われた時間)
指定可能な値: URLエンコードした値またはISO8601(例:12:00:00+09:00)
data-emailstring
このパラメータにメールアドレスを指定すると、ウィジェットのフォームのメールアドレスフィールドに初期値として入力されます。
必須: いいえ
指定可能な値: メールアドレス
インラインフォームでの利用:
data-shipping-address-zipstring
このパラメータに郵便番号を指定すると、ウィジェットのフォームの郵便番号フィールドに初期値として入力されます。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-shipping-address-statestring
このパラメータに都道府県を指定すると、ウィジェットのフォームの都道府県フィールドに初期値として入力されます。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-shipping-address-citystring
このパラメータに市区町村を指定すると、ウィジェットのフォームの市区町村フィールドに初期値として入力されます。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-shipping-address-line1string
このパラメータに住所を指定すると、ウィジェットのフォームの番地フィールドに初期値として入力されます。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-shipping-address-line2string
このパラメータに住所を指定すると、ウィジェットのフォームのマンション名・部屋番号フィールドに初期値として入力されます。
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:不可
data-addressboolean
このパラメータをtrueに設定すると、エンドユーザーに住所を入力するフォームが表示されます。
requireEmailrequireBillingAddressは、どちらか一方のみを有効にする場合に使用します。
必須: いいえ (デフォルトはfalse)
指定可能な値: true, false
インラインフォームでの利用:不可
data-require-nameboolean
このパラメータをtrueに設定すると、エンドユーザーに名前を入力するフォームが表示されます。
Paidyとコンビニ払い、銀行振込には適用されません。
必須: いいえ (デフォルトはfalse)
指定可能な値: true, false
インラインフォームでの利用:不可
data-require-emailboolean
このパラメータをtrueに設定すると、エンドユーザーにメールアドレスを入力するフォームが表示されます。
カードとコンビニ払いには適用されません。
必須: いいえ (デフォルトは false)
指定可能な値: true, false
インラインフォームでの利用:
data-require-phone-numberboolean
このパラメータをtrueに設定すると、エンドユーザーに電話番号を入力するフォームが表示されます。
4桁以上の電話番号を入力可能です。
必須: いいえ (デフォルトは false)
指定可能な値: true, false
インラインフォームでの利用:
data-require-billing-addressboolean
このパラメータをtrueに設定すると、エンドユーザーに請求先住所を入力するフォームが表示されます。
オンライン決済とコンビニ払いには適用されません。
必須: いいえ (デフォルトは false)
指定可能な値: true, false
インラインフォームでの利用:不可
data-show-cvvboolean
CVVなしを許可されている店舗で、このパラメータを false に設定すると、ウィジェットのフォームでCVV 入力フィールドが表示されなくなります。
必須: いいえ (デフォルトは true)
指定可能な値: true, false
インラインフォームでの利用:
data-localestring
このパラメータでは、ウィジェットを表示する際に使用する言語を指定します。auto に設定すると、ブラウザの言語設定が使用されます。
必須: いいえ (デフォルトは auto)
指定可能な値: auto(ブラウザの言語に依存),zh-tw(簡体字), zh-cn(繁体字), en(英語), ja(日本語), ko(韓国語),th(タイ語),ru(ロシア語)
インラインフォームでの利用:
data-univapay-reference-idstring (フリーフォーマット)
作成されたトランザクショントークンは、指定されたリファレンスIDと関連付けられます。CSV課金を利用時にリファレンスIDを検索し決済することが可能になります。
必須: いいえ
指定可能な値: 任意の値
インラインフォームでの利用:
data-univapay-customer-idstring (UUID)
このパラメータを指定すると「個人情報取得への同意」のチェックボックスが表示され、消費者がチェックを入れるとクレジットカード情報が保存されます。作成されたトランザクショントークンは、指定されたカスタマーIDと関連付けられます。
これによって、次回に同じカスタマーIDを指定してウィジェットを表示した時、消費者は保存された情報を選択して処理を完了することができます。
token typeone_time に指定するか、指定を省略した場合、消費者はカード情報を保存するかどうかを選択できます。保存を選択しない場合 one_timeトークンが作成され、カード情報は保存されません。保存を選択した場合 recurring トークンが代わりに作成され、カード情報が保存されます。
token typerecurring に指定した場合は、消費者はカード情報の保存を選択することが必須となります。
注:このパラメータを使用するには、無制限(infinite)のリカーリングトークンの作成権限が必要です。
必須: いいえ
指定可能な値: 任意のUUID
インラインフォームでの利用:
data-cvv-authorizeboolean
このパラメータでtrue を指定した場合、 クレジットカードの認証リクエストを行います。
認証リクエストが失敗した場合は、リカーリングトークンは作成されません。

カード情報の登録のみ行う場合:Checkout は token、token type は recurring を指定してください。
初回0円の定期課金を作成する場合:このパラメータでカード情報の認証のみ行います。checkoutは payment、token typeはsubscriptionを指定してください。

必須: いいえ (デフォルト値は false )
指定可能な値: true, false
インラインフォームでの利用:
data-allow-card-installmentsboolean
このパラメータでtrue を指定した場合、分割払いのプルダウンセレクトを表示します。

Checkoutpayment かつ token type がone_timeか recurring であり、カード会社の分割払いが可能な接続先の場合のみ有効です。

必須: いいえ (デフォルト値は false )
指定可能な値:
true, false
インラインフォームでの利用:
data-card-installment-optionsstring
このパラメータでは、data-allow-card-installmentsがtrue の時、フォームに表示する分割回数を指定することができます。
必須: いいえ
指定可能な値: 1, 3, 5, 6, 10, 12, 15, 18, 20, 24, revolving
インラインフォームでの利用:
data-auto-submitboolean
このパラメータでtrue を指定した場合、処理が完了し次第、form で指定したWEBページに遷移します。
必須: いいえ (デフォルトは false)
指定可能な値: true, false
インラインフォームでの利用:不可
data-auto-closeboolean
このパラメータでtrue を指定した場合、処理が完了すると、ウィジェットが自動的に閉じます。
必須: いいえ (デフォルトは false)
指定可能な値: true, false
インラインフォームでの利用:不可
data-remove-checkout-button-after-chargeboolean
このパラメータでfalseを指定した場合、決済後にウィジェットのボタンが表示されたままになります。
必須: いいえ (デフォルトは true)
指定可能な値: true, false
インラインフォームでの利用:不可
data-usage-limitstring
このパラメータでは、リカーリングトークンの利用制限を指定します。指定した期間で、1つの課金のみを作成できます。
必須: 制限付きのリカーリングトークン作成権限でリカーリングトークンを作成する場合
指定可能な値: daily, weekly, monthly, annually
インラインフォームでの利用:
data-qr-colorstring (HexColor)
checkoutにqrを指定している場合、QRコードの色がこのパラメータで指定したカラーコードの色に変更されます。
必須: いいえ
指定可能な値: 16進カラーコード
インラインフォームでの利用:不可
data-qr-logo-typestring
checkoutqrに指定している場合、店舗(設定されていない場合は加盟店)のロゴ画像がQRコードの指定された位置に埋め込まれます。
必須: いいえ (デフォルトはNone)
指定可能な値: Background, Centered, None
インラインフォームでの利用:不可
data-show-logoboolean
このパラメータでtrueを指定した時、ウィジェットに表示する店舗のロゴを表示し、falseを指定した時、非表示にします。
このパラメータを指定しない時、幅が5px以下の場合にロゴは非表示にされます。
必須: いいえ
指定可能な値: true,false
インラインフォームでの利用:不可
data-timeoutnumber
このパラメータでは、指定した秒数が経過するとウィジェットは閉じてタイムアウトのエラー画面を表示します。
必須:いいえ
指定可能な値:正の整数(秒数)
インラインフォームでの利用:不可
data-auto-close-on-errorboolean
このパラメータでtrueを指定した場合、data-timeoutで指定した秒数が経過しタイムアウトのエラー画面を表示してから、約3秒後にその画面を自動で閉じます。
必須:いいえ
指定可能な値:true, false
インラインフォームでの利用:不可
data-custom-field-<>string boolean
このパラメータでは、ユーザーの入力欄もしくは選択肢をカスタマイズすることができます。下記パラメータで各項目の指定を行ってください
data-custom-field-labels :ウィジェットに表示させる入力欄/選択肢のタイトルを指定できます。
data-custom-field-types :selectもしくはstring で、そのカスタムフィールドが選択肢か入力欄かを指定します。
data-custom-field-required :trueもしくはfalseでそのカスタムフィールドが必須かどうかを指定します。
data-custom-field-options :カスタムフィールドが選択肢の場合、”;”で区切ることで選択肢の内容を指定します。”,”で区切ることで次の選択肢の内容を指定します。
data-custom-field-keys :メタデータのキーを指定します。指定した順でタイトルがそれぞれ対応します。
必須: いいえ
インラインフォームでの利用:不可
data-metadataこのパラメータでは、 作成されるトランザクショントークンにケバブケース(例:kebab-case)の方式で任意のメタデータを追加することができます。
※ユーザーがフォームで入力した値が上書きされる可能性があるので、他のパラメータによって追加されるメタデータと重複しないように指定してください。 

例:data-metadata=”foo-bar:"baz" と指定した場合、追加されるメタデータは{“foo-bar”:"baz"}

1つのキーに対して複数の値を指定したい場合は「\,」で、複数のキーを指定したい場合には「,」で区切れます。
data-<key>このパラメータでは、 作成されるトランザクショントークンにキャメルケース(例:camelCase)の方式で任意のメタデータを追加することができます。
他のパラメータで使われていない任意の data 属性を指定できます。
例:data-foo-bar="baz" と指定した場合、
追加されるメタデータは{“fooBar”:"baz"}
必須: いいえ
指定可能な値: 任意の文字列
インラインフォームでの利用:
  • Opened (univapay:opened): 決済フォームを開くことで発生するイベントです。その他の情報は含まれていません。
  • Closed (univapay:closed): 決済フォームを閉じることで発生するイベントです。その他の情報は含まれていません。
  • Success (univapay:success): 決済が成功すると発生するイベントです。生成されたリソースのIDと処理の詳細情報が含まれています。
  • Error (univapay:error): いずれかの段階で決済処理が失敗することで発生するイベントです。生成されたリソースのIDが含まれています。
  • Token created (univapay:token-created): トランザクショントークンが作成されたときに発生するイベントで、トークンの詳細情報が含まれています。定期課金やリカーリング課金のように作成済のトランザクショントークンを利用して決済をする場合は発生しません。
  • Charge created (univapay:charge-created): 課金が作成されたときに発生するイベントで、課金の詳細情報が含まれています。成功したかどうかに関わらず発生します。
  • Subscription created (univapay:subscription-created): 定期課金が作成されたときに発生するイベントで、定期課金の詳細情報が含まれています。成功したかどうかに関わらず発生します。
  • Validation error (univapay:validation-error):このイベントには各フィールドにエラーがある場合に発生します。エラーがない場合、または各フィールドがまだ選択されていない場合、オブジェクトにはオブジェクトは空白になります。
<script>
    window.addEventListener("univapay:success", (e) => { console.info("Success event ", e) }, false);
    window.addEventListener("univapay:token-created", (e) => { console.info("Token event ", e) }, false);
    window.addEventListener("univapay:charge-created", (e) => { console.info("Charge event", e) }, false);
    window.addEventListener("univapay:subscription-created", (e) => { console.info("Subscription event", e) }, false);
    window.addEventListener("univapay:validation-error", (e) => { console.error("Validation error event", e) }, false);
</script>