ウィジェット: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-id | string (TOKEN) ウィジェットが支払いを行うストアで発行したアプリケーショントークンを指定します。 必須: はい 指定可能な値: 有効なアプリケーショントークン インラインフォームでの利用:可 |
data-checkout | string トランザクショントークンを作成するだけ( token )か、トランザクショントークンと課金/定期課金の両方を作成する (payment )か、トランザクショントークンのみ作成しQRコードを表示する(qr )かを指定します。表示されたQRコードの読み取りについては、こちらをご覧ください。 必須: はい 指定可能な値: token , payment , qr インラインフォームでの利用:可(qrのみ不可) |
data-payment-type | string ここで指定した決済方法のみが支払いで利用できるようになり、他の支払い手段はウィジェットに表示されません。 指定したpaymentTypeが利用不可だった場合、チェックアウトでエラーを返します。 必須: いいえ(デフォルトは 全ての支払い方法 )指定可能な値: card , konbini , paidy , online ,bank_transfer インラインフォームでの利用:不可 |
data-payment-types | string 支払方法をフィルタリングさせることができます。 必須: いいえ(デフォルトは 全ての支払い方法 )指定可能な値: “,”で区切られた 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-amount | number ワンタイム課金の場合に課金金額を指定します。 定期課金の場合は、1回の支払いで課金する金額を指定します。 分割払いの場合は、すべての支払の合計金額を指定します。 補助通貨を使用する通貨の場合、補助通貨を含んだ金額を指定するよう注意してください。 例:9.50 USD の場合は 950 と表記します。必須: はい 指定可能な値: 正の整数 インラインフォームでの利用:可 |
data-currency | string (currency code) 課金金額の通貨を指定します。 必須: はい 指定可能な値: 通貨コード インラインフォームでの利用:可 |
data-token-type | string 作成するトランザクショントークンの種類を指定します。 必須: いいえ (デフォルトは one_time )指定可能な値: one_time , recurring , subscription インラインフォームでの利用:可 |
data-product-codes | string 商品コードの指定を行い、商品に紐づいた情報を基に決済を行います。 都度課金商品は "," で区切ることで複数指定することができます。(定期課金商品は不可)このパラメータを指定する場合は、app-id,checkoutを指定する必要があります。 ※商品に含まれる情報をパラメータで別途指定すると商品の情報より優先されますのでご注意ください。 商品に含まれない情報であればその他パラメータで併用可能です。 ex)初回0円の定期課金を作成する際はcvv-authorizeの指定が必要です。 仮売上を行いたい場合はcaptureを併用して指定してください。 必須:いいえ 指定可能な値:事前に作成した商品の商品コード インラインフォームでの利用:可 |
data-subscription-period | string 定期課金の課金の間隔を指定します。 必須: トークンタイプが subscription の場合指定可能な値: daily (毎日), weekly (毎週), biweekly (隔週), monthly (毎月), bimonthly (隔月), quarterly (3ヶ月), semiannually (6ヶ月), annually (毎年)インラインフォームでの利用:可 |
data-subscription-id | string 定期課金の作成ではなく、指定された定期課金に適用可能なトランザクショントークンを作成します。 必須: いいえ 指定可能な値: アプリケーショントークンに紐付いたストアに作成されている定期課金のID インラインフォームでの利用:可 |
data-installment-plan | string クレジットカード会社の分割払いの定期課金を作成します。 固定の回数の支払い( fixed_cycles )か、リボ払い(revolving )を指定できます。必須: いいえ 指定可能な値: fixed_cycles , revolving インラインフォームでの利用:可 |
data-installment-qty | number 分割払いプランに fixed_cycles を指定している場合、支払回数を指定します。必須: 分割払いプランを指定している場合 指定可能な値: 3, 5, 6, 10, 12, 15, 18, 20, 24 インラインフォームでの利用:可 |
data-installment-initial-amount | ※5/11に仕様変更がありこのパラメータは利用不可になりました。 クレジットカード分割の定期課金では初回課金金額を指定できません。 回数指定の定期課金を作成する場合はdata-subscription-initial-amountを指定してください。 |
data-subscription-plan | string 回数指定の定期課金を作成します。 固定の回数の支払い( fixed_cycles )か、毎回の課金額を固定にする(fixed_cycle_amount )を指定できます。必須: いいえ 指定可能な値: fixed_cycles , fixed_cycle_amount インラインフォームでの利用:可 |
data-subscription-qty | number 回数指定プランに fixed_cycles を指定している場合、支払回数を指定します。初回課金を含めた回数を指定してください。fixed_cycle_amount を指定した場合は、課金ごとの金額を指します。必須: 回数指定プランを指定している場合 指定可能な値: 正の整数 インラインフォームでの利用:可 |
data-subscription-initial-amount | number 分割払いプランではない定期課金の場合、初回の支払いの金額を指定します。 必須: いいえ 指定可能な値: 正の整数 インラインフォームでの利用:可 ※5/11に仕様変更があり、回数指定の定期課金を作成する場合はこのパラメータで初回金額を指定してください。 |
data-subscription-start | string 作成された定期課金の2回目の課金を行う日付を指定します(初回の課金は定期課金作成時に行われます)。 必須: いいえ 指定可能な値: ISO8601 形式の日付 インラインフォームでの利用:可 |
data-subscription-start-in | string 定期課金の2回目の課金が行われるまでの期間。(初回課金は定期課金の作成時に行われます。) subscriptionStartが設定されていない場合のみ動作します。 必須: いいえ 指定可能な値: ISO8601 duration text。 例:P●D、P●M(P1D、P5D、P0M、P1M) インラインフォームでの利用:可 |
data-subscription-start-day-of-month | number 定期課金の2回目の課金が行われる日付。(初回課金は定期課金の作成時に行われます。) subscriptionStartInと組み合わせることも可能です。 (例: subscriptionStartDayOfMonth: 20 subscriptionStartIn: “P1M” と設定した場合、2回目の課金は翌月の20日に行われます。) subscriptionStartInが設定されていない場合、当月(その日付が過ぎていれば翌月)の設定した日付(もしくは末日)に定期課金が開始されます。 (例:2022/10/13にこのパラメータで5を設定した場合、2022/11/5に定期課金が開始されます。) subscriptionStartが設定されていない場合のみ動作します。 必須: いいえ 指定可能な値:1から31までの整数 インラインフォームでの利用:可 |
data-subscription-preserve-end-of-month | booleanperiod がmonthly で、指定された定期課金サイクルの開始日が月末日である場合、trueを指定すると、以降は月の最終日に料金を請求できます。例えば、開始日 が2018-06-30 の場合、次の請求はtrue の場合は2018-07-31 、false の場合は2018-07-30 となります。必須: いいえ(デフォルトはfalse) 指定可能な値:true,false インラインフォームでの利用:可 |
data-text | string HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに表示されるテキストを指定します。 必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-size | string HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンの大きさを指定します。 必須: いいえ (デフォルトは normal )指定可能な値: small , normal , large インラインフォームでの利用:不可 |
data-class | string HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに設定される class 属性を指定します。このパラメータを指定しない場合、ボタンには class が設定されません。必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-style | string HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに設定される style 属性を指定します。このパラメータを指定しない場合、ボタンには がデフォルトに設定されます。必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-hover-style | string HTMLタグでウィジェットをセットアップした際に、自動的に作成されるボタンに設定される ホバーの時の style 属性を指定します。このパラメータを指定しない場合、ボタンにはホバーの時の がdata-styleかデフォルトに設定されます。必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-header | string ウィジェットのヘッダのバーに表示されるテキストを指します。 必須: いいえ (デフォルトは “UnivaPay”) 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-title | string ウィジェット内の店舗の名前がこの値に置き換えられます。 必須: いいえ (デフォルトは店舗で設定されている名前) 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-description | string このパラメータが設定されている場合は、ウィジェット内のサブヘッダーで説明の文字列を表示できます。 必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-submit-button-text | string このパラメータが設定されている場合は、ウィジェット内の支払いボタンがこの値に置き換えられます。 必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-name | string チェックアウトが正常に完了したときに、作成されたリソースIDを保持する注入された入力要素の名前が、この値に変更されます。 トランザクショントークンのみが作成された場合、入力要素の名前はnameパラメータで指定されたものになり、指定されていない場合はunivapayTokenIdになることに注意してください。 サブスクリプションまたは定期的なトークンに基づくチャージが作成された場合、入力要素の名前は name パラメータで指定されたとおりになり、指定されない場合はそれぞれ univapaySubscriptionId / univapayChargeId となります。 この場合、トランザクション・トークンIDを保持する注入要素は、常にunivapayTokenIdとなります。 必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-capture | boolean 課金が作成される場合、このパラメータを false に指定することで、キャプチャを行わずオーソリのみを行うようにします。その際、課金は手動でキャプチャするか、 capture at パラメータを指定することで自動的にキャプチャすることができます。必須: いいえ (デフォルトは true )指定可能な値: true , false インラインフォームでの利用:可 |
data-capture-at | stringcapture パラメータを false に指定したうえでこのパラメータを設定した場合、ここで指定した日時に課金が自動的にキャプチャされます。コンビニ、銀行振込の場合は入金の期限日時を指定することができ、expiration-periodやデフォルトの振込期間の設定よりも優先します。 クレジット:キャプチャの日時は仮売上から1時間後かつ7日以内である必要があります。 コンビニ:決済申込から入金期限日時は30分後かつ60日以内である必要があります。 必須: いいえ 指定可能な値: ISO8601 形式の日時 インラインフォームでの利用:可 |
data-expiration-period | string このパラメータで期間を指定すると、決済が行われてから振込をするまでの期間を設定できます。 銀行振込/コンビニ決済で有効です。 必須: いいえ(デフォルトは30日) 指定可能な値: ISO8601 duration text。 例:P●D、P●M(P1D、P5D、P0M、P1M) インラインフォームでの利用:可 |
data-expiration-time-shift | string このパラメータで時間を指定すると、振込期限の時間を設定できます。 銀行振込/コンビニ決済で有効です。 必須: いいえ(デフォルトは決済が行われた時間) 指定可能な値: ISO8601 例:12:00:00+12:00 インラインフォームでの利用:可 |
data-email | string このパラメータにメールアドレスを指定すると、ウィジェットのフォームのメールアドレスフィールドに初期値として入力されます。 必須: いいえ 指定可能な値: メールアドレス インラインフォームでの利用:可 |
data-shipping-address-zip | string このパラメータに郵便番号を指定すると、ウィジェットのフォームの郵便番号フィールドに初期値として入力されます。 必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-shipping-address-state | string このパラメータに都道府県を指定すると、ウィジェットのフォームの都道府県フィールドに初期値として入力されます。 必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-shipping-address-city | string このパラメータに市区町村を指定すると、ウィジェットのフォームの市区町村フィールドに初期値として入力されます。 必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-shipping-address-line1 | string このパラメータに住所を指定すると、ウィジェットのフォームの番地フィールドに初期値として入力されます。 必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-shipping-address-line2 | string このパラメータに住所を指定すると、ウィジェットのフォームのマンション名・部屋番号フィールドに初期値として入力されます。 必須: いいえ 指定可能な値: 任意の文字列 インラインフォームでの利用:不可 |
data-address | boolean このパラメータを true に設定すると、エンドユーザーに住所を入力するフォームが表示されます。requireEmail とrequireBillingAddress は、どちらか一方のみを有効にする場合に使用します。必須: いいえ (デフォルトは false )指定可能な値: true , false インラインフォームでの利用:不可 |
data-require-name | boolean このパラメータを true に設定すると、エンドユーザーに名前を入力するフォームが表示されます。カードとコンビニ払い、銀行振込には適用されません。 必須: いいえ (デフォルトは false )指定可能な値: true , false インラインフォームでの利用:不可 |
data-require-email | boolean このパラメータを true に設定すると、エンドユーザーにメールアドレスを入力するフォームが表示されます。カードとコンビニ払いには適用されません。 必須: いいえ (デフォルトは false )指定可能な値: true , false インラインフォームでの利用:可 |
data-require-phone-number | boolean このパラメータを true に設定すると、エンドユーザーに電話番号を入力するフォームが表示されます。4桁以上の電話番号を入力可能です。 必須: いいえ (デフォルトは false )指定可能な値: true , false インラインフォームでの利用:可 |
data-require-billing-address | boolean このパラメータを true に設定すると、エンドユーザーに請求先住所を入力するフォームが表示されます。オンライン決済とコンビニ払いには適用されません。 必須: いいえ (デフォルトは false )指定可能な値: true , false インラインフォームでの利用:不可 |
data-show-cvv | boolean CVVなしを許可されている店舗で、このパラメータを false に設定すると、ウィジェットのフォームでCVV 入力フィールドが表示されなくなります。必須: いいえ (デフォルトは true )指定可能な値: true , false インラインフォームでの利用:可 |
data-locale | string このパラメータでは、ウィジェットを表示する際に使用する言語を指定します。 auto に設定すると、ブラウザの言語設定が使用されます。必須: いいえ (デフォルトは auto )指定可能な値: auto , en-us , ja-jp , zh-tw , zh-cn, en , ja , zh インラインフォームでの利用:可 |
data-univapay-reference-id | string (フリーフォーマット) 作成されたトランザクショントークンは、指定されたリファレンスIDと関連付けられます。CSV課金を利用時にリファレンスIDを検索し決済することが可能になります。 必須: いいえ 指定可能な値: 任意の値 インラインフォームでの利用:可 |
data-univapay-customer-id | string (UUID) このパラメータを指定すると、エンドユーザーはクレジットカード情報を保存するかどうかの選択肢が表示されます。ユーザーが保存を選択すると、作成されたトランザクショントークンは、指定されたカスタマーIDと関連付けられます。 これによって、次回に同じカスタマーIDを指定してウィジェットを表示した時、エンドユーザーは保存されたトランザクショントークンから情報を選択して、処理を完了することができます。 token type パラメータに one_time を指定するか、指定を省略した場合、ユーザーがカード情報を保存することを選択すると、 recurring トークンが代わりに作成されます。token type パラメータを recurring に指定すると、エンドユーザーはカード情報の保存を選択しない場合に、トランザクショントークンが作成されなくなります。注: このパラメータを使用するには、無制限( infinite )のリカーリングトークンの作成権限が必要です。必須: いいえ 指定可能な値: 任意のUUID インラインフォームでの利用:可 |
data-cvv-authorize | boolean このパラメータで true を指定した場合、 認証リクエストを行います。認証リクエストが失敗した場合は、リカーリングトークンは作成されません。Checkout が token かつ token type が recurring である場合のみ有効です。初回0円の決済を行うためにはこのパラメータでカード情報の認証のみ行います。 必須: いいえ (デフォルト値は false )指定可能な値: true , false インラインフォームでの利用:可 |
data-allow-card-installments | boolean このパラメータで true を指定した場合、分割払いのプルダウンセレクトを表示します。Checkout が かつ token type がone_timeか recurring であり、カード会社の分割払いが可能な接続先の場合のみ有効です。必須: いいえ (デフォルト値は false )指定可能な値: true , false インラインフォームでの利用:可 |
data-auto-submit | boolean このパラメータで true を指定した場合、処理が完了し次第、form で指定したWEBページに遷移します。必須: いいえ (デフォルトは false )指定可能な値: true , false インラインフォームでの利用:不可 |
data-auto-close | boolean このパラメータで true を指定した場合、処理が完了すると、ウィジェットが自動的に閉じます。必須: いいえ (デフォルトは false )指定可能な値: true , false インラインフォームでの利用:不可 |
data-usage-limit | string このパラメータでは、リカーリングトークンの利用制限を指定します。指定した期間で、1つの課金のみを作成できます。 必須: 制限付きのリカーリングトークン作成権限でリカーリングトークンを作成する場合 指定可能な値: daily , weekly , monthly , annually インラインフォームでの利用:可 |
data-qr-color | string (HexColor) checkoutに qr を指定している場合、QRコードの色がこのパラメータで指定したカラーコードの色に変更されます。必須: いいえ 指定可能な値: 16進カラーコード インラインフォームでの利用:不可 |
data-qr-logo-type | stringcheckout がqr に設定されている場合、店舗(設定されていない場合は加盟店)のロゴ画像がQRコードの指定された位置に埋め込まれます。必須: いいえ (デフォルトは None )指定可能な値: Background , Centered , None インラインフォームでの利用:不可 |
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-<key> | このパラメータでは、 作成されるトランザクショントークンに設定するメタデータを指定します。メタデータを指定する方式は、ウィジェットをHTMLタグでセットアップするか、Javascriptでセットアップするかによって異なります。HTMLタグを使用する場合、他のパラメータで使われていない任意の data 属性を指定することができます。例: data-foo="bar" と指定すると、キーが foo で値が bar のメタデータを指定することになります。Javascriptを使用する場合、 UnivapayCheckout.create を呼び出す際に、以下のように metadata パラメータにオブジェクトを指定します:UnivapayCheckout.create({ ... metadata: { foo: "bar" } }) このJSONの値の有効な型は、配列、文字列、数値、 null のいずれかです。必須: いいえ 指定可能な値: HTMLの場合、任意の文字列。Javascriptの場合、ネストしていない Javascript オブジェクト インラインフォームでの利用:可 |
コールバック
ウィジェットからは下記のイベントをウィンドウに渡します。
- 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): 定期課金が作成されたときに発生するイベントで、定期課金の詳細情報が含まれています。成功したかどうかに関わらず発生します。
<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);
</script>