UnivaPay（ユニヴァペイ）の管理画面は、一見シンプルに見えても、実は設定メニューの中に隠れている要素が多く、 「どこからフォームを作ればいいのかわからない」という声が非常に多いです。
この記事では、そんなあなたが迷わずに 自分のアカウントでインラインフォームを作れるようになるまでの手順 を、 実際の管理画面構成に沿ってわかりやすく解説します。
この通りに進めれば、誰でも自分のUnivaPayアカウントでフォームを生成し、自分で利用する、もしくは担当のエンジニアに渡せる状態まで完了できます。
インラインフォームとは？
インラインフォームとは、自分のサイトの中に直接クレジットカード入力欄を埋め込める決済フォームのことです。
通常は「購入ボタン → UnivaPayの決済ページに遷移」という流れになりますが、 インラインフォームを使うとページ遷移せず、ユーザーがそのまま入力・決済できます。
インラインフォームのメリット
- ページ遷移がないため離脱率を下げられる
- デザインを自社サイトと統一できる
- カード情報はUnivaPayが直接処理するので安全
UnivaPay管理画面でインラインフォームを作る手順
① 管理画面にログイン
UnivaPayの管理画面にログインします。
左メニューから 「店舗」→ 対象店舗名をクリック → 「決済フォーム」→ 「インラインフォーム」 へ進みます。
② ジェネレーターを開く
画面上部に「ジェネレーター」という項目があります。
ここで入力した設定内容に応じて、下部に自動でHTMLコードが生成されます。
③ 各設定項目を入力
- 言語： 日本語 / 英語 / 自動
- レイアウト： ラベル（項目名）の位置を上か左で選択
- テーマ： ライト or ダーク
- デザイン調整（任意）： CSSを入力して見た目を微調整可能
プレビューできるので便利です。
④ コードが自動生成される
設定を終えると、下部にHTML＋JavaScriptコードが自動で表示されます。
以下はそのサンプルです。
<script src="https://widget.univapay.com/client/checkout.js"></script>
<form id="payment-form" action="https://example.com/thanks">
<div id="checkout">
<span
data-app-id="app_xxxxxxxxxxxxxxx"
data-checkout="payment"
data-amount="1000"
data-currency="jpy"
data-inline="true"
></span>
</div>
<button id="pay-button" type="submit">Pay</button>
</form>
<script>
(function () {
var form = document.getElementById("payment-form");
var paymentButton = document.getElementById("pay-button");
form.addEventListener("submit", function (event) {
event.preventDefault();
var iFrame = document.querySelector("#checkout iframe");
UnivapayCheckout.submit(iFrame)
.then((data) => { form.submit(); })
.catch((errors) => { paymentButton.disabled = false; });
});
})();
</script>
ここに表示される data-app-id の部分に、あなたのApp IDを入力します。
金額はサンプルで1000としています。
⑤ エンジニアに送る情報
生成したコードと一緒に、以下の内容をエンジニアに送ればOKです。
- App ID（アプリトークンID）
- 決済金額（固定 or 可変）
- 通貨（例：JPY）
- 完了後のリダイレクトURL（例：
https://example.com/thanks） - テスト or 本番どちらの環境か
送信テンプレート例（Slack / メール）
あなたがもし、担当のエンジニアに情報を送付する立場の場合は下記をご利用ください。
以下、UnivaPay管理画面で生成したインラインフォームの情報です。
サイトへの実装をお願いいたします。
- App ID：app_xxxxxxxxxxxxxxx
- 決済金額：1000円（固定）
- 通貨：JPY
- テーマ：ライト
- 完了URL：https://example.com/thanks
生成コード：
（ここにコピーしたHTMLコードを貼り付け）
まとめ
UnivaPayの「インラインフォーム」は、管理画面の「ジェネレーター」から誰でも作成できるフォームです。
管理画面のメニューは一見わかりづらいですが、この手順を踏めば迷わずにフォームを作成できます。
おまけ：用語まとめ
| 用語 | 意味 |
|---|---|
| App ID | UnivaPayが発行するお店の識別ID（フォームに入れる鍵） |
| ウィジェット | 別ウィンドウで開くタイプの決済フォーム |
| インラインフォーム | ページ内に直接埋め込むタイプ（今回のテーマ） |
| リンクフォーム | URLを送って決済してもらうタイプ |
