こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。
このブログでは、
僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、
ノウハウなどを書いていきます。
今回は、
- 【Stripe Rails】決済モーダル内のemailにJavaScriptで値を設定する
についてです。
【Stripe Rails】決済モーダル内のemailにJavaScriptで値を設定する
やりたいこと
Stripeの決済モーダル内のメールアドレスの入力エリアに、
画面上のフォームの値を動的にセットしたい。
画面上でもメルアドを入力して、
決済モーダルの中でも入力して...
ってのはイケてないですからね...
やり方
１. モーダルの外にtype="email"のinputエリアを追加
# 今回はemail_field_tagを使ってます <%= form_tag some_path, id:"payForm" do %> <%= email_field_tag "user[email]", ’’, placeholder: 'メールアドレス', required: true %> <%= hidden_field_tag 'amount', 9800 %> <button id="pay-button" type="button" class="btn btn-primary">決済する</button> <% end %>
２. １の値をJavaScriptで取得
const email = document.getElementById('user_email').value;
３、StripeCheckout.configureで生成したオブジェクトから呼び出す、openメソッドの引数のキーにemailを指定し、２の値を設定する
<!-- HTML -->
<-- １-->
<%= form_tag some_path, id:"payForm" do %>
<%= email_field_tag "user[email]", ’’, placeholder: 'メールアドレス', required: true %>
<%= hidden_field_tag 'amount', 9800 %>
<button id="pay-button" type="button" class="btn btn-primary">決済する</button>
<% end %>
***
// JavaScript
var handler = StripeCheckout.configure({
key: '<%= Rails.configuration.stripe[:publishable_key] %>',
locale: 'auto',
currency: 'jpy',
panelLabel: "9800円のお支払い"
allowRememberMe: false,
token: function(token, arg) {
document.getElementById('stripeToken').value = token.id;
document.getElementById('stripeEmail').value = token.email;
document.getElementById('payForm').submit();
}
});
document.getElementById('pay-button').addEventListener('click', function(e){
// ２
const email = document.getElementById('user_email').value;
handler.open({
name: 'name',
description: '9800円',
amount: document.getElementById("amount").value,
email: email // 3
});
e.preventDefault();
});
- 結果
画面上のメールアドレスが、
決済モーダル内にも引き継がれるようになりました。
ちなみに、
メールアドレスと認識できない文字列を入力しても、
Stripeの決済モーダル内には反映されません。
