
定期支払いを実装 – StripeとPHP
この記事は備忘録のため、
大変、乱雑なものになっています。
でも、こういう記事を分かりやすく書いて、
誰かのためになることをしたい…orz
ので随時アップデートする力を私にください…
コメントいただければ必ず対応したいです。
Stripeの実行環境
Stripeを動かすために、composerを使って環境を作ることをオススメしています。
ちなみに、このPHPコードは全くフレームワークを使っていません。
素のphpで書いています。
注意事項
この実装をするときに最もハマったポイントは、
ちゃんとパブリックキーとシークレットキーを合わせることです。
jsの部分のvar stripe = Stripe('pk_test_');
と、
phpの部分の\Stripe\Stripe::setApiKey("sk_test_");
をちゃんと正しくマッチするものか、
ちゃんと確認します。
ソースコード
動く(動かなかったらすみません)ソースコードをgithubに上げておきます。
公開鍵と秘密鍵と、
ストライプのダッシュボードで作った定期プランのIDを正しいものにすれば、
定額決済が動くはずです。
Stripeやcomposerのバージョンには注意してください。
アップデートは速攻されていきます。。
html
下記のフォームのname ~ emailは全く機能していません。
jsではカード情報しか受け取って処理していません。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<body>
<form>
<div class="group">
<label>
<span>Name</span>
<input class="field" id="name" placeholder="YUYO SOFT" />
</label>
<label>
<span>Phone</span>
<input class="field" id="tel" placeholder="(080) xxxx-yyyy" type="tel" />
</label>
<label>
<span>Email</span>
<input class="field" id="name" placeholder="xxxx@yyyy.com" type="email" />
</label>
</div>
<div class="group">
<label>
<span>Card</span>
<div id="card-element" class="field"></div>
</label>
</div>
<button type="submit">pay!!!!!</button>
<div class="outcome">
<div class="error"></div>
<div class="success">
token made done!<span class="token"></span>
</div>
</div>
</form>
<script src="customer_token.js"></script>
</body>
<body>
</body>
</html>

pay!!!!を押すとトークンが作られる

js
pay!!!!を押すとjavascriptに処理が移る。
javascriptではトークンが作られる。
これは、特定のユーザーを保存して、
定額処理を完了させるために必要なもの。
どういう概念・倫理で定期処理を実現させるのかというのは、
Stripe日本の中の方が分かりやすく説明してくれています。
というか、
これを見れば済むのですが、
私は、planをコードで作っていません。
ダッシュボードから作りました。
var stripe = Stripe('pk_test_');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
},
hidePostalCode: true
});
card.mount('#card-element');
function setOutcome(result) {
var successElement = document.querySelector('.success');
var errorElement = document.querySelector('.error');
successElement.classList.remove('visible');
errorElement.classList.remove('visible');
if (result.token) {
// Use the token to create a charge or a customer
// https://stripe.com/docs/charges
//result.token.id is token
successElement.querySelector('.token').textContent = result.token.id;
successElement.classList.add('visible');
/*
*
*
*
*
Pass tokens using ajax to php file
*
*
*
*
*/
var data = {'request' : result.token.id};
$.ajax({
type: "POST",
url: "web.php",
data: data,
}).done(function(data, dataType) {
console.log(data);
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
console.log('Error : ' + errorThrown);
});
} else if (result.error) {
errorElement.textContent = result.error.message;
errorElement.classList.add('visible');
}
}
card.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
stripe.createToken(card).then(setOutcome);
});
php
次に、ajaxを使ってこのトークンをphpで受け取る。下記のコードの"plan" => "id-test"
と書いてあるのはstripeのダッシュボードでプログラミングせずに作っている。"id-test"
の部分は自分でダッシュボードで作れる。

<?php
header("Content-type: text/plain; charset=UTF-8");
if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])
&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
if (isset($_POST['request']))
{
//make token from ajax js
$token_from_js = $_POST['request'];
//stripe from composer
require_once 'vendor/autoload.php';
//set api key
\Stripe\Stripe::setApiKey("sk_test_");
//make customer info
$customer = \Stripe\Customer::create(array(
"description" => "aaa@example.com",
"source" => "$token_from_js",
));
$subscription = \Stripe\Subscription::create(array(
"customer" => "$customer->id",
"items" => array(
array(
"plan" => "id-test",
),
)
));
echo $subscription;
};
};
?>