WordPressでカード決済!Stripeの使い方【自動返信メール対応】

WordPressでカード決済!Stripeの使い方

前回、Stripeの使い勝手や他のサービスとの比較をした記事を書いたんですが、Stripeの使い方について知りたいというお問い合わせをいただきました。

WordPressのテーマを販売開始してからずっとSPIKEというクレジットカード決済システムのフリープランを使っていました。S...

 

そこで今回はWordPressでStripeを使う方法についてまとめてみます。ちなみに下記のような環境を構築します。

  • ページ遷移なしのクレジットカード決済
  • メールアドレスとカード番号だけのシンプルなフォーム
  • 購入者への自動返信メール
  • 管理人への自動返信メール
  • 購入からサンキューページまで全てサイト内で完結

カートシステムはプラグインのWooCommerceを使えばいけるそうですが、ここではやりませんので悪しからず。

あ、あとFTPソフトを使う前提の解説になるので、FTP環境がない方は先にそちらを準備してくださいね。サーバー上でダイレクトにファイルを作成して編集する方法もありますが、ちょっと面倒ですw

Stripeの会員登録の手順は端折りますので、各自で済ませておいてください。

Stripe公式サイト

Stripeを利用するにはサイトをSSL化(https://〜)しておく必要があります。(テストモードでは非SSLサイトでも使用できます)

準備するもの

まず最初に必要なファイルやページを先に準備しておきます。主に以下の6つになります。

  • 決済フォームを載せるページ(固定ページ)
  • 購入完了後のサンキューページ(固定ページ)
  • StripeのAPIキー(テスト環境用・本番用)
  • PHPファイル(決済/自動返信メール)

ひとつずつ解説していきます。

決済ページを作成する

決済ボタンを載せるページを作成します。すでに販売ページなどがある場合はそれでOKです。

WordPress管理画面の「固定ページ」で適当にページを作成しておきます。ここでは固定ページで進めますが、普通の記事やカスタム投稿でもかまいません。

パーマリンクは「stripe-page」としておきます。

サンキューページを作成する

上記の決済ページと同様に、固定ページでサンキューページを作成してください。パーマリンクは「stripe-thanks」としておきます。

StripeのAPIキーを用意する

Stripeはテスト環境用のキーと本場用のキーの2種類が用意されています。このおかげで非常にかんたんにテスト環境を作って試すことができます。

APIキーには publishable key と secret key の2つがあり、両方を用意します。

publishable key(テスト用)

Stripeにログインしてから、下記リンク先に移動します。

https://stripe.com/docs

下図のところに記載されてるので、コピーしてどこかにメモしておいてください。

Stripeのテスト用publishkey取得
publishable key(本番用)

Stripeの管理画面TOPにいって、「API」という項目をクリックします。

Stripeの本番用publishkey取得

テスト用と同じように本番用のコードとしてどこかにメモっておいてください。

secret key(テスト用)

下記リンク先に移動します。

https://stripe.com/docs/api#authentication

下図のところに記載されるコード(sk_test〜)をメモします。

Stripeのテスト用secretkey取得
secret key(本番用)

Stripeの管理画面TOPにいって、「API」という項目をクリックします。

Stripeの本番用secretkey取得

※アカウント作成後は上記の赤枠に記載されてます。もし上図のようにコードが隠れている場合は「Reveal live key token」をおして再生成してください。

赤枠内に記載されているコードを同様にコピペしてメモしてください。

PHPファイルを作成する

普段コードを触らない人はここが最難関wここの設定ができればあとは簡単なので、がんばりましょう。

ここで作成するPHPファイル内にはメールプログラムやAPIを利用したコードなどを記載します。いろいろとカスタマイズする場合は、このファイルを編集・追記するかたちになります。

Stripeのライブラリをダウンロードする

まず、StripeのPHPライブラリをダウンロードしておきます。下記URLより最新のZIPデータをダウンロードしてください。

https://github.com/stripe/stripe-php/releases

解凍したファイルをFTPソフトを使って、下記のディレクトリ直下に配置しておきます。(libフォルダがなければ作成してください)

wp-content > themes > お使いのテーマ名 > lib

 

PHPファイルを作成する

次に下記のディレクトリの直下に「checkout.php」という名前のPHPファイルを作成します。

wp-content > themes > お使いのテーマ名

中身のコードは下記をコピペしてください。

コピペしたコードの日本語のところをご自身のものに変更してください。具体的には下記を参考にしてください。

03行目ダウンロードしたライブラリ名(例:stripe-php-5.1.1)
07行目テスト用secret keyを入力(例:sk_test〜のコード)
17行目金額(例:9800)
20行目商品名
32行目自動返信メールタイトル(例:ご購入有難うございます)
33行目ここに自動返信メールの本文を記載。
35行目送信者名(例:サイト名もしくはあなたの名前)
36行目送信元となるメールアドレス
53行目管理者宛メールタイトル
54行目送信元となるメールアドレス
55行目ここに管理者宛メールの本文を記載。
63行目サンキューページのURL(例:https://〜.com/stripe-thanks/)

 

テスト環境で動作確認

ここからは実際に動作を確認してみます。

決済ページに決済ボタンをつくる

まずは決済ページ(stripe-page)に下記のコードを貼り付けてください。

01行目checkout.phpまでの絶対パス
(例:https://example.jp/wp-content/themes/atlas/checkout.php)
04行目テスト用publishable keyを入力(例:pk_test〜のコード)
05行目金額(例:9800)
06行目販売元名
07行目商品名
13行目決済ボタンの文字

 

うまく動作していれば「今すぐ購入」をクリックすると下図のような画面になります。

テスト用クレジットカードで決済できるか試す

Stripeにはテスト用のクレジットカード番号が用意されてるので、それを使って決済ができるか確かめます。

◎テスト用クレジットカード情報

カード番号:4242 4242 4242 4242

有効期限:01 / 30

セキュリティコード:1234

無事にサンキューページにリダイレクトすれば正常に決済が完了しているはずです。念のため、Stripeのページで売上を確認しておきましょう。

テスト環境で正常に決済できたか確認する

Stripeにログインして管理画面TOPにいきます。画面左の下にある「View Test Data」を有効にします。

Payment」の項目でさっきのテストカードで決済した情報が載っていればOKです。

Stripeのテスト決済の動作確認

本番用のAPIキーに切り替える

テスト環境で正常に動作していれば、最後に secret keypublishable key を本番用のものに貼り替えます。(sk_live〜、pk_live〜

これだけです。

最後に自分のカードを使って決済テストをします。テスト環境でうまくいっていれば基本的に動作がおかしくなることはないと思うのですが、念のため。

カード決済後、「View Test Data」をオフにして「Payment」の項目を確認し、情報が載っていればOKです。自動返信メールや管理者宛のメールなども合わせてチェックしておきましょう。

また、せっかくなので返金処理もためしにやっておくことをおすすめします。

返金処理のやり方

管理画面に入って「Payment」の項目をクリックし、返金したい売上のリスト選択します。

売上を返金するやり方

すると売上の詳細情報のページに移動するので、「Refund」ボタンをクリックします。

売上を返金するやり方

返金処理は以上です。

ちなみに売上管理や返金処理はスマホのアプリでもできるのでストアからダウンロードしておくと管理がめっちゃ楽なのでおすすめです!

この方法の問題点

それは決済完了からサンキューページへの切り替わりが遅いこと。

これって結構痛いのですが、購入までのプロセスに影響しないし、問題もおきていないため様子見の状態で放置してます。。。w

応急処置としてgifのローディング画像をページ遷移完了まで読み込ませればいいのですが、やってませんw

そのうち気が向いたらやるかもです(*´ω`*)

やってみると以外と簡単に決済システムを導入できます。WordPressでカード決済を考えている方の参考にしていただければ幸いです!

アフィリエイターのための最高のワードプレステーマ【ATLAS】ができました

アフィリエイトに特化したWordPressテーマ「ATLAS(アトラス)」が完成しました。

操作も簡単で超使いやすいです。

ランキング機能やボタン作成、記事下CTAの設置など、サイト作成の高速化&収益性を高めるための工夫を随所に備えています。

― 主な特徴 ―

  • プロ目線で見たアフィリエイトサイトに必要な機能をすべて搭載
  • 直感的に操作でき、スピーディーに収益サイトを構築できる
  • シンプルで美しいテーマデザイン

WordPress初心者でも簡単に使えるように複雑な設定を可能な限り取りのぞきました。

また、レイアウトも自由自在にアレンジできるのでWordPressでスッキリとしたデザインのブログにも使えます。

ぜひデモサイトで確かめてみてください。

※テーマインストール後、HTMLやCSS等をカスタマイズすることなくデモサイト通りに構築できる仕様にしています。

テーマの詳細を見る デモサイトを見る