Stripe カード決済導入 JavaScript設定

※2018年1月時点の内容です。

本日はカード決済システムStripeの設置の仕方について記載していきたいと思います。

具体的には、Checkoutと言う決済フォームを使い、定期支払いのような継続課金させる決済ではなく、シンプルに1回きりの決済を行うやり方で、かつ細かい設定が可能なCustomを使用したやり方についてなるべくわかりやすく記載していきたいと思います。

StripeのCheckoutと言う決済フォームの設定の仕方として、上記のCustomと言うテキストリンク先を見ていただくとわかるのですが、SimpleとCustomの2通りの設定の方法があります。
言葉のイメージ通り、簡単設定か詳細設定かと言うコトです。

Simpleの方で対応出来れば1番楽ですが、Simpleはフォームを埋め込むと言うやり方なので、既存のサイトに埋め込んだりする場合やデザインにこだわりがあると、満足のいく形に仕上がらなかったりします。

そこで、自由度の高いCustomの方のやり方を使用したいと思う訳ですが、javascriptやPHPにあまりさわる機会がないと、Simple、Custom以前に、システムの導入が難しかったりするモノです。

ですので、システム自体の導入の方から、記載していきたいと思いますが、Stripeのアカウントは取得してあり、設置するサーバーはPHPが使えるコト、SSL化(https)してあるコト前提で話を進めさせていただきます。

１．Stripeライブラリのダウンロード

とりあえず、Stripeのシステムを使うためにはStripeのAPIライブラリと言うモノが必要になるので、それをまずダウンロードしておきます。

多くのサイトでは、composerを使用してインストールします。と書かれていて、Web制作に詳しくない人、制作側でも普段PHPを使用しない人などは、ここでつまずき時間をかけてしまったり、挫折するコトも意外と多いモノです。

composerを使用してインストールと言うから、若干難しく聞こえ、何かパソコンの中に入れないといけないのかなと思ってしまいますが、別の方法で出来、言ってるコトは、あるサイトから必要なファイルをダウンロードしてくださいと言うコトです。

Stripeライブラリ

上記にアクセスし、最新の Source code (zip) か Source code (tar.gz) をクリックしダウンロードして、解凍します。

ファイル名がstripe-php-x.x.xなどとなっており長いので、後半は削ってstripeとでもリネームしておきます。

２．APIキーの取得

Stripe DashBoardにログインし、publishable key と secret key を取得してきます。

DashBoardにログインして、左側メニューのテストデータを表示するをクリック、その後同じくメニュー内のAPIの項目をクリックすると、上記の画像のページになります。

表示されたページ内、APIキーの部分、キーの名前、公開可能とシークレットキーの行にpk_test_xxxxとsk_test_xxxxと言う部分がありますので、それをコピーするなり控えておいてください。

３．決済処理用のPHPファイルの作成

次に、テキストエディタを開き、PHPファイルを作成します。

内容は以下の形にします。

<?php

require_once( dirname(__FILE__).'/stripe/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("sk_test_xxxx");

// 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" => 4800,
    "description" => "商品名",
    "currency" => "jpy",
    "source" => $token,
  ));
}catch (\Stripe\Error\Card $e) {
  // 決済失敗時の処理
  die('決済が完了しませんでした');
}

// 決済処理完了後に飛ばすページ
header('Location: https://xxxx.com/');
exit;

?>

まず、require_once( dirname(__FILE__).’/stripe/init.php’);の部分のstripeは、Stripeライブラリの入ってるフォルダ名になります。
目次１でリネームした名前がstripeでしたので、ここではstripeにしています。

次に、\Stripe\Stripe::setApiKey(“sk_test_xxxx“);の部分のsk_test_xxxxに、目次２で取得してきたsecret keyを入れます。

後は、”amount” => に決済させる金額、”description” => に商品名を入れ、header(‘Location: https://xxxx.com/’); に決済処理完了後に移動させたいページを絶対パス(httpsから始まる)で設定すればOKです。

これをcheckout.phpとでも名付けて、保存します。

４．決済フォームをサイトに埋め込む

ここでやっと、冒頭でふれたSimple、Customの部分のコードを自分のサイトに埋め込む作業になります。

目次３までは、システム自体の設置の仕方なので、Simple、Custom共通であり、Simpleであれば、

<form action="checkout.php" method="POST">
<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="pk_test_xxxx"
  data-amount="4800"
  data-name="ショップ名や商品名など"
  data-description="商品名や説明など"
  data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
  data-locale="auto"
  data-currency="jpy">
</script>
</form>

上記内容を自分のサイトの決済フォームを設置したい場所に埋め込めば完了です。

Customの場合は、

<script src="https://checkout.stripe.com/checkout.js"></script>

<button id="customButton">Purchase</button>

<script>
var handler = StripeCheckout.configure({
  key: 'pk_test_xxxx',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'ショップ名や商品名など',
    description: '商品名や説明など',
    currency: 'jpy',
    amount: 4800
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

を使用すると、公式サイトには記載されていますが、これを設置しただけでは、正常に動きません。

なんとなくコードが読める人はわかるかもしれませんが、目次３で制作した決済処理用のcheckout.phpへデータを送る記述がありません。

それを解決する記述が以下のコードになります。

<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>

<script>
	var handler = StripeCheckout.configure({
		key: 'pk_test_xxxx',
		image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
		locale: 'auto',
		token: function(token) {
  	// Prevent user from leaving page
  	window.onbeforeunload = function() {
  		return "";
  	};

    // Dynamically create a form element to submit the results
    // to your backend server
    var form = document.createElement("form");
    form.setAttribute('method', "POST");
    form.setAttribute('action', "checkout.php");

    // Add the token ID as a hidden field to the form
    var inputToken = document.createElement("input");
    inputToken.setAttribute('type', "hidden");
    inputToken.setAttribute('name', "stripeToken");
    inputToken.setAttribute('value', token.id);
    form.appendChild(inputToken);

    // Add the email as a hidden field to the form
    var inputEmail = document.createElement("input");
    inputEmail.setAttribute('type', "hidden");
    inputEmail.setAttribute('name', "stripeEmail");
    inputEmail.setAttribute('value', token.email);
    form.appendChild(inputEmail);

		// Finally, submit the form
		document.body.appendChild(form);

    // Artificial 1 second delay for testing
    setTimeout(function() {
    	window.onbeforeunload = null;
    	form.submit();
    }, 1000);
}
});

	document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options
  handler.open({
  	name: 'ショップ名や商品名',
  	description: '商品名や説明',
  	panelLabel:'購入する',
  	currency:'JPY',
  	shippingAddress:true,
  	amount: 4800
  });
  e.preventDefault();
});

// Close Checkout on page navigation
window.addEventListener('popstate', function() {
	handler.close();
});
</script>

参考サイト：How to implement a Stripe Checkout custom button

もっとシンプルにスマートなやり方があるかもしれないですが、現状、私がしたい挙動をしてくれるのは上記のコードだけでした。

簡単に説明しますと、id=”customButton”を設置したタグをクリックすれば、決済フォームが出現します。
ですので、既存のサイトにカート用の購入ボタンなどあれば、そのタグにid=”customButton”を追加すればOKです。

もちろん、idの名前はcustomButtonである必要はなく、好きな名前に変更出来ます。
ただしその場合は、コードの中にあるdocument.getElementById(‘customButton‘)の部分も変更した名前に変えてください。

key: ‘pk_test_xxxx‘,の部分には、目次２で取得してきたpublishable keyを入れます。

その他、

handler.open({
	name: 'ショップ名や商品名',
	description: '商品名や説明',
	panelLabel:'購入する',
	currency:'JPY',
	shippingAddress:true,
	amount: 4800
});

などの、フォームに反映出来るような部分については、設定オプションのページに記述がありますので、こちらを参考にしてご設定ください。

対応している支払い通貨などが載っているページもあります。
かなりの通貨に対応しているので、海外への販売を考えられている方には、ありがたいコトだと思います。

４．サーバーへアップロード

目次３まで出来たら、テスト決済準備は出来ているので、実際にサーバーへアップロードします。

普段こういった作業をしていない方だと、ここでもつまづいてしまう可能性がありますが、StripeのAPIライブラリと、決済処理用のPHPファイルと、決済フォームを埋め込んだ商品ページは同じ階層(場所)にアップロードします。

既存のサイトに設置すると言う形であれば、決済フォームを埋め込んだページのある階層へ、StripeのAPIライブラリと決済処理用のPHPファイルをアップロードする形になります。

階層の意味や、パスの記述の仕方がわかる人であれば、今回記述したコードのパス部分を変更して、それぞれのファイルを違う階層にアップロードしても良いですが、よくわからない人は、同じ場所にアップロードしてください。

５．動作チェック

実際に課金処理が正しく行われるか、決済フォームを設置したページにアクセスして、決済を行います。

現時点では、テスト用のAPIキーを使用しているので、テストモードでの動作チェックとなります。

テストを行うには、

カード番号：4242 4242 4242 4242
有効期限：適当に月/年を入れる
セキュリティコード：3桁 or 4桁で適当に数字を入れる

カード番号部分のテキストリンク先に試せるカードがブランド別に記載されています。

決済が無事完了し、課金処理が行えたかを確認するには、Stripe DashBoardにログインし、目次２で行ったテストデータを表示するに設定にすると、成功していた場合、本日の入金額などがグラフで表示されてたりしますが、支払いと言う部分をクリックすると、さらに詳しい処理内容をみるコトが出来ます。

６．本番環境への切り換え

目次５にて、正常に課金されるコトが確認出来ましたら、Stripe DashBoard内のメニュー、テストデータの表示中をクリックして、通常モードにし、目次２で取得したAPIのページに行き、本番用のkeyを取得してきます。

sk_live_xxxx、pk_live_xxxx と言った形になっているのが本番用のAPIキーです。

それを、テスト用のAPIキーが記述してあるところと交換したら、完了です。