インラインフォームのセットアップ

HTMLタグでインラインフォームをセットアップする際は、事前に管理画面の「店舗」→「決済フォーム」にあるHTMLジェネレータから出力されたタグを使うか、アプリトークンIDを控えてから開始してください。
決済ついてのパラメータはウィジェットと同じです。
(クレジットカード以外の決済手段に関するパラメータや、ウィジェットでしか利用できないパラメータなど、インラインフォームでは一部利用できないものがございます。各パラメータの利用可否はこちらからご確認ください。)

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

サンプルコード

<script src="https://widget.univapay.com/client/checkout.js"></script>
<form id="payment-form" action="<任意のURL>">
    <div id="checkout">
        <span
            data-app-id="{アプリトークンID}"
            data-checkout="payment"
            data-amount="1000"
            data-currency="jpy"
            data-inline="true"
        ></span>
    </div>

    <button type="submit">Pay</button>
</form>
<script>
    (function () {
        var form = document.getElementById("payment-form");

        function getPaymentInfo() {
            event.preventDefault();

            var iFrame = document.querySelector("#checkout iframe");
            UnivapayCheckout.submit(iFrame)
                .then((data) => {
                    console.log(data);
                    // The `univapayTokenId` hidden input
                    // has been added with the token id
                    form.submit();
                })
                .catch((errors) => {
                    console.error(errors);
                });
        }

        form.addEventListener("submit", getPaymentInfo);
    })();
</script>

これは 1000 円を支払うためのインラインフォームをセットアップしています。

金額と通貨

以下のパラメータを編集することで、チェックアウトタイプ、金額、通貨を変更することができます。
data-checkout と data-token-type はウィジェット: HTMLと同様です。
ただし、インラインフォームでは qr は使用できません。

            data-checkout="payment"
            data-amount="1000"
            data-currency="jpy"

パラメータを用いたデザインカスタマイズ

インラインフォームでは、各種パラメータの値にstyleを記述することでデザインを変更できます。変更可能な箇所は、以下の通りです。

  • ラベルの文字色/他の要素とのスペース…パラメータdata-inline-item-label-styleを利用して変更できます。margin, padding共に指定可能です。
  • 未入力時の入力ボックスの文字色/背景色/枠の色/他の要素とのスペース…パラメータdata-inline-field-styleを利用して変更できます。margin, padding共に指定可能です。
  • 項目選択（入力中）時のボックスの文字色/背景色/枠の色…パラメータdata-inline-field-focus-styleを利用して変更できます。
  • エラーメッセージの文字色/背景色…パラメータdata-inline-item-error-styleを利用して変更できます。
  • 全体の背景色、要素（入力ボックス、ラベル、メッセージで一要素）同士のスペース…data-inline-item-styleを利用して変更できます。margin, padding共に指定可能です。

ボタンデザイン

独自のCSSクラスを記述し適用することで、ボタンのデザインを変更することができます。

  <button type="submit">Pay</button>

完了後の処理

決済完了後、トランザクションのIDは送信時にフォームに追加されます。
data-checkout-type=“payment” 指定時には univapayChargeId 、data-token-type=“subscription” 指定時には univapaySubscriptionIdもそれぞれinput要素として追加されます。

サンプルコードの以下記述は、決済成功時にインラインフォームを自動でsubmit するためのものです。

<script>
    (function () {
        var form = document.getElementById("payment-form");

        function getPaymentInfo() {
            event.preventDefault();

            var iFrame = document.querySelector("#checkout iframe");
            UnivapayCheckout.submit(iFrame)
                .then((data) => {
                    console.log(data);
                    // The `univapayTokenId` hidden input
                    // has been added with the token id
                    form.submit();
                })
                .catch((errors) => {
                    console.error(errors);
                });
        }

        form.addEventListener("submit", getPaymentInfo);
    })();
</script>

このアクションが不要な場合は、上記を取り除くか、別の記述を行ってください。

ウェブフック

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

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

パラメータ

パラメータ
data-emailstring
メールアドレス。値が無い場合はフォームにメールアドレス入力欄を表示します。値がある場合はメールが入力済みの状態になり入力欄が非表示になります。
必須: いいえ
指定可能な値: メールアドレス
data-require-emailboolean
data-emailに値がある場合でも入力欄を表示します。入力欄にはdata-emailの値が入力された状態で表示されます。
必須: いいえ
指定可能な値: true
data-inline-item-stylestring
各フィールドコンテナのスタイル。コンテナとは、エラーメッセージ、ラベル、インプット要素を含む要素のことです。
必須: いいえ
指定可能な値: css styles
data-inline-item-label-stylestring
フィールドラベルのスタイル。
必須: いいえ
指定可能な値: css styles
data-inline-item-error-stylestring
すべてのエラーメッセージを含む、エラーメッセージコンテナのスタイル。
必須: いいえ
指定可能な値: css styles
data-inline-field-stylestring
インプットフィールド用のスタイル。
必須: いいえ
指定可能な値: css styles
data-inline-field-invalid-stylestring
無効時のインプットフィールドのスタイル。
必須: いいえ
指定可能な値: css styles
data-inline-field-focus-stylestring
フォーカスされたときのインプットフィールドのスタイル。
必須: いいえ
指定可能な値: css styles