ウィジェット：HTML

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

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

サンプルコード

<script src="https://widget.univapay.com/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” 指定時には univapayChargeId 、data-token-type=“subscription” 指定時には univapaySubscriptionId）が、それぞれ input 要素として追加されます。
data-auto-submit を利用することにより決済成功時にはウィジェットが含まれるフォームを自動で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
data-payment-typestring
ここで指定した決済方法のみが支払いで利用できるようになり、他の支払い手段はウィジェットに表示されません。
指定したpaymentTypeが利用不可だった場合、チェックアウトでエラーを返します。
必須: いいえ(デフォルトは 全ての支払い方法)
指定可能な値: card, konbini, paidy, online
data-payment-typesstring
支払方法をフィルタリングさせることができます。
必須: いいえ(デフォルトは 全ての支払い方法)
指定可能な値: “,”で区切られたcard, konbini, paidy, online, pay_pay_online, we_chat_online, alipay_online, alipay_plus_online, bank_transfer
data-amountnumber
ワンタイム課金の場合に課金金額を指定します。
定期課金の場合は、１回の支払いで課金する金額を指定します。
分割払いの場合は、すべての支払の合計金額を指定します。
補助通貨を使用する通貨の場合、補助通貨を含んだ金額を指定するよう注意してください。
例：9.50 USD の場合は 950 と表記します。
必須: はい
指定可能な値: 正の整数
data-currencystring (currency code)
課金金額の通貨を指定します。
必須: はい
指定可能な値: 通貨コード
data-token-typestring
作成するトランザクショントークンの種類を指定します。
必須: いいえ (デフォルトは one_time)
指定可能な値: one_time, recurring, subscription
data-subscription-periodstring
定期課金の課金の間隔を指定します。
必須: トークンタイプが subscription の場合
指定可能な値: daily（毎日）, weekly（毎週）, biweekly（隔週）, monthly（毎月）, bimonthly（隔月）, quarterly（3ヶ月）, semiannually（6ヶ月）, annually（毎年）
data-subscription-idstring
定期課金の作成ではなく、指定された定期課金に適用可能なトランザクショントークンを作成します。
必須: いいえ
指定可能な値: アプリケーショントークンに紐付いたストアに作成されている定期課金のID
data-installment-planstring
分割払いの定期課金を作成します。
固定の回数の支払い(fixed_cycles)か、毎回の課金額を固定にする(fixed_cycle_amount)か、リボ払い(revolving)を指定できます。
必須: いいえ
指定可能な値: fixed_cycles, fixed_cycle_amount, revolving
data-installment-qtynumber
分割払いプランに fixed_cyclesを指定している場合、支払回数を指定します。初回課金を含めた回数を指定してください。
fixed_cycle_amount を指定した場合は、課金ごとの金額を指します。
必須: 分割払いプランを指定している場合
指定可能な値: 正の整数
data-installment-initial-amountnumber
定期課金が分割払いプランの場合、初回の支払いの金額を指定します。
必須: いいえ
指定可能な値: 正の整数
data-subscription-initial-amountnumber
分割払いプランではない定期課金の場合、初回の支払いの金額を指定します。
必須: いいえ
指定可能な値: 正の整数
data-subscription-startstring
作成された定期課金の２回目の課金を行う日付を指定します（初回の課金は定期課金作成時に行われます）。
必須: いいえ
指定可能な値: ISO8601 形式の日付
data-subscription-start-instring
定期課金の2回目の課金が行われるまでの期間。（初回課金は定期課金の作成時に行われます。）
subscriptionStartが設定されていない場合のみ動作します。
必須: いいえ
指定可能な値: ISO8601 duration text。 例：P●D、P●M（P1D、P5D、P0M、P1M）
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-textstring
HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに表示されるテキストを指定します。
必須: いいえ
指定可能な値: 任意の文字列
data-sizestring
HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンの大きさを指定します。
必須: いいえ (デフォルトは normal)
指定可能な値: small, normal, large
data-classstring
HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに設定される class 属性を指定します。
このパラメータを指定しない場合、ボタンには class が設定されません。
必須: いいえ
指定可能な値: 任意の文字列
data-headerstring
ウィジェットのヘッダのバーに表示されるテキストを指します。
必須: いいえ (デフォルトは “UnivaPay”)
指定可能な値: 任意の文字列
data-titlestring
ウィジェット内の店舗の名前がこの値に置き換えられます。
必須: いいえ (デフォルトは店舗で設定されている名前)
指定可能な値: 任意の文字列
data-descriptionstring
このパラメータが設定されている場合は、ウィジェット内のサブヘッダーで説明の文字列を表示できます。
必須: いいえ
指定可能な値: 任意の文字列
data-namestring
チェックアウトが正常に完了したときに、作成されたリソースIDを保持する注入された入力要素の名前が、この値に変更されます。
トランザクショントークンのみが作成された場合、入力要素の名前はnameパラメータで指定されたものになり、指定されていない場合はunivapayTokenIdになることに注意してください。
サブスクリプションまたは定期的なトークンに基づくチャージが作成された場合、入力要素の名前は name パラメータで指定されたとおりになり、指定されない場合はそれぞれ univapaySubscriptionId / univapayChargeId となります。
この場合、トランザクション・トークンIDを保持する注入要素は、常にunivapayTokenIdとなります。
必須: いいえ
指定可能な値: 任意の文字列
data-captureboolean
課金が作成される場合、このパラメータを false に指定することで、キャプチャを行わずオーソリのみを行うようにします。
その際、課金は手動でキャプチャするか、capture at パラメータを指定することで自動的にキャプチャすることができます。
必須: いいえ (デフォルトは true)
指定可能な値: true, false
data-capture-atstring
capture パラメータを false に指定したうえでこのパラメータを設定した場合、ここで指定した日時に課金が自動的にキャプチャされます。
必須: いいえ
指定可能な値: ISO8601 形式の日時
data-expiration-periodstring
このパラメータで期間を指定すると、決済が行われてから振込をするまでの期間を設定できます。
銀行振込/コンビニ決済で有効です。
必須: いいえ(デフォルトは30日)
指定可能な値: ISO8601 duration text。 例：P●D、P●M（P1D、P5D、P0M、P1M）
data-expiration-time-shiftstring
このパラメータで時間を指定すると、振込期限の時間を設定できます。
銀行振込/コンビニ決済で有効です。
必須: いいえ(デフォルトは決済が行われた時間)
指定可能な値: ISO8601 例：12:00:00+12: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に設定すると、エンドユーザーに住所を入力するフォームが表示されます。

requireEmailとrequireBillingAddressは、どちらか一方のみを有効にする場合に使用します。
必須: いいえ (デフォルトはfalse)
指定可能な値: true, false
data-require-emailboolean
このパラメータをtrueに設定すると、エンドユーザーにメールアドレスを入力するフォームが表示されます。
カードとコンビニ払いには適用されません。
Required: いいえ (デフォルトは false)
指定可能な値: true, false
data-require-phone-numberboolean
このパラメータをtrueに設定すると、エンドユーザーに電話番号を入力するフォームが表示されます。

Required: いいえ (デフォルトは 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, en-us, ja-jp, zh-tw, zh-cn, en, ja, zh
data-univapay-reference-idstring (フリーフォーマット)
作成されたトランザクショントークンは、指定されたリファレンスIDと関連付けられます。CSV課金を利用時にリファレンスIDを検索し決済することが可能になります。
必須: いいえ
指定可能な値: 任意の値
data-univapay-customer-idstring (UUID)
このパラメータを指定すると、エンドユーザーはクレジットカード情報を保存するかどうかの選択肢が表示されます。ユーザーが保存を選択すると、作成されたトランザクショントークンは、指定されたカスタマーIDと関連付けられます。
これによって、次回に同じカスタマーIDを指定してウィジェットを表示した時、エンドユーザーは保存されたトランザクショントークンから情報を選択して、処理を完了することができます。
token type パラメータに one_time を指定するか、指定を省略した場合、ユーザーがカード情報を保存することを選択すると、 recurring トークンが代わりに作成されます。
token type パラメータを recurring に指定すると、エンドユーザーはカード情報の保存を選択しない場合に、トランザクショントークンが作成されなくなります。
注: このパラメータを使用するには、無制限(infinite)のリカーリングトークンの作成権限が必要です。
必須: いいえ
指定可能な値: 任意のUUID
data-cvv-authorizeboolean
このパラメータでtrue を指定した場合、 認証リクエストを行います。
認証リクエストが失敗した場合は、リカーリングトークンは作成されません。Checkout が token かつ token type が recurring である場合のみ有効です。
初回0円の決済を行うためにはこのパラメータでカード情報の認証のみ行います。
必須: いいえ (デフォルト値は false )
指定可能な値: true, false
data-allow-card-installmentsboolean
このパラメータでtrue を指定した場合、分割払いのプルダウンセレクトを表示します。

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

必須: いいえ (デフォルト値は false )
指定可能な値: true, false
data-auto-submitboolean
このパラメータでtrue を指定した場合、処理が完了し次第、form で指定したWEBページに遷移します。
必須: いいえ (デフォルトは false)
指定可能な値: true, false
data-auto-closeboolean
このパラメータでtrue を指定した場合、処理が完了すると、ウィジェットが自動的に閉じます。
必須: いいえ (デフォルトは false)
指定可能な値: true, false
data-usage-limitstring
このパラメータでは、リカーリングトークンの利用制限を指定します。指定した期間で、1つの課金のみを作成できます。
必須: 制限付きのリカーリングトークン作成権限でリカーリングトークンを作成する場合
指定可能な値: daily, weekly, monthly, annually
data-qr-colorstring (HexColor)
checkoutにqrを指定している場合、QRコードの色がこのパラメータで指定したカラーコードの色に変更されます。
必須: いいえ
指定可能な値: 16進カラーコード
data-qr-logo-typestring
checkoutがqrに設定されている場合、店舗（設定されていない場合は加盟店）のロゴ画像がQRコードの指定された位置に埋め込まれます。
必須: いいえ (デフォルトはNone)
指定可能な値: Background, Centered, None
data-horizontal-inline-layoutboolean
このパラメータでは、ラベルをフィールドの左側に配置にすることができます。
必須: いいえ (デフォルトはfalse)
指定可能な値: true/false
data-<key>このパラメータでは、 作成されるトランザクショントークンに設定するメタデータを指定します。メタデータを指定する方式は、ウィジェットをHTMLタグでセットアップするか、Javascriptでセットアップするかによって異なります。HTMLタグを使用する場合、他のパラメータで使われていない任意の data 属性を指定することができます。
例：data-foo="bar" と指定すると、キーが foo で値が bar のメタデータを指定することになります。
Javascriptを使用する場合、UnivapayCheckout.create を呼び出す際に、以下のように metadata パラメータにオブジェクトを指定します:
UnivapayCheckout.create({ ... metadata: { foo: "bar" } })
このJSONの値の有効な型は、配列、文字列、数値、null のいずれかです。
必須: いいえ
指定可能な値: HTMLの場合、任意の文字列。Javascriptの場合、ネストしていない Javascript オブジェクト