同一ページ内で<script></script>が複数存在する時の値の受け渡し方を教えていただけないでしょうか

Question

最初の<script>で値amountを取得出来ていることは確認しています。その後にstripe(決済システム)の埋め込みコードなんですが、script< タグ内に
コードが書かれているので、一つの<script></script>でくくれませんでした。
data-amount= に上記で取得した amount の値を渡す方法がわからず困っています。

〜
<select id="amount" name="amount" onchange="myfunc()">
〜省略〜
</select>


<script>
  var amount;
  function myfunc() {
    amount = document.getElementById("amount").value;
    console.log(amount);　//OK
  }
</script>
<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="pk_test_XXXXXXXXXXXXXXXX"
  data-amount= amount
  〜省略〜
  data-currency="jpy">
</script>

Comments

[karamarimo]

script tag はページが読み込まれるときに実行されるので、後から data-amount を変えても意味が無いのでは？

[milkif]

期待している挙動は,セレクトボックスで選択された値が onchange="myfunc()" にてamountが都度取得し直し、data-amountを書き換えてその値を決済システムに送信できるようにしたいのですが、script tag で再読込させるのは良くないのでしょうか？

[karamarimo]

「script tag で再読込させる」とはどういうことでしょうか？script tagに指定された js はそれがページに読み込まれた時点で実行されて終わりではないですか？試しにボタンを押した時に data-amount を変えるデモを作ってみましたが、決済ボタンを押したときに表示される料金には反映されませんでした。demo:
https://jsfiddle.net/ja592c3x/

[milkif]

先ほど投稿したですが表示されないので再送します。まずはご丁寧に対応いただき有難うございました。再読込とは onchangeイベントでその都度、変数amountを更新していることを再読込と書きました。イベントなどでdata-amountは更新できないんですね、なんとなく分かってきました。有難うございます。

[karamarimo]

正確には、data-amount という attribute を更新することは自由にできますが、たまたま checkout.js はロード時にしかその値をチェックしないということです。

[milkif]

やっと理解できました。ほんとうに丁寧なご対応有難うございました！

Answer 1

この custom の方法でやれば js 上で動的に料金などを指定できると思います。
Custom Integration - Stripe Checkout

Comments

[milkif]

正式な指定方法があったんですね。さっそく試してみました。
<script>〜</script>内にfunction myfunc()を差し込んで　amountにその変数を指定して期待通りに動きました。これで大掃除に取り掛かれます。本当にありがとうございました！

Answer 2

HTMLのタグで変数を使うことはできません。どうしてもやりたいなら、DOMの該当部分を直接生成するしかないでしょう。

Comments

[milkif]

アンサーありがとうございます。javascriptのやり取りだけで実現出来ると思いHTMLで質問させていただきましたが、ララベルのblade.phpで実装します。
data-amount=<?php echo json_encode($amount) ?>で値の取得は確認できたのですが、 $amount(php) = amount(js) のようにjsの値をphpの変数には置き換えられなかったのでjs同士の受け渡しなら可能かと思ったのですがscriptタグを越えての値の受け渡しはできないんですね。