ホーム 技術ログ

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

2019年11月16日

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

 

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

 

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

 

誰かのためになることをしたい…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>
 
Screen Shot 2018-03-21 at 17.12.38.png

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

Screen Shot 2018-03-21 at 17.13.16.png

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"の部分は自分でダッシュボードで作れる。

Screen Shot 2018-03-21 at 17.17.12.png
 
  <?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;

    };
  };

  ?>
Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

ご提供 sponsor
 

Meee!(ミー)は、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできるスキルマーケットです。カテゴリや居住地から、検索することが可能です。

 

ランゲージエクスチェンジは、ネイティブスピーカーと気軽にマッチングできる言語交換プラットフォームです。あなたの地元に住む外国人を探したり、留学や海外移住の前に、現地のネイティブスピーカーと繋がることもできます!

宣伝
 

りょすけトークchは、仕事や私生活をより豊にするYouTubeチャンネルです。文献(本、映画、論文)から役に立つ情報をまとめ、生涯にわたり役に立つ哲学をお届けしています。是非、チャンネル登録してみてね

-ホーム, 技術ログ
-, , ,

Copyright© offブログ! , 2021 All Rights Reserved Powered by AFFINGER5.