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

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

カード決済システム【Stripe】が超便利だったので比較＆レビューしてみた！WordPressのテーマを販売開始してからずっとSPIKEというクレジットカード決済システムのフリープランを使っていました。 S...

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

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

あ、あとFTPソフトを使う前提の解説になるので、FTP環境がない方は先にそちらを準備してくださいね。サーバー上でダイレクトにファイルを作成して編集する方法もありますが、ちょっと面倒ですｗStripeの会員登録の手順は端折りますので、各自で済ませておいてください。

Stripe公式サイト

準備するもの

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

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

決済ページを作成する

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

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

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

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

StripeのAPIキーを用意する

Stripeはテスト環境用のキーと本場用のキーの2種類が用意されています。このおかげで非常にかんたんにテスト環境を作って試すことができます。
APIキーには publishable key と secret key の２つがあり、両方を用意します。

publishable key（テスト用）

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

https://stripe.com/docs

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

publishable key（本番用）

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

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

secret key（テスト用）

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

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

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

secret key（本番用）

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

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

PHPファイルを作成する

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

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

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

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

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

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

PHPファイルを作成する

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

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

	<?php
	require_once( dirname(__FILE__).'/lib/ダウンロードしたライブラリ名/init.php');
	// Set your secret key: remember to change this to your live secret key in production
	// See your keys here: https://dashboard.stripe.com/account/apikeys
	\Stripe\Stripe::setApiKey("あなたのsecret keyを入力");
	// Token is created using Stripe.js or Checkout!
	// Get the payment token submitted by the form:
	$token = $_POST['stripeToken'];
	$email = $_POST['stripeEmail'];
	// フォームから情報を取得:
	try {
	$charge = \Stripe\Charge::create(array(
	"amount" => 金額,
	"currency" => "jpy",
	"source" => $token,
	"description" => "商品名",
	));
	}catch (\Stripe\Error\Card $e) {
	// 決済できなかったときの処理
	die('決済が完了しませんでした');
	}
	// 自動返信メール
	mb_language("Japanese");
	mb_internal_encoding("UTF-8");
	$title = "自動返信メールタイトル";
	$content = "ここに自動返信メールの本文を記載。改行したいときは　\n　でできます。";
	$from_name = "送信者名";
	$from_addr = "送信元となるメールアドレス";
	$from_name_enc = mb_encode_mimeheader($from_name, "ISO-2022-JP");
	$from = $from_name_enc . "<" . $from_addr . ">";
	$header = "From: " . $from . "\n";
	$header = $header . "Reply-To: " . $from;
	//to user send mail
	if(mb_send_mail($email,$title, $content, $header, "-f" .$from_addr)){
	echo "メールを送信しました";
	} else {
	echo "メールの送信に失敗しました";
	};
	// 管理者宛メール
	$title_me = "管理者宛メールタイトル";
	$from_me = "送信元となるメールアドレス";
	$content_me = "ここに管理者宛メールの本文を記載。改行したいときは　\n　でできます。";
	if(mb_send_mail($from_me,$title_me, $content_me, $header, "-f" .$from_addr)){
	echo "メールを送信しました";
	} else {
	echo "メールの送信に失敗しました";
	};
	// サンキューページへリダイレクト
	header('Location: サンキューページのURL');
	exit;
	?>

view raw stripe with auto return mail on wp hosted with by GitHub

テスト環境で動作確認

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

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

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

	<form action="checkout.phpまでの絶対パス" method="POST">
	<script src="https://checkout.stripe.com/checkout.js"
	class="stripe-button"
	data-key="publish key【テスト用】を貼り付け"
	data-amount="金額"
	data-name="販売元名"
	data-description="商品名"
	data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
	data-locale="auto"
	data-currency="jpy"
	data-zip-code="false"
	data-allow-remember-me="false"
	data-label="今すぐ購入"></script>
	</form>

view raw stripe checkout html code for wp hosted with by GitHub

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

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

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

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

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

Stripeにログインして管理画面TOPにいきます。画面左の下にある「View Test Data」を有効にします。
「Payment」の項目でさっきのテストカードで決済した情報が載っていればOKです。

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

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

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

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

返金処理のやり方

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

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

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

この方法の問題点

それは決済完了からサンキューページへの切り替わりが遅いこと。
これって結構痛いのですが、購入までのプロセスに影響しないし、問題もおきていないため様子見の状態で放置してます。。。ｗ

応急処置としてgifのローディング画像をページ遷移完了まで読み込ませればいいのですが、やってませんｗ
そのうち気が向いたらやるかもです(*´ω｀*)

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

※JCBカードに対応させるための申請手順

2018年5月からStripe決済でJCBカードが使えるようになりました。ただし、デフォルトでは使えないのでStripeに利用申請する必要があります。このあたりが面倒なのでデフォルトで使えるようになるといいなー。

申請に必要なのは特定商取引法に基づく記載ページのみなので、すでにページがある人は必須項目だけチェックしてない部分を補うだけでOK。

上記項目を自社サイトの特定商取引法に基づく記載ページにしっかり書き込んでからStripeのお問い合わせフォームからJCBカード決済を希望する旨のメールを送れば完了です。

Stripeのお問い合わせページ

審査に落ちることもあるようですが、うまくいけばStripeから審査通過のお知らせがくるので、それで該当アカウントでJCB対応となります。特にプログラム上の設定は不要とのことですので、ぜひ申請しておくことをおすすめします。

店舗でカード決済を導入する場合は
「Square」がおすすめ！

ABOUT ME

赤石

WEBアプリ企画・開発、WordPressテーマ開発が主な事業。ハワイ（特にマウイ島）とか自然の多いところでゆっくりと過ごすと至高の幸せを感じる。毎日妻と一緒に過ごせるのがめっちゃ幸せ。麻雀と難易度高めの協力プレイができるゲーム大好き。