この記事は備忘録のため、

大変、乱雑なものになっています。

でも、こういう記事を分かりやすく書いて、

誰かのためになることをしたい…orz　

ので随時アップデートする力を私にください…

コメントいただければ必ず対応したいです。

Stripeの実行環境

Stripeを動かすために、composerを使って環境を作ることをオススメしています。

ちなみに、このPHPコードは全くフレームワークを使っていません。

素のphpで書いています。

注意事項

この実装をするときに最もハマったポイントは、

ちゃんとパブリックキーとシークレットキーを合わせることです。

jsの部分のvar stripe = Stripe('pk_test_');と、

phpの部分の\Stripe\Stripe::setApiKey("sk_test_");をちゃんと正しくマッチするものか、

ちゃんと確認します。

ソースコード

github

動く（動かなかったらすみません）ソースコードを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;

    };
  };

  ?>

off.tokyo｜スキルキャリアもっと輝け

定期支払いを実装 – StripeとPHP

Stripeの実行環境

注意事項

ソースコード

html

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

js

php