初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます.

PHP Javascript 決済システム Stripe実装

Webサイトにクレジットカード決済を簡単に埋め込むことが出来るシステム
Stripeの健忘録

下記のscriptタグをページに埋め込むとStripeのサーバーからボタンを表示する
コードが返される。通常はページが読み込まれると同時に
data-〇〇がサーバーに全て送信されているので後から金額を変更しようとしても
ポップアップするUIの値は変更ができません。

クライアント側が入力した金額で決済する、且つポップアップされたUIの金額の表示を
入力してもらった金額に変更する方法は少し手がかかります。

・金額入力用のinputタグ・金額決定後のボタンを用意する
・金額入力用のinputタグの値が入力されたらonchangeイベントハンドラで値を変数に代入する
・金額決定後のボタンをクリックしたら下記のstripeのscriptを呼び出す。
・入力された金額の変数をdata-amountに適用する

セキュリティー上改竄される可能性があり、あんまり好ましくない気がするので、
他にセキュリティー対策が必要だと思います。

//index.php
<form action="任意のページ" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="アカウントの公開キーを入力する"
    data-amount="1000"
    data-name="ウェブショップ"
    data-description="商品代金のお支払い"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="ja"
    data-currency="jpy">
  </script>
</form>

それとPOST送信する前のページの値はあくまで表示されるだけで
実際に使用される値はPOSTを受け取ったページで行われます。

//これを読み込まないと動作しません。
require_once($_SERVER['DOCUMENT_ROOT'] . '/vendor/autoload.php');
//公開してはいけません。Githubとかに公開しないよう注意。
\Stripe\Stripe::setApiKey("アカウントの秘密キー");

$token = $_POST['stripeToken'];
//下記の値が実際にStripeの決済画面で反映される値。
$charge = \Stripe\Charge::create([
          'amount' => 1000, 
          'currency' => 'jpy',
          'description' => '商品代金のお支払い',
          'source' => $token,
          
        ]);