支払いボタンを追加・設定する
11分
この記事内
- ステップ 1 | 支払いボタンを追加する
- ステップ 2 | 決済代行サービスを接続する
- ステップ 3 | ボタンの設定をカスタマイズする
- (オプション)ステップ 4 | ボタンのレイアウトを調整する
- (オプション)ステップ 5 | ボタンのデザインをカスタマイズする
- よくある質問
重要:
支払いボタンを使用してオンライン決済を受け付けるには、支払いの受付が可能なプランを購入する必要があります。
サイトに支払いボタンを追加して、すばやく簡単に支払いを行えるようにしましょう。クリックすると、訪問者は直接購入手続き画面に移動するため、購入プロセスを効率化することができます。支払いボタンを追加したら、決済代行サービスをリンクし、レイアウトを選択し、サイトに合わせてデザインをカスタマイズすることができます。

ステップ 1 | 支払いボタンを追加する
支払いボタンは、使用しているエディタに関係なく、「パーツを追加」パネルまたは「要素を追加」パネルからサイトに追加することができます。これにより、サイトに「支払いボタン」アプリが自動的にインストールされます。
Wix エディタ
Wix Studio エディタ
Harmony エディタ
- エディタに移動します。
- エディタ左側で「パーツを追加」
をクリックします。 - 「ボタン」をクリックします。
- 「支払いボタン」タブを選択します。
- サイトに追加したいボタンをクリックします。

ステップ 2 | 決済代行サービスを接続する
始める前に:
すでに決済代行サービスを接続している場合は、この手順をスキップして、ステップ 3 に進んでください。
支払いボタンを介して訪問者からの支払いを処理できるよう、決済代行サービスを接続します。Wix Payments は、Wix が提供する決済ソリューションです。地域によっては、複数の決済方法の中から、さらに好みのオプションを選択して利用することもできます。
決済方法を接続する方法:
- サイトダッシュボードの「決済方法」にアクセスします。
ヒント:右上にあるビジネス所在地を確認してください。正しくない場合は、ドロップダウンメニューをクリックして変更します。 - 他のオプションを表示するか、選択したオプションを接続します:
- その他のオプションを表示する:
- 下部にある「その他の支払方法を見る」をクリックして、お住まいの地域で利用可能なその他の決済代行サービスを表示します。
- 利用可能な場合、「その他のクレジット / デビットカード決済代行サービス」横の「オプションを見る」をクリックします。
- 接続する:使用したい決済代行サービス横の「接続する」をクリックします。
- その他のオプションを表示する:

- 手順に従ってアカウントの設定を完了するか、既存のサードパーティのアカウントを接続します。
ステップ 3 | ボタンの設定をカスタマイズする
「設定」パネルの各種オプションを使用して、支払いボタンを設定します。ここから、アイテム名や価格を入力したり、通貨を変更したり、利用規約を設定したりすることができます。
注意:
以下の設定を編集できるのは、サイト所有者のみとなります。他の役割を持つ共同管理者は、このセクションにアクセスすることはできません。
Wix エディタ
Wix Studio エディタ
Harmony エディタ
- エディタでボタンをクリックします。
- 「設定」をクリックします。
- オプションを使用してボタンを設定します:
- アイテム名:アイテムの名前を入力します。
- 価格:アイテムの価格を入力します。税金や配送料などの、追加料金を含めることをおすすめします。
注意:アイテムの価格は、サイトの既定の通貨で自動的に表示されます。「通貨を変更」をクリックすると、いつでも別の通貨に変更することができます。 - ボタンテキスト:ボタンに表示するテキストを入力します。
- 利用規約:「利用規約のチェックボックスを表示する」トグルをクリックし、このオプションを有効または無効にします:
- 有効:利用規約のチェックボックスが表示されます。利用規約へのリンクを追加します。
- 無効:利用規約のチェックボックスは表示されません。
- 通知メール:通知メール下に、正しいメールアドレスが表示されていることを確認します。「基本情報」をクリックすると、メールアドレスを変更することができます。
(オプション)ステップ 4 | ボタンのレイアウトを調整する
「レイアウト」オプションを使用して、ボタンの方向と配置を好みに合わせて調整します。
Wix エディタ
Wix Studio エディタ
Harmony エディタ
- エディタでボタンをクリックします。
- 「レイアウト」アイコン
をクリックします。 - 次のオプションを使用してレイアウトを調整します:
- 方向:ボタンを読み進める方向を、「左から右」または「右から左」から選択します。
- 配置:ボタンのテキストの配置を、「左」、「中央」、「右」から選択します。「左」または「右」を選択した場合は、スライダーを使用して、ボタンの端からの余白を調整することができます。

(オプション)ステップ 5 | ボタンのデザインをカスタマイズする
支払いボタンのデザインをカスタマイズして、訪問者の目を引くボタンに仕上げます。どのエディタを使用している場合でも、ボタンの外観は自由にカスタマイズすることができます。
Wix エディタ
Wix Studio エディタ
Harmony エディタ
- エディタでボタンをクリックします。
- 「デザイン」アイコン
をクリックします。 - ボタンのプリセットデザインから選択します。
- 「通常時」と「ホバー時」のデザインをさらに編集する場合は、「デザインをカスタマイズ」をクリックします:
- 色・不透明度:ボタンの色と不透明度を選択します。
- 枠線:ボタンの枠線をデザインします。
- 角:ボタンの角を丸くします。
- 影:ボタンに影を追加してデザインします。
- テキスト:ボタンのテキストをデザインします。

よくある質問
支払いボタンの設定についての詳細は、以下の質問をクリックしてください。
1つの支払いボタンで複数の支払い方法を受け付けることはできますか?
支払いボタンで行われた支払いを追跡することはできますか?
サイトから支払いボタンを削除するにはどうすればよいですか?

