Q&A
前提・実現したいこと
カード決済システム【Stripe】を組み込もうと思っています。
Stripeは基本的に設定した金額の支払いをするシステムなのですが、
これをクライアント側で金額を入力して支払いをするシステムに変更しています。
こちらの記事をにして自分で金額入力用のinputボタンを追加し、任意の金額を
【Stripe】のサーバーにも送信先ページにも反映させる事は出来ました。
ですが、この方法だとサブミットボタンをクリックされた際にポップアップ表示される【Stripe】のUI（以下【Stripe UI】と記載）の中にinput要素を追加できず、外側にしか設置できません。
また、金額表示（data-amount="7777"）がindex.phpが読み込まれる際に【Stripe】側に送信されるため、attrで[data-amount]の値を操作しても【Stripe UI】にはdata-amountの初期値が反映されてしまいます。
（もしくは、[data-amount]を書いてない場合には金額が反映されません。）
またもう一つ問題があってサブミットボタンを押してからサーバーからレスポンスの関係か
【Stripe UI】が表示されるまでのタイムラグがあるため、うまくjQueryで操作ができませんでした。
【Stripe】のUIの中にinputボタンを追加し、クライアント側が任意の金額を入力できるように
したいのですがこういったケースでの動的操作はどうすればよいでしょうか？
何か【Stripe UI】の表示を検知してうまく処理する方法などないでしょうか？
該当のソースコード
デフォルトのソースコード
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link href="css/style.css" rel="stylesheet" /> 8 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 9 <title>Document</title> 10 <style> 11 * {margin: 0 auto; padding: 0;} 12 body { width: 60%; margin:200px auto;} 13 .wrapper{ padding: 2rem; width: 80%;} 14 .wrapper * { padding-bottom:2rem;} 15 </style> 16</head> 17<body> 18 <div class="wrapper"> 19 <h1>Stripeによるクレジットカード支払い</h1> 20 <form action="/payment/" method="POST"> 21 <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" 22 data-key="" 23 data-name="オンラインショップ" 24 data-description="代金のお支払い" 25 data-amount="7777" 26 data-image="https://stripe.com/img/documentation/checkout/marketplace.png" 27 data-locale="ja" 28 data-currency="jpy" 29 data-label="クレジットカードで支払う"> 30 </script> 31 </form> 32 <a href="/payment/">送信ページへ</a> 33 </div> 34</body> 35</html>
試したこと
サブミットボタンをクリックされた際にsetTimeout()で数秒遅らせて
size()やlength()で【Stripe UI】の要素を検索しましたが
うまくいきませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
その記事の回答通りcheckoutのJSを表示する前にamountを入力させればいい。
<?php $amount = $_POST['amount'] ?? '7777'; ?> data-amount="<?php echo $amount; ?>"
投稿2018/11/10 08:33
総合スコア10377
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/10 08:55 編集