---
title: "UnivaPay連携"
source: "https://vibely.site/docs/manual/univapay-integration"
section: "操作マニュアル"
category: "組織"
updated: "2026-08-03"
---

# UnivaPay連携

vibelyでは、Stripeに加えてUnivaPayを商品の決済に利用できます。
この記事では、UnivaPay管理画面での準備からvibelyとの接続、Webhookの登録まで、初期設定の手順を順番に説明します。

> **メモ**
>
> UnivaPay連携はBeginnerプラン以上でご利用いただけます。
> プランの変更方法は[「プランの変更方法」](https://vibely.site/docs/manual/change-plan)をご覧ください。

## UnivaPay連携でできること

UnivaPayの店舗アカウントをvibelyに紐付けると、商品（買い切り・サブスクリプション）の決済にUnivaPayを利用できます。
売上は全額、運営者のUnivaPayアカウントに直接入金されます。
UnivaPay商品の決済には、vibelyのプラットフォーム手数料はかかりません（UnivaPayの決済手数料はご契約内容に依存します）。

商品の作り方は[「商品の登録」](https://vibely.site/docs/manual/create-product)をご覧ください。

## 事前に準備するもの

- UnivaPayの加盟店アカウント（UnivaPay社との契約が必要です）
- UnivaPay管理画面（
  [merchant.univapay.com](https://merchant.univapay.com/)
  ）にログインできるアカウント

UnivaPayとの契約がまだの場合は、UnivaPayの公式サイトからお申し込みください。

## 連携の全体像

連携は次の4ステップで行います。

1. UnivaPay管理画面で「店舗ID」を確認する
2. UnivaPay管理画面で「アプリトークン」を発行する
3. vibelyの外部サービス連携ページで接続する
4. UnivaPay管理画面で「ウェブフック」を登録する

## 手順1：店舗IDを確認する

UnivaPay管理画面の左メニューから「店舗」を開き、連携したい店舗を選びます。
「一般」タブ →「全体設定」の「情報」欄に表示されている「店舗ID」を控えます（図1の①）。

![UnivaPay管理画面の店舗詳細で店舗IDを確認する](https://xzivcqbzwwetyrrkazll.supabase.co/storage/v1/object/public/app-public/public/document-articles/1785722436802-d6bf5be1-0e23-4476-915c-6c6cc0b0a194.png)

*図1：店舗の詳細画面に表示される「店舗ID」（①）を控える*

## 手順2：アプリトークンを発行する

UnivaPay管理画面の左メニューから「アプリトークン」を開き、「新規作成」を押します。
「アプリトークンの追加」画面で、次のとおり設定します（図2）。

1. 「利用店舗を指定する」をオンにします（図2の①）
2. 「店舗」で手順1の店舗を選びます（図2の②）
3. 「モード」を選びます（図2の③）。動作確認には「テスト」、実際の販売には「本番」を選びます
4. 「ドメイン」の「＋追加」を押し、ポータルサイトのドメインを入力します（図2の④）。ドメインは「あなたの組織のサブドメイン.vibely.site」です（例: shiftb.vibely.site）

入力したら「作成」を押します。

![UnivaPay管理画面のアプリトークン追加画面](https://xzivcqbzwwetyrrkazll.supabase.co/storage/v1/object/public/app-public/public/document-articles/1785722439111-09c651ae-3041-4667-81f2-5798314ce0bb.png)

*図2：アプリトークンの追加。①店舗の指定をオン ②店舗を選択 ③モードを選択 ④ドメインを追加*

作成すると、アプリトークン（JWT）とシークレットが発行されます。
どちらも手順3のvibely側の入力で使うので、控えておいてください。

> **注意**
>
> シークレットはトークンの作成時にしか確認できません。
> 控え忘れた場合は、アプリトークンを作り直してください。

> **メモ**
>
> 「ドメイン」は、決済ウィジェットの表示を許可するドメインの設定です。
> 設定を忘れると、購入ページで決済ウィジェットが表示されません。
> 正確なドメインは、手順3で連携したあとにvibelyの外部サービス連携ページのUnivaPayカードにも表示されます。

## 手順3：vibelyで接続する

vibelyの管理画面で、画面左上の組織名 →「組織設定」→「外部サービス連携」を開きます。
ページの開き方は[「外部サービス連携」](https://vibely.site/docs/manual/external-integrations)をご覧ください。

「決済」グループにあるUnivaPayカードの「UnivaPay に接続」を押します（図3の①）。

![外部サービス連携ページのUnivaPayカード](https://xzivcqbzwwetyrrkazll.supabase.co/storage/v1/object/public/app-public/public/document-articles/1785722429954-377bd000-be12-472c-9f94-6cc875c265e8.png)

*図3：UnivaPayカードの「UnivaPay に接続」（①）を押す*

表示されたダイアログに、ここまでで控えた情報を入力します（図4）。

1. 店舗ID（図4の①）：手順1で控えた店舗ID
2. アプリトークン (JWT)（図4の②）：手順2で発行したトークン
3. シークレット（図4の③）：手順2で発行したシークレット

「接続する」を押すと、vibelyがUnivaPayへの接続確認を行い、成功すると連携が完了します。
入力に誤りがある場合はエラーが表示されるので、3つの値を確認して再度お試しください。

![UnivaPayと連携ダイアログ](https://xzivcqbzwwetyrrkazll.supabase.co/storage/v1/object/public/app-public/public/document-articles/1785722432004-dd24d6bf-e577-410b-8fb5-2f922516bc7a.png)

*図4：①店舗ID ②アプリトークン(JWT) ③シークレット を入力して「接続する」*

## 手順4：Webhookを登録する

連携が完了すると、UnivaPayカードに「Webhook設定（必須）」としてWebhook URLと認証トークンが表示されます（図5）。
Webhookは、決済結果をvibelyに通知するための設定です。
未設定だと、決済結果の反映（コースの付与・案内メールの送付）が遅延・欠落する場合があるため、必ず登録してください。

![連携後のUnivaPayカードに表示されるWebhook設定](https://xzivcqbzwwetyrrkazll.supabase.co/storage/v1/object/public/app-public/public/document-articles/1785722434219-4c7797de-d97b-4536-9e06-bfec7e4d1164.png)

*図5：連携後のUnivaPayカード。①Webhook URL ②認証トークン をコピーできる*

UnivaPay管理画面の左メニューから「ウェブフック」を開き、「新規作成」を押します。
「ウェブフック追加」画面で、次のとおり設定します（図6）。

1. 「URL」に、vibelyに表示されているWebhook URLを貼り付けます（図6の①）
2. 「Authorizationヘッダー」に、vibelyに表示されている認証トークンを貼り付けます（図6の②）。なりすまし防止のため必須です
3. 「トリガー」のイベントをすべてチェックします（図6の③）

設定したら「作成」を押します。

![UnivaPay管理画面のウェブフック追加画面](https://xzivcqbzwwetyrrkazll.supabase.co/storage/v1/object/public/app-public/public/document-articles/1785722860692-d59254b5-646c-45be-ac72-1e8cab17d6d6.png)

*図6：ウェブフック追加。①URL ②Authorizationヘッダー ③トリガーをすべて選択*

## 動作確認とテスト

連携後のUnivaPayカードには、Webhookの受信状況に応じた案内が表示されます。
本稼働の前に、テスト商品の作成から購入までのテストを実施することをおすすめします。

テストモードのアプリトークンで連携している場合は、UnivaPayのテストカードで実際の請求なしに購入テストができます。
テストカードの番号は、UnivaPay管理画面の「テスト課金」やUnivaPayのご利用ガイドで確認できます。

テストが完了して実際の販売を始めるときは、手順2で「本番」モードのアプリトークンを新しく発行し、UnivaPayカードの「接続情報を更新」から店舗ID・トークン・シークレットを入力し直してください。

> **注意**
>
> 本番モードで決済するには、UnivaPay側で決済サービス（ゲートウェイ）の設定が完了している必要があります。
> テストモードでは決済できるのに本番モードで決済できない場合は、ご契約状況・決済サービスの設定をUnivaPayサポートにご確認ください。

## 連携を解除するとき

UnivaPayカードの「連携を解除」から連携を取り消せます。
解除すると、UnivaPay決済機能が利用できなくなり、公開中のUnivaPay商品はすべてアーカイブされます。
また、購入者がvibely上でUnivaPayサブスクリプションを解約する操作もできなくなります。

課金継続中のサブスクリプションがある間は、連携を解除できません。
UnivaPay管理画面で該当のサブスクリプションを解約し、vibelyに解約が反映されてから再度お試しください。