jsが一瞬だけ読み込まれて意図した処理が消えてしまう。

Question

<script src="https://checkout.stripe.com/checkout.js" class="stripe-button active" data-key="*********" data-description="hoge" data-currency="jpy" data-panel-label="支払いする" data-locale="auto"></script>
<button type="submit" class="stripe-button-el" style="visibility: visible;">
<span style="display: block; min-height: 30px;">支払い</span></button>

実現したいこと

決済サービスstripeを使って決済を実装しているのですが、デフォルトのボタンでは「pay with card」と表示されているのでjavascript側でspanのテキストを書き換えたい

試したこと

  // フォームの寄附ボタン
  var submit = document.querySelector( 'button.stripe-button-el > span' );
  submit.textContent = '支払い';

タグからspanまで辿り、textContentを使って書き換えることは一応できている。

困っていること

他のページから遷移（初期表示）に、API側に負けて、pay with cardと表示されてしまうのでそれを支払いと表示できるようにしたい。

Comments

[m.ts10806]

submitでないと動かないとかありますか？

[nanase21]

質問を勘違いしてました。

Answer 1

Pay with Card の記載を変えたいだけなのですよね。実際に使ったことはなくリファレンスを読んだだけですが、下記のオプションの指定ではだめなのでしょうか。

https://stripe.com/docs/checkout#integration-simple-options

data-label

The text to be shown on the blue button. Default is Pay with Card. Checkout does not currently translate this label.

Answer 2

要素（ボタン）が生成される前に、書き換えの処理が実行されているのではないかと思います。

200ミリ秒毎にボタンが生成済か確認し、ボタンがあった場合に書き換えを行いループを終了する処理に変更してみました。
これでどうでしょうか。

var timer = setInterval(function(){
	var submit = document.querySelector('button.stripe-button-el > span');
	if(submit!=null){
		submit.textContent = '支払い';
		clearInterval(timer);
	}
}, 200);