PAY.JPを利用してWordPressにクレジット決済機能を実装する方法!導入方法から定期課金まで徹底解説
こんにちは、webエンジニアのゾノ( @ozonosho )です。
今回のコラムでは、人気のクレジット決済ツール「PAY.JP」を利用してWordPressに決済機能を実装する方法を解説いたします!
PAY.JPの導入方法にはじまり、WordPress上で都度払いや定期課金をおこなう方法まで詳しくまとめました。
少しでも参考になれば幸いです。
- ◆目次
-
1.オンラインクレジット決済ツール「PAY.JP」とは
2.PAY.JPの導入方法
3.PAY.JPによる都度払いの実装方法
4.PAY.JPによる定期課金の実装方法
PR.PAY.JPの導入サポートもおこなっています!
オンラインクレジット決済ツール「PAY.JP」とは
PAY.JP(ペイドットジェーピー)は簡単なコーディングだけでサイトにクレジット決済機能を導入することができるオンライン決済ツールです。
世界的に見るとオンライン決済ツールは「PayPal」や「Stripe」が有名ですが、PAY.JPは日本国内のサービスということもあって日本で一気にシェアを伸ばしている印象です。個人メディアから企業HPまで、さまざまなサイトで利用されているのを見かけます。
ちなみにPAY.JPで元々用意してくれている決済画面を確認したい方は下記の「決済サンプル」ボタンを押してみてください。ポップアップで決済フォームが表示されます。
ご覧いただくと分かるとおり、初期フォームのデザインがとってもお洒落です。
もちろんデザインや機能は自由にカスタマイズできます。開発者向けに多数の情報やライブラリが提供されているので、それぞれのニーズに合わせた決済機能を実装することができます。
PAY.JPのメリット
PAY.JPのメリットを下記に羅列しますが、何と言っても一番の魅力は全決済ツールの中で手数料が一番低いという点だと思います。
- PAY.JPのメリット
-
- 初期費用や会費は一切なし(かかる費用は決済手数料のみ)
- 決済手数料は業界最低の2.59%~
- 開発ドキュメントがすべて日本語(開発者的には神ポイント)
- 主要クレジットカードすべてに対応(Visa/Mastercard/AmericanExpress/JCB/DinersClub/Discover)
- ApplePayにも対応
世界的に低コストで有名なStripeの決済手数料でさえ一律3.6%なので、PAY.JPの決済手数料の低さはかなり際立っています。
決済機能はStripeと変わらないし、管理画面は日本人向けに作られていてStripeよりも使いやすいので、国内サービスであればPAY.JPを利用するのがベストな気がします。
また、開発者的にはドキュメントがすべて日本語というのは本当にありがたい限りです。
(Stripeのドキュメントを読むのは結構大変だったので…)
PAY.JPのデメリット
正直デメリットはあまり見当たらないのですが、Stripeと比べたときに劣る点が2つあります。
- PAY.JPのデメリット
-
- 支払いサイクルがStripeよりも遅い
- 導入実績数がまだ多くない
PAY.JPの支払いサイクルは、通常の利用であれば「月末締めの翌月末支払い」となっています。Stripeは「1週間ごと」という異常な支払いスピードなので、即金性を求めるならStripeのほうが良いです。
また、PAY.JPは比較的新しいサービスということもあってStripeに比べてしまうと導入実績数は劣ります。とはいえ、日本で有名なネットショップ開設サービス『BASE』の決済にも利用されているので安全性については心配することも無いと思います。
PAY.JPの導入方法
ここからは実際にWordPressにPAY.JPを導入するための手順を説明していきます。
まずはPAY.JP公式HPでアカウントを作成しよう
まずはPAY.JP公式HPにてアカウントを作成します。
HPに飛んだら、画面内にある「PAY.JPをはじめる」ボタンをクリックしてください。すると、下図のような登録ページが表示されます。
メールアドレスや名前を入力して「同意して新規登録する」ボタンをクリックすればOK。アカウントの作成はこれだけで完了です!
アカウントが作成されると今設定した情報でログインできるようになっているので、早速ログインしてみましょう。
ログインすると下図のような管理画面が表示されます。
ここからはPAY.JPを利用してクレジット決済機能を実装するための最低限の手順を説明していきます。
PAY.JPの管理画面でテストAPIキーを取得する
まずはPAY.JPの管理画面でテストAPIキーを取得します。
APIキーはサイトに決済機能をつけるときに自分のアカウントと紐づけるための情報なので、実際にこのAPIキーの値を利用するのはコーディングの際になります。ここではAPIキーの表示方法が分かれば一旦OKです。
APIキーはPAY.JPの管理画面内にある「API」ページで確認することができます。
上図の赤矢印の位置に「API」という項目があるのでクリックしてください。
すると「テスト秘密鍵」「テスト公開鍵」「本番秘密鍵」「本番公開鍵」の4つの情報が表示されます。
まずは決済機能がうまく動作するかテストしたいので、今回は「テスト秘密鍵」「テスト公開鍵」の2つを利用します。
ここでは一旦APIの表示方法だけ分かればOKです。
続いてPAY.JPのPHPライブラリを取得しよう
PAY.JPのAPIキーの表示方法が分かったら、続いてサイトでPAY.JPを動作させるためのライブラリを取得します。
PAY.JPはさまざまな言語に対応していますが、今回はWordPress上で動作させるのでPHPのライブラリを使って実装していきましょう。
PHPライブラリは下記のGitHubページに公開されています。
ファイルをダウンロードするためにはページの右側にある緑色の「Clone or download」ボタンをクリックしてください。
ポップアップで表示される「Download ZIP」ボタンをクリックするとダウンロードできます。
ダウンロードしたPHPライブラリをWordPressテーマ内に設置すれば準備完了
ダウンロードしたファイルを解凍すると「payjp-php-master」というフォルダが展開されます。フォルダを開くと、下図のようにPAY.JPのライブラリファイルが入っているのを確認できると思います。
このライブラリファイル群をサーバーにアップロードします。
WordPress内のテーマ直下に「payjp」というフォルダを作り、そこにライブラリ群をすべてアップロードしてください。
※本当は直下に置くよりもライブラリ用のフォルダを作ってそこにまとめて置いたほうが良いのですが、分かりやすさを重視してテーマ直下に「payjp」フォルダを設置しました
これでPAY.JPの決済機能を使うための準備がすべて整いました…!
ここからはいよいよ実装に入っていきましょう!
PAY.JPによる都度払いの実装方法
ここではPAY.JPを利用して都度払い決済機能を実装する方法をご紹介いたします。
PAY.JPを利用して決済をするためには下記2つが必要になります。
- 決済情報を送信するための決済ボタン
- 送信された決済情報を受け取って決済処理を実施するためのコード
どちらもフォーマットが用意されているので実装は簡単です。
さっそく見ていきましょう。
①決済情報を送信するための決済ボタン
まずは決済情報を送信するための決済ボタンを作りましょう。
決済ボタンはユーザーが実際にクレジット決済をおこなう際にクリックするボタンなので、固定ページなど決済ボタンを表示させたい箇所に設置します。
決済ボタンのフォーマットは下記のコードになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form action="テーマフォルダまでのパス/checkout-payjp.php" method="POST"> <!-- 必須ではないけど入れておくとメチャ便利です --> <input type="hidden" name="amount" value="金額"> <script type="text/javascript" src="https://checkout.pay.jp/" class="payjp-button" data-key="公開鍵(APIキー)" data-text="ボタンに表示させたい文言" data-name-placeholder="カード名義のplaceholderに表示させたい文言" data-submit-text="決済フォーム内の決済ボタンに表示させたい文言" > </script> </form> |
※「公開鍵」は先ほどPAY.JPの管理画面で取得したAPIキーのうち「テスト公開鍵」の値を入力してください
実際の例として、このサイトで用意したサンプルの決済ボタンのコードを下記に掲載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form action="https://cree.fun/wp-content/themes/base/checkout-payjp.php" method="POST"> <!-- 必須ではないけど入れておくとメチャ便利です --> <input type="hidden" name="amount" value="3000"> <script type="text/javascript" src="https://checkout.pay.jp/" class="payjp-button" data-key="pk_test_XXXXXXXXXXXXXXXX" data-text="テスト決済はこちら" data-name-placeholder="テスト太郎" data-submit-text="テスト決済する" > </script> </form> |
PAY.JPは1ページ内に1フォームしか設置できない仕様のため、上記のコードをそのまま貼りつけたボタンをこちらのページに掲載しています。表示結果が気になる方はご覧ください。
※出来上がった決済ボタンを押したらそれっぽい動きをしますがこの段階ではまだ決済はできません
決済ボタンの作成はこれだけで完了です!
尚、ボタンのデザインはCSSで変更できるのでCSSをいじれる方は好みのデザインに変更してご利用ください。
②送信された決済情報を受け取って決済処理を実施するためのコード
決済ボタンが完成したので、つづいて決済ボタンから送信された情報をもとに決済処理をおこなうためのコードを用意します。
まずはテーマ直下に『checkout-payjp.php』と名付けたファイルを用意してください。ファイルを用意したら、中身に下記のコードを貼りつけます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<?php require_once(dirname(__FILE__) . '/payjp/init.php'); \Payjp\Payjp::setApiKey('テスト秘密鍵(APIキー)'); //① $token = $_POST['payjp-token']; $amount = $_POST['amount']; //決済 try { $charge = \Payjp\Charge::create(array( "card" => $token, "amount" => $amount, "currency" => "jpy", )); if(isset($charge['error'])) { print($charge['error']['message']); } } catch (\Payjp\Error\Card $e) { $body = $e->getJsonBody(); $err = $body['error']; print('Status is:' . $e->getHttpStatus() . "\n"); print('Type is:' . $err['type'] . "\n"); print('Code is:' . $err['code'] . "\n"); print('Param is:' . $err['param'] . "\n"); print('Message is:' . $err['message'] . "\n"); } catch (\Payjp\Error\InvalidRequest $e) { print($e->getMessage()); } catch (\Payjp\Error\Authentication $e) { print($e->getMessage()); } catch (\Payjp\Error\ApiConnection $e) { print($e->getMessage()); } catch (\Payjp\Error\Base $e) { print($e->getMessage()); } catch (Exception $e) { print($e->getMessage()); } finally { } //サンキューページへリダイレクト $thanks_url = 'サンキューページのURL'; //② header('Location: ' . $thanks_url); exit; ?> |
ご自身で入力していただくのは①②の2カ所のみ!
②は決済後にサンキューページへ飛ばしたい方のみご利用ください。
①の「テスト秘密鍵」は先ほどPAY.JPの管理画面で取得したAPIキーのうち「テスト秘密鍵」の値を挿入してください。
尚、上記のフォーマットは僕が作った一例なので、実装したい動作に合わせて自由に変更してください。
これで準備は完了です!
実際に都度払いをテスト実行してみよう
決済ボタンと決済処理のどちらも準備ができたので、実際に都度払い決済をテスト実行してみましょう。
こちらのページに実際に作成したテスト決済用ボタンを用意したのでぜひ試してみてください。
テスト決済をおこなうと、サンキューページに飛ぶのを確認できると思います。
また、PAY.JPの管理画面にも決済が反映されているので確認してみてください。
こんなふうに入金が反映されていれば成功です!
テスト決済が成功したら、上記で紹介した「テスト公開鍵」「テスト秘密鍵」2つの値をそれぞれ「本番公開鍵」「本番秘密鍵」の値に変更してください。すると、実際のクレジットカードで決済ができるようになります。
PAY.JPによる定期課金の実装方法
ここではPAY.JPを利用して定期課金の決済機能を実装する方法をご紹介いたします。
今回は、下記条件の定期課金を例として実装方法を紹介していきます。
- ◆今回実装する定期決済
-
・月額3000円が自動引き落としされる
・引き落としタイミングはユーザーそれぞれの登録日を基準にする
PAY.JPを利用して定期決済を作成するためにはいくつか方法があるのですが、ここでは僕が最も簡単だと思う方法をご紹介いたします。手順は以下の3ステップになります。
- PAY.JPの管理画面で定期課金用のプランを作成する
- 決済情報を送信するための決済ボタンを作成する
- 送信された決済情報を受け取って決済処理を実施するコードを作成する
さっそく見ていきましょう。
①PAY.JPの管理画面で定期課金用のプランを作成する
まずはPAY.JPの管理画面で定期課金用のプランを作成します。
PAY.JPの管理画面を開き、左側のメニューの中にある「プラン」という項目をクリックしてください。
すると、下図のページが表示されます。
ページ内にある「プラン作成」ボタンをクリックしてください。
すると、定期課金プランの作成ページがポップアップで開きます。
入力する必要があるのは上図でも値を入力している4箇所です。
〇プランの金額
作成したい定期課金の金額を入力してください。
今回は3,000円の定期課金を作成するので「3000」と入力しています。
〇課金間隔
「月次」または「年次」で好きな間隔を選べます。
今回は月額制の定期課金を作成するので「月次」を選択しています。
〇ID
任意入力の項目ですが、PHPで指定したプランでの決済処理をおこなうときにはIDに紐づける必要があるため今回は必ず設定しましょう。
尚、IDは半角英数字のみとなります。
〇プラン名
こちらも任意入力の項目ですが、どのプランの決済がおこなわれたのかを判別するために適当な名称を設定しましょう。
以上の内容を入力して、ページ下部にある「保存」ボタンをクリックすると定期課金プランの作成は完了です。
作成が完了すると、プランページに新しい定期課金プランが表示されているのを確認できると思います。
今回は3000円の定期課金機能のみを作るので1つだけプランを作成しましたが、さまざまなプランを用意したい場合には同じ手順でプランを追加してください。
ひとまずこれでPAY.JPの管理画面で定期課金用のプランを作成する作業は完了です。
②決済情報を送信するための決済ボタンを作成する
つづいて決済情報を送信するための決済ボタンを作りましょう。
決済ボタンはユーザーが実際にクレジット決済をおこなう際にクリックするボタンなので、固定ページなど決済ボタンを表示させたい箇所に設置します。
定期決済をおこなう場合の決済ボタンのフォーマットは下記のコードになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form action="テーマフォルダまでのパス/checkout-payjp.php" method="POST"> <script type="text/javascript" src="https://checkout.pay.jp/" class="payjp-button" data-key="公開鍵(APIキー)" data-text="ボタンに表示させたい文言" data-name-placeholder="カード名義のplaceholderに表示させたい文言" data-submit-text="決済フォーム内の決済ボタンに表示させたい文言" > </script> <input type="hidden" name="plan" value="定期プランのID"> </form> |
先ほどの都度払いのコードとほぼ同じ内容です。
金額の代わりに「定期プランのID」をセットするところがポイントです。
尚、「公開鍵」はPAY.JPの管理画面で取得したAPIキーのうち「テスト公開鍵」の値を入力してください。
実際の例として、このサイトで用意したサンプルの決済ボタンのコードを下記に掲載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form action="https://cree.fun/wp-content/themes/base/checkout-payjp.php" method="POST"> <script type="text/javascript" src="https://checkout.pay.jp/" class="payjp-button" data-key="pk_test_XXXXXXXXXXXXXXXX" data-text="テスト定期課金はこちら" data-name-placeholder="テスト太郎" data-submit-text="テスト決済する" > </script> <input type="hidden" name="plan" value="sample-payment"> </form> |
決済ボタンの作成はこれだけで完了です!
尚、ボタンのデザインはCSSで変更できるのでCSSをいじれる方は好みのデザインに変更してご利用ください。
③送信された決済情報を受け取って決済処理を実施するコードを作成する
決済ボタンが完成したので、つづいて決済ボタンから送信された情報をもとに決済処理をおこなうためのコードを用意します。
まずはテーマ直下に『checkout-payjp.php』と名付けたファイルを用意してください。ファイルを用意したら、中身に下記のコードを貼りつけます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<?php require_once(dirname(__FILE__) . '/payjp/init.php'); \Payjp\Payjp::setApiKey('テスト秘密鍵(APIキー)'); //① $token = $_POST['payjp-token']; $plan = $_POST['plan']; //決済 try { //顧客作成 $customer = \Payjp\Customer::create([ 'card' => $token, 'description' => '顧客の説明用メモ' ]); //定期課金プランと顧客を紐づける $subscription = \Payjp\Subscription::create( array( "customer" => $customer->id, "plan" => $plan ) ); } catch (\Payjp\Error\Card $e) { $body = $e->getJsonBody(); $err = $body['error']; print('Status is:' . $e->getHttpStatus() . "\n"); print('Type is:' . $err['type'] . "\n"); print('Code is:' . $err['code'] . "\n"); print('Param is:' . $err['param'] . "\n"); print('Message is:' . $err['message'] . "\n"); } catch (\Payjp\Error\InvalidRequest $e) { print($e->getMessage()); } catch (\Payjp\Error\Authentication $e) { print($e->getMessage()); } catch (\Payjp\Error\ApiConnection $e) { print($e->getMessage()); } catch (\Payjp\Error\Base $e) { print($e->getMessage()); } catch (Exception $e) { print($e->getMessage()); } finally { } //サンキューページへリダイレクト $thanks_url = 'サンキューページのURL'; //② header('Location: ' . $thanks_url); exit; ?> |
これが決済処理コードのフォーマットになります。
ご自身で入力していただくのは①②の2カ所のみ!
②は決済後にサンキューページへ飛ばしたい方のみご利用ください。
①の「テスト秘密鍵」は先ほどPAY.JPの管理画面で取得したAPIキーのうち「テスト秘密鍵」の値を挿入してください。
これで準備は完了です!
尚、上記のフォーマットは僕が作った一例なので、実装したい動作に合わせて自由に変更してください。
実際に運用する際には、定期課金に登録した顧客を判別する必要があるので、クレジットカード名だけでなくメールアドレスなどの情報も渡してあげると良いと思います。
実際に定期課金をテスト実行してみよう
定期課金をするための準備ができたので、実際にテスト実行してみましょう。
こちらのページに実際に作成したテスト決済用ボタンを用意したのでぜひ試してみてください。
テスト決済をおこなうと、サンキューページに飛ぶのを確認できると思います。
また、PAY.JPの管理画面の「定期課金」ページに登録した定期課金情報が反映されているので確認してみてください。
定期課金一覧のなかに登録した定期課金が反映されていれば決済成功です。
テスト決済が成功したら、上記で紹介した「テスト公開鍵」「テスト秘密鍵」2つの値をそれぞれ「本番公開鍵」「本番秘密鍵」の値に変更してください。すると、実際のクレジットカードで定期課金ができるようになります。
【PR】PAY.JPの導入サポートもおこなっています!
以上、今回はPAY.JPを利用してWordPressにクレジット決済機能を実装する方法をご紹介させていただきました。
今回はシンプルな「都度払い」「定期払い」の実装方法のみ取り上げましたが、PAY.JPとWordPressをうまく組み合わせれば下記のような柔軟な機能も実装可能です。
- ◆PAY.JP×WordPressで実装できる機能
-
- 誰がどのタイミングで定期課金に登録しても一律で毎月〇日に決済する機能
- 決済と同時に管理者・ユーザーそれぞれに通知メールを送信する機能
- ユーザー用のマイページを作成して、ユーザーが自分のマイページから都度払いや定期決済を自由に登録・解除できる機能
- ユーザーに会員期限を持たせて、PAY.JPの支払いと連動してユーザーの会員期限を延長させる機能
- 毎月決まった日時にWordPress側からPAY.JP側にユーザーの直前決済ステータスを取得しにいき、決済に失敗したユーザーがいたら管理者宛に通知メールを送る機能
- 条件に応じて自動的にユーザーの決済プランが切り替わる機能
- etc…
このあたりの機能までいくとブログで汎用的なコードをご紹介するのは難しいですが、当サイトでは「自分ではPAY.JPを導入することが難しい…」という方に向けて導入サポートもおこなっております。
もしご要望があれば気軽に下記ページよりご相談ください(*´`)