ECコラム

Stripeで多通貨対応の決済システムを構築する

2018.05.22 EC決済

Stripeとは
決済システムの実装
- 5分で実装できるシンプルな決済ボタン
- 動的に通貨を変更する

Stripeとは

2016年10月に日本に向けても正式にリリースされたオンライン決済サービス。米国ではすでにPayPalに次ぐシェアを誇るが、日本ではまだあまり知名度は高いとは言えないだろう。

しかしそのサービスの質の高さ、開発速度、導入の簡易さ、などなどから鑑みるに今後日本でも急速に普及していくと思われる。以下に主な特徴を列挙する。

審査不要

他のオンライン決済サービスと比較した時に一番大きなアドバンテージとなる部分だと思うのだが、なんと審査が不要！他サービスだと審査に数週間～数ヶ月かかったりするのでこれは大変ありがたい。

ただし、利用規約に抵触したり禁止業種に該当したりしていることが発覚すると利用停止処分を食らってしまう。当然のことではあるが事前に確認しておこう。

初期費用 ¥0

初期費用や月額使用料は一切かからない。手数料として一律3.6%納めるだけである。

対応カード

つい先日までVISA, Master, AMEXにしか対応しておらず、唯一の弱点なのではと思っていたのだが2018年5月16日にJCBとの提携が発表された。これによりJCB, Diners, Discoverにも対応した。

対応言語

下記12言語に対応している。必要十分だろう。

Simplified Chinese (zh)
Danish (da)
Dutch (nl)
English (en)
Finnish (fi)
French (fr)
German (de)
Italian (it)
Japanese (ja)
Norwegian (no)
Spanish (es)
Swedish (sv)

対応通貨

130以上の通貨に対応！といった謳い文句を目にしたが、数えてみたら136通貨に対応している様子。一覧が気になる方は下記リンクを参照されたい。

https://stripe.com/docs/currencies#charge-currencies

言語・通貨共にほぼ全世界をターゲットにした越境ECであっても必要十分を満たしている。

セキュリティ

2018年3月よりカード情報の非保持化が義務付けられたが、これにはトークン方式を用いて対応している。つまりカード情報を「保存・処理・通過」しないということだ。

また、Radarという機械学習を用いたカードの不正使用を検出する機能がある。あくまで例だが「日本で5年間使われていたカードがある日突然海外で使われるようになった」といったようなことを検知し、これは不正使用なのではないかと教えてもらえるわけだ。より信頼度の高いサービスを構築するのに有用な機能だろう。

決済システムの実装

ざっとStripeの概要を紹介したが、ここからは実装方法の紹介となる。

Stripeのアカウント登録方法は特段難しいことはないので割愛する。気をつけることがあるとすれば、適当な銀行口座が必要になることくらいだろうか。

5分で実装できるシンプルな決済ボタン

実際に決済ボタンを設置してみよう。と言ってもコピペでできてしまう。

https://stripe.com/docs/checkout/php

を参考に進めていこう。

PHPライブラリのインストール

GitHubからダウンロードしてくるか、Composerでインストールするかの2択であるがComposerでサクッと入れてしまった方が簡単だろう。

composer require stripe/stripe-php

1	composer require stripe/stripe-php

って打つだけ。

コンフィグファイルの作成

無事ライブラリがインストールできたら動作するのに最低限必要な設定を記述したファイルを作る。

<?php
require_once('vendor/autoload.php');//ライブラリの読み込み

$stripe = array(
  "secret_key"      => "your_secret_key",//秘密鍵
  "publishable_key" => "your_publishable_key"//公開鍵
);

\Stripe\Stripe::setApiKey($stripe['secret_key']);
?>

<?php

require_once('vendor/autoload.php');//ライブラリの読み込み

$stripe = array(

"secret_key" => "your_secret_key",//秘密鍵

"publishable_key" => "your_publishable_key"//公開鍵

);

\Stripe\Stripe::setApiKey($stripe['secret_key']);

秘密鍵、公開鍵はStripeのダッシュボードから確認することができるのでそれを貼り付ければ良い。

フォームの作成

続いてフォーム(決済ボタン)を作る。

<?php require_once('./config.php'); ?>//コンフィグファイルの読み込み

<form action="charge.php" method="post">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="<?php echo $stripe['publishable_key']; ?>"//公開鍵をセット
          data-description="Access for a year"//商品名など
          data-amount="5000"//価格
          data-locale="auto">//地域
</script>
</form>

<?php require_once('./config.php'); ?>//コンフィグファイルの読み込み

data-key="<?php echo $stripe['publishable_key']; ?>"//公開鍵をセット

data-description="Access for a year"//商品名など

data-amount="5000"//価格

data-locale="auto">//地域

</script>

</form>

コードを見ればなんとなく察しがつくかも知れないが、JavaScriptで自動的にボタンを生成してくれる。こちらのJavaScriptのオプションを変更・追加すればそれなりにはカスタマイズできる。

代表的なものを簡単に紹介すると

data-locale

国などの地域を指定する。これを元にカード情報入力画面の言語が決定される。autoを指定しておけばブラウザの指定言語から勝手に決定してくれるので、通常autoにしておけば間違いないと思っていいだろう。

data-image

決済画面に表示されるイメージ画像を指定できる。128*128px以上のjpg, png, gif画像を指定すれば良い。

data-label

ボタンに表示される文言を指定する。デフォルトでは英語なので「カード決済する」などを指定しておけば日本人には優しいだろう。

data-currency

通貨の指定。デフォルトでは米ドル(USD)となる。後述するが、これを動的に変更させることで多通貨に対応できる。多通貨対応が必要なければ日本円(JPY)を指定しておけば良い。

決済処理を行うプログラムの作成

最後に、フォームから送信された情報を元に実際に決済処理を行うプログラム(今回はPHP)を実装する。

<?php
  require_once('./config.php');

  $token  = $_POST['stripeToken'];
  $email  = $_POST['stripeEmail'];

  $customer = \Stripe\Customer::create(array(
      'email' => $email,
      'source'  => $token
  ));

  $charge = \Stripe\Charge::create(array(
      'customer' => $customer->id,
      'amount'   => 5000,
      'currency' => 'usd'
  ));

  echo '<h1>Successfully charged $50.00!</h1>';
?>

<?php

require_once('./config.php');

$token = $_POST['stripeToken'];

$email = $_POST['stripeEmail'];

$customer = \Stripe\Customer::create(array(

'email' => $email,

'source' => $token

));

$charge = \Stripe\Charge::create(array(

'customer' => $customer->id,

'amount' => 5000,

'currency' => 'usd'

));

echo '<h1>Successfully charged $50.00!</h1>';

これで最小限の決済ボタンを押し、カード情報を入力し、決済完了、という一連の流れは実装された。Composerなどの環境が整ってさえいれば本当に5分でできてしまう。軽く感動すら覚える程の簡易さである。

決済のテスト

テスト用のカード情報を入力し実際に決済してみよう。テストカード一覧は

https://stripe.com/docs/testing

に記載されているが、様々な種類のカードで試す必要がないのなら

カード番号	4242 4242 4242 4242
有効期限	適当な未来の日付
CVC	適当な数

を覚えておくと便利。こちらを用いて決済し、Stripe側の管理画面で確認しよう。

成功すれば上画像のような決済履歴が現れるはずだ。

シンプルな実装での注意点

で、このままだと価格も通貨も決め打ちになってしまうので動的に変更しようと試みる。

<form action="charge.php" method="post">
  <script src="https://checkout.stripe.com/checkout.js"class="stripe-button"
    data-key="<?phpecho$stripe['publishable_key']; ?>"
    data-description="Access for a year"
    data-amount="5000"
    data-currency="jpy"
    data-locale="auto">
  </script>
</form>

data-key="<?phpecho$stripe['publishable_key']; ?>"

data-description="Access for a year"

data-amount="5000"

data-currency="jpy"

data-locale="auto">

</script>

</form>

こちらのdata属性をJavaScriptで書き換えれば価格や通貨などを動的に設定できるのではと思ったのだが、上記で紹介されている最も簡単なパターンではそれはできない模様。

試しに

<select name="currency" id="currency">
  <option value="jpy">JPY</option>
  <option value="usd">USD</option>
</select>

</select>

のような適当なセレクトボックスを作成し

$('select[name="currency"]').change(function() {
  $('.stripe-button').data('currency', $(this).val());
  console.log($('.stripe-button').data());
});

$('select[name="currency"]').change(function() {

$('.stripe-button').data('currency', $(this).val());

console.log($('.stripe-button').data());

});

みたいな感じで書き換えてみたものの反映されず、初期値が適用されるようだった。

そんなわけで動的に価格や通貨を切り替えるにはさすがに5分でできるとは言えず、多少JavaScriptを書いてカスタマイズしてあげる必要がある。

とは言え、価格が一定で多通貨に対応する必要がない場合は上述の5分でできちゃうパターンで必要十分だろう。

動的に通貨を変更する

今回は通貨を選べるようにしてみる。

デモはコチラ

動的に価格や通貨を切り替えられるようにするにはボタンをカスタマイズするパターンを用いる。

https://stripe.com/docs/checkout#integration-custom

をコピペすればいけるのかと思いきや、charge.phpにPOSTする記述が書かれておらずこれだけでは動作しない。

https://stackoverflow.com/questions/42139254/how-to-implement-a-stripe-checkout-custom-button

を参考にし、通貨を動的に変更できるようにしたものがこちら。

<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="currency" id="currency">
    <option value="jpy">JPY</option>
    <option value="usd">USD</option>
</select>
<button id="customButton">カード決済</button>

<script>
//change currency
var currency = 'jpy';//default currency
    $('select[name="currency"]').change(function() {
      currency = $(this).val();
    });

var handler = StripeCheckout.configure({
  key: '<?php echo $stripe['publishable_key']; ?>',
  image: './logo.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', "charge.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);

    // Add the amount as a hidden field to the form
    var inputAmount = document.createElement("input");
    inputAmount.setAttribute('type', "hidden");
    inputAmount.setAttribute('name', "stripeAmount");
    inputAmount.setAttribute('value', "100");
    form.appendChild(inputAmount);

    // Add the currency as a hidden field to the form
    var inputCurrency = document.createElement("input");
    inputCurrency.setAttribute('type', "hidden");
    inputCurrency.setAttribute('name', "stripeCurrency");
    inputCurrency.setAttribute('value', currency);
    form.appendChild(inputCurrency);

		// 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: '株式会社SPC',
    description: 'ECサイト制作',
    currency: currency,
    amount: 100
  });
  e.preventDefault();
});

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

</select>

<button id="customButton">カード決済</button>

//change currency

var currency = 'jpy';//default currency

$('select[name="currency"]').change(function() {

currency = $(this).val();

});

var handler = StripeCheckout.configure({

key: '<?php echo $stripe['publishable_key']; ?>',

image: './logo.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', "charge.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);

// Add the amount as a hidden field to the form

var inputAmount = document.createElement("input");

inputAmount.setAttribute('type', "hidden");

inputAmount.setAttribute('name', "stripeAmount");

inputAmount.setAttribute('value', "100");

form.appendChild(inputAmount);

// Add the currency as a hidden field to the form

var inputCurrency = document.createElement("input");

inputCurrency.setAttribute('type', "hidden");

inputCurrency.setAttribute('name', "stripeCurrency");

inputCurrency.setAttribute('value', currency);

form.appendChild(inputCurrency);

// 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: '株式会社SPC',

description: 'ECサイト制作',

currency: currency,

amount: 100

});

e.preventDefault();

});

// Close Checkout on page navigation:

window.addEventListener('popstate', function() {

handler.close();

});

</script>

参考にしたコードに追記し、価格と通貨もPOSTするようにした。これを受け取るcharge.phpは

<?php
require_once('./config.php');

$token  = $_POST['stripeToken'];
$email  = $_POST['stripeEmail'];
$amount  = $_POST['stripeAmount'];
$currency  = $_POST['stripeCurrency'];


$customer = \Stripe\Customer::create(array(
    'email' => $email,
    'source'  => $token
));

$charge = \Stripe\Charge::create(array(
    'customer' => $customer->id,
    'amount'   => $amount,
    'currency' => $currency
));

echo '<h1>決済が完了しました</h1>';

<?php

require_once('./config.php');

$token = $_POST['stripeToken'];

$email = $_POST['stripeEmail'];

$amount = $_POST['stripeAmount'];

$currency = $_POST['stripeCurrency'];

$customer = \Stripe\Customer::create(array(

'email' => $email,

'source' => $token

));

$charge = \Stripe\Charge::create(array(

'customer' => $customer->id,

'amount' => $amount,

'currency' => $currency

));

echo '<h1>決済が完了しました</h1>';

こんな感じにすれば良い。

決済システムはスクラッチで実装するとなるとカード会社の審査から始まり、セキュリティ上の懸念を潰すなど技術的にもかなり重たい。どうしても手数料を払いたくない！という場合以外はこうしたサービスを用いて実装してしまうのが賢明な選択だろう。

SPCではこのような最新の技術に着目し、マッシュアップすることでより質の高いサイト制作を行っております。まずはお問い合わせください。

無料お見積もりはこちらから！

03-6279-3013 10:00 ～ 19:00 (土・日・祝日除く)

Stripeで多通貨対応の決済システムを構築する

ECコラム

Stripeで多通貨対応の決済システムを構築する

Stripeとは

審査不要

初期費用 ¥0

対応カード

対応言語

対応通貨

セキュリティ

決済システムの実装

5分で実装できるシンプルな決済ボタン

PHPライブラリのインストール

コンフィグファイルの作成

フォームの作成

決済処理を行うプログラムの作成

決済のテスト

シンプルな実装での注意点

動的に通貨を変更する

無料見積もり

お問い合わせ

ECサイト無料テンプレート配布中