スリ飯屋MaLankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

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

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




今すぐ案件紹介をご希望の方へ


このブログから登録の多いエージェントは下記の3つです★

(リンクをクリックすると公式サイトに飛びます)

【ダントツの1番人気】フォスターフリーランス【案件保有数5000件以上。業界25年の超老舗】

【僅差で2位】エミリーエンジニア【4人に1人が初めてのフリーランス】

【惜しくも3位】レバテックフリーランス【業界最大手。素早く手厚いフォローで案件参画】




こんにちは、mahです。


このブログでは、

僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、

ノウハウなどを書いていきます。


今回は、


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


についてです。




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





やりたいこと


Stripeの決済モーダル内のメールアドレスの入力エリアに、

画面上のフォームの値を動的にセットしたい。



画面上でもメルアドを入力して、

決済モーダルの中でも入力して...

ってのはイケてないですからね...




やり方


1. モーダルの外に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 %>


type="email"のinputエリアを追加




2. 1の値をJavaScriptで取得

const email = document.getElementById('user_email').value;




3、StripeCheckout.configureで生成したオブジェクトから呼び出す、openメソッドの引数のキーにemailを指定し、2の値を設定する


<!-- HTML -->
<-- 1-->
<%= 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){

    // 2
    const email = document.getElementById('user_email').value;

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


  • 結果

画面上のメールアドレスがStripeの決済モーダル内のemailのinputエリアに表示される


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

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




ちなみに、

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

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


メールアドレスと認識できない文字列は反映されない










最後に


下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。


エージェント選びで悩んでいる方は是非参考にしてみてくださいね★


エージェント 詳細 最高単価/月 設立
エミリーエンジニア(emilee) 評判をチェック 100万円/月 2007年
ギークスジョブ 評判をチェック 100万円/月 2007年
フォスターフリーランス 評判をチェック 230万円/月 1996年
pe-bank(pebank) 評判をチェック 200万円/月 1989年
Midworks(ミッドワークス) 評判をチェック 200万円/月 2013年
レバテックフリーランス 評判をチェック 140万円/月 2005年




あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech