【図解&動画解説】Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

paypal-modal会員サイトプラグイン

wordpressで簡単にオンライン会員サイト・オンラインサロンを作り、会員限定コンテンツを作る事が出来るSimple Membershipsの設定方法をwordpressの先生が丁寧に解説します!

今回は【paypalスマートチェックアウトボタン】

スマートチェックアウトとは画面以降なしにポップアップウィンドウで支払いが行える機能の事です

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~モーダルウィンドウ

1回きりのpaypal決済方法解説は

サブスクリプションタイプのpaypal決済設定は

会員プラグインSimple Membershipsの他の設定項目をご覧になりたい方はSimple Memberships設定方法目次をご覧ください。

PayPalでAPIキーを取得

PayPal Developerで設定を行います。ビジネスアカウントでログインをしてMy App & credentialsへアクセスします。

Applications - PayPal Developer

まずはSandbox(テスト環境)でキーを取得

【Sandbox】が有効化されている状態で【Create app】をクリックします。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

キー取得のための情報を入力

  1. App Nameー好きな名前を付けます。例えばSimple Member Shipなど。日本語は使えません。
  2. Sandbox Bussiness Accountー管理するアカウントを選択します
  3. Create App

を設定します。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

Snadbox IDとシークレット発行

Client IDとSecretが発行されました。引き続きLive(本番用)IDとシークレットを発行します。

SecretはShowをクリックすると表示されます。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

Live(本番用)IDとシークレット発行

  1. My Apps & Credentialsをクリック
  2. Liveの有効化
  3. Create appをクリック
Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

Live APIの設定

  1. App Nameー好きな名前を付けます。例えばSimple Member。日本語は使えません。
  2. Create app

設定をします。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

Live キーとシークレットの発行

本番用Live Client IDとSecretが発行されました。SecretはShowテキストをクリックすると表示されます。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

Simple Member Shipにキーを設定

【WP Membership】>【支払い】へ移動します

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

支払いボタンの種類選択

【Create New Butoon】>【PayPla Subscription】を選択して【次】をクリック

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

paypal Checkout必要事項を入力(上部)

  1. ボタンタイトル
  2. 会員レベル
  3. 支払金額
  4. 支払通貨
  5. Live Client ID
  6. Live Secret
  7. Sandbox Client ID
  8. Sandbox Secret

をまずは設定していきます。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

ボタンタイトル

ボタンのタイトルを付けます。

ex)サブスク会員1

会員レベル

作成済会員レベルを選択します。

支払金額

支払金額を設定します。例えば500円の場合

500

支払通貨

Japanese Yen(¥)を選択します。

Live Client ID

先ほど取得したLive(本番用)Client IDを入力します。

Live Secret

先ほど取得したLive(本番用)Secretを入力します。

Sandbox Client ID

日先ほど取得したSandbox(テスト用)Client IDを入力します。

Sandbox Secret

請求サイクルで設日先ほど取得したSandbox(テスト用)Secretを入力します。

本番用、テスト用、Client IDとSecret間違えないように注意をしてください。

設定例をご紹介

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

paypal checkout必要事項を入力(下部)

引き続き、下部を設定してきます。

  1. サイズ
  2. Shape
  3. レイアウト
  4. Payment Methods
  5. リターン URL
Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

サイズ

  • responsiveースマホとPCで自動でサイズ調整をする

からボタンのサイズを選びます。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
サイズ:中
Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
サイズ:大
Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
サイズ:レスポンシブ

  • ゴールド
  • シルバー

からボタンの色を選びます。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
色:ゴールド
Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
色:青
Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
色:シルバー
Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
色:黒

Shape

  • Rectangularー長方形
  • Pillー角丸長方形

からボタンの形を選びます。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
形:Rectanglular
Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
形:Pill

レイアウト

  • Vertical
  • Horizontal

からボタンのレイアウトを選びます。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
レイアウト:Vertical
Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~
レイアウト:Horizontal

Payment Methods

  • PayPal Creditークレジット払いを許可するか
  • ELVー海外用の支払い設定なので今回は不要です。

リターン URL

ボタンを押した後に表示させるthank youページのURLを設定します。詳細は以下で解説をしています。

設定例をご紹介

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

最後に【支払いデータ保存】をクリックします。

paypalボタンが作成されました

【Manage Payment Button】の中に今作成をしたpaypalボタンが記載されています。【ショートコード】を利用して有料会員登録ページへpaypalボタンを設置します。

私の場合[swpm_payment_button id=60]が作成したボタンを表示させるためのショートコードです。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

自動作成ページ【Join Us】

Simple member shipプラグインを有効化して自動で生成されるページの1つである【Join Us】ページにショートコードを貼ります。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

初期値でセールス文はすべて削除をして、ご自身のサービスに合うセールス文へ変えます。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

以下のように本文中にショートコードを挿入します。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

このように購入ボタンを簡単に設定する事が出来ました。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~cocoonでの設定

あれっ??表示されない???
java scriptの競合でpaypal check out機能が表示されないこともあるとの事で

まずは、入力したsandbox client IDとSecret,、Live client IDとSecretが正しいか確認をしてください。それでも表示されない場合は

  1. テーマを変える
  2. プラグインの全停止(Simple Member Shipだけにする)

テーマを変える

今回、cocoonを使用してSimple Member Shipの解説を作成していました。wordpressデフォルトのテーマであるTwenty Twentyへ変更をしたところすんなりと表示されました。cocoonテーマとSimple Member Shipの相性が悪かったようです。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

今回は解説の為に作成したテストサイトだったので、他のプラグインがほとんど入っていない状態。という事で、テーマが原因?という事にすぐにたどり着きました。

プラグインの全停止

テーマを変えるのって大変だと思います。テーマは見た目を決める大切な部分、できれば変えたくないですよね。なので、まずは他のプラグインとの相性を調べます。

どのように調べるのか??ですが

  1. Simple Member Shipプラグイン以外を全部停止(削除までする必要はありません)
  2. PayPalボタンが表示されるか確認
  3. 【表示されない場合】テーマが原因の可能性も。他のプラグインとの相性が原因であるとは考えにくいです。
  4. 【表示された場合】1つずつプラグインを有効化にして、どのプラグインを有効化にした時にPayPalボタンが表示されなくなるのか調べていきます。地道な作業です。
    原因のプラグインが見つかった場合、プラグインを使わなければならないのか、代替えできるプラグインが無いかといった切り分けを行って表示されない現象を回避していきます。

購入ボタンをクリックすると

モーダルと言って、画面移行する事なくページがグレーアウトして、画面の真ん中にPayPal決済用の画面がポップアップ表示されます。この機能がPayPal スマートチェックアウト機能になります。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

以上でSimple Member ShipでのPayPalスマートチェックアウト機能の解説を終わります。

PayPal個人アカウントの場合

PayPal個人アカウントではこちらの機能を使うことができません。

以下のような表示になった方はアカウントがビジネスアカウントになっているか確認をしてください。まだの方はビジネスアカウントで登録して下さい。

Simple Membershipsオンライン会員サイト・オンラインサロン作成プラグイン~paypal smart checkout決済設定~

会員プラグインSimple Membershipsの他の設定項目をご覧になりたい方はSimple Memberships設定方法目次をご覧ください。

タイトルとURLをコピーしました