UnivaPayの審査が通過し、アカウントが発行されたらAppsと連携させます。
UnivaPayの管理画面で初期設定を行う
UnivaPayの管理画面にておすすめの初期設定をご紹介します。
UnivaPayのメール通知をオフにする方法
UnivaPayでは購入者への自動送信メールが初期設定でオンになっています。Appsにも自動送信メールが付属しているのでこの通知は切っておきましょう。
- UnivaPayの管理画面にログイン
- サイドメニューの「一般設定」をクリック
- ページ上部の「全体設定」の右にある「通知」タブをクリック
- 「決済時に加盟店に通知」など、チェックの入ってる項目のチェックを全てオフ
- ページ右下の「保存」ボタンをクリック
UnivaPayのAPIキーを取得
メール通知をオフにしたら次にUnivaPayとAppsを連携させるためのAPIキーを取得します。テスト決済をする必要があるので「本番」「テスト」それぞれのキーを取得してください。
本番キーの取得方法
1. UnivaPayの管理画面にログイン
2. サイドメニューの「アプリトークン」をクリック
3. ページ上部の「＋新規作成」という青いボタンをクリック
4. 「利用店舗を指定する」のチェックをオン
5. 「店舗」から連携させたいアカウントを選択
6. モードで「本番」を選択
7. 「ドメイン」で「＋追加」ボタンをクリックし「*.theapps.jp」を入力
8. ページ右下の「作成」という青いボタンをクリック
9. 「トークン」と「シークレット」に表示されている文字列をそれぞれコピーしてメモ帳などにペースト
テストキーの取得方法
本番キーと同じ手順でテストキーも取得します。「モード」をテストに変更する以外は変わりません。
- UnivaPayの管理画面にログイン
- サイドメニューの「アプリトークン」をクリック
- ページ上部の「＋新規作成」という青いボタンをクリック
- 「利用店舗を指定する」のチェックをオン
- 「店舗」から連携させたいアカウントを選択
- モードで「テスト」を選択
- 「ドメイン」で「＋追加」ボタンをクリックし「*.theapps.jp」を入力
- ページ右下の「作成」という青いボタンをクリック
- 「トークン」と「シークレット」に表示されている文字列をコピーしてメモ帳などにペースト
以上でAPIキーの取得は完了です。
- UnivaPayの管理画面にログイン
- サイドメニューの「アプリトークン」をクリック
- ページ上部の「加盟店」「ストア」の右のプルダウンから店舗名を選択
- 一覧から取得したいトークンをクリック
- トークンが表示されます
よくあるミスとしてドメインの追加し忘れがあります。
*.theapps.jp
を登録しておかないと決済フォームでクレジットカード番号が入力できず決済ができません。
UnivaPayの店舗IDと店舗名を取得
Appsと連携させるためにはトークンの他に「店舗ID」と「店舗名」が必要です。
店舗IDと店舗名の取得方法
- UnivaPayの管理画面にログイン
- サイドメニューの「店舗」をクリック
- 一覧に表示されている店舗をクリック
- 「ID」「店舗名」に表示されている文字列をコピーしてメモ帳などにペースト
サイドメニューの「一般設定」にも似たようなIDが書かれていますが、これは店舗IDとは異なります。間違えないようにしましょう。
Apps管理画面にUnivaPayのAPIキーを登録する
次にAppsにログインして店舗ID・店舗名・APIキーの登録をします。
登録方法
- Apps管理画面にログイン
- サイドメニューの「API連携設定」をクリック
- 下スクロールして「UnivaPay API設定」という項目に移動
- 「ID」にIDを貼り付け
- 「店舗名」に店舗名を貼り付け
- 「決済で利用するカード種類」で利用するカードにチェック
- 本番環境とテスト環境のトークンおよびシークレットをそれぞれ貼り付け
- ページ下部の「更新」という緑のボタンをクリックして登録完了です
入力内容にエラーがあると更新を押しても「更新しました」というポップアップが表示されません。その場合は赤枠になっている入力ボックスに不備がありますのでそちらの修正が必要です。
エラー内容で多いのは店舗IDの入力ミスです。
店舗IDは、
aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee
このような形になります。最後のエリアは連続した12桁の文字列になりますのでご注意ください。(たまにUnivaPay管理画面でスペースが入ることがあるようです)
また、StripeやPayPalなど、使わない入力欄に不要な文字列、例えばメールアドレスなどをブラウザが自動入力してしまい、それによってエラーが出る場合もあります。その場合は自動入力されたメールアドレスを削除して更新ボタンを押してみてください。
以上
Appsアカウント作成方法はこちら
┗STEP.2〜STEP.4について、次項の「2. 試しに決済ページを作ってみる」で詳しくご説明します。
- 利用する決済代行会社を決める
- 試しに決済ページを作ってみる
- 審査用販売サイトを作る 重要
- 決済代行会社のアカウントを作成する
┣Stripeの方はこちら
┗UnivaPayの方はこちら - Appsアカウントと決済代行会社のアカウントを連携する
┣Stripeの方はこちら
┗UnivaPayの方はこちら - テスト決済して問題なければ販売開始 重要
対応ツール
システム解説
◯◯する方法
標準機能
Apps管理画面のサイドメニューに表示されている機能です。
| 1回払い ┗分割払い(売上一括入金) UnivaPayのみ | 定期払い |
| 毎月払い(回数制限付き) | 割引コード |
拡張機能
決済ページ作成画面のサブエリアで設定できる機能です。
支払い方法
価格・料金体系
自動化
表示
顧客入力
| 購入個数 1回払いのみ | 備考欄追加 |
| お届け先住所 | 同意チェックボックス おすすめ |
在庫管理
ページデザイン
その他
オプション機能
さらにAppsを便利に使いたい人向けの機能です。
Discord
決済
料金
