【Stripe Rails】決済モーダル内のemailにJavaScriptで値を設定する

こんにちは、現役沖縄フリーランスエンジニアの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: &#39;メールアドレス&#39;, required: true %>
  <%= hidden_field_tag &#39;amount&#39;, 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: &#39;メールアドレス&#39;, required: true %>
  <%= hidden_field_tag &#39;amount&#39;, 9800 %>
  <button id="pay-button" type="button" class="btn btn-primary">決済する</button>
<% end %>

***

// JavaScript
var handler = StripeCheckout.configure({
    key: &#39;<%= Rails.configuration.stripe[:publishable_key] %>&#39;,
    locale: &#39;auto&#39;,
    currency: &#39;jpy&#39;,
    panelLabel: "9800円のお支払い"
    allowRememberMe: false,
    token: function(token, arg) {
        document.getElementById(&#39;stripeToken&#39;).value = token.id;
        document.getElementById(&#39;stripeEmail&#39;).value = token.email;
        document.getElementById(&#39;payForm&#39;).submit();
    }
});

document.getElementById(&#39;pay-button&#39;).addEventListener(&#39;click&#39;, function(e){

    // ２
    const email = document.getElementById(&#39;user_email&#39;).value;

    
    handler.open({
        name: &#39;name&#39;,
        description: &#39;9800円&#39;,
        amount: document.getElementById("amount").value,
        email: email // 3
    });
    e.preventDefault();
});

• 結果

画面上のメールアドレスが、

決済モーダル内にも引き継がれるようになりました。

ちなみに、

メールアドレスと認識できない文字列を入力しても、

Stripeの決済モーダル内には反映されません。

• javascript - Pre-populating an email address in Stripe / Checkout - Stack Overflow