Omise.jsのdata-amount値を可変にする
はじめに
どうも、Hiroyuki Noguchiです。
皆さん、決済サービスに Omise 使ってますか?
WebPay事変の後、WebPayユーザはPay.jpだとかStripeだとか、色々なところへ散っていったわけですが、当協会(全日本ピアノ指導者協会)ではOmiseへ移りました。
移行直後のあれこれは、以下記事ご参照。
Omise.jsとは
Omiseの中の人の AKIRA (id:akinrt) さんが書かれた以下の記事をご参照ください。
引用すると、
2017年2月6日現在のOmise.jsには大きく分けて下記の3つの機能を有しています。
ということです。
最近よくある、以下のようなHTML・JSのコード貼るだけで、決済ボタンが出現し、決済ボタンを押したらモーダルでクレカ情報入力画面が飛び出してくる、っていう、便利なやつが使えるようになります。
<form name="checkoutForm" method="POST" action="checkout"> <input type="hidden" name="description" value=""> <script src="https://cdn2.omise.co/omise.js.gz" data-key="YOUR_PUBLIC_KEY" data-image="https://hogehoge/fugafuga.gif" data-frame-label="支払テスト" data-button-label="支払" data-submit-label="Submit" data-location="yes" data-locale="ja" data-amount="8000" data-currency="jpy" > </script> </form>
data-amountの値を可変にしたい
さて、本題です。 上記サンプルコードにおいて、
data-amount="8000"
の部分で金額を指定しています。
固定値です。
が、時には、可変にしたいこともあるでしょう。
例えば、当協会では、寄付を募っております。
寄付金額は、フォームで寄付者が決定するものなので、data-amountが可変である必要があります。
こういう場合、どうすればよいか。
OK:scriptタグごと都度再生成する
勿体ぶらずに、いきなり正解を書きますが、現状これしかありませんでした。
サンプルコード、というか、実際に実装したコードを貼ります(jQuery使ってます)
<script> function switch_form(amount){ var amount = amount; //test var key = 'pkey_test_hogehogehoge'; $('#input_card').empty(); $('button[data-id = "omise-button"]').remove(); $('#omise-inject-iframe-app').remove(); $('#input_card').append( "<script src='https://cdn2.omise.co/omise.js.gz'" + " data-key='" + key + "'" + " data-amount='" + amount + "'" + " data-image='http://www.piano.or.jp/img/ptnalogo.png'" + " data-frame-label='公益事業に対する寄付'" + " data-button-label='寄付'" + " data-submit-label='寄付する'" + " data-locale='ja'" + " data-currency='jpy'" + " data-id='omise-button'" + "><\/script>" ); } $('#amount').change(function() { var amount = $('#amount').val(); switch_form(amount); setTimeout("setClassOmiseButton()", 500); }); $('#project,#last_name,#first_name,#last_name_kana,#first_name_kana,#email').change(function() { enableOmiseButton(); }); function setClassOmiseButton() { $('#modal_donate button').addClass('omise_button btn teal'); enableOmiseButton(); } function enableOmiseButton() { var done = checkFormInputDone(); if (done) { $('#modal_donate button').removeClass('display-none'); } else { $('#modal_donate button').addClass('display-none'); } } function checkFormInputDone() { if ($('#project').val() == "寄付したい事業を選んでください"){ return false; } else if (!($('#last_name').val())) { return false; } else if (!($('#first_name').val())) { return false; } else if (!($('#last_name_kana').val())) { return false; } else if (!($('#first_name_kana').val())) { return false; } else if (!($('#email').val())) { return false; } else { return true; } } $("input").keydown(function(e) { if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) { return false; } else { return true; } }); </script>
金額が入力/修正されたらその都度、scriptタグを再生成し直す。
トリガはjQueryのchangeにして拾ってます。
補足_1
なお、あわせ技として、「必要項目の入力が全て完了しない限り、決済ボタンを表示させない」というのを入れています。
単に display:none; で制御しているだけですが、普通のユーザに向けては十分に有効です。
補足_2
この方法で生成すると、Omiseの決済ボタンのCSSが適切に当たってくれません。
悲しい。
なので、setTimeoutでちょっとだけDOM要素が生成されるのを待って、そこへclassを宛てる、ということをやってます。
setTimeout("setClassOmiseButton()", 500);
この部分です。
NG:data-amountの値を書き換えてみる?
上記の対応に至れるまでに、色々試行錯誤してみたのですが、そのうちの一つ、代表的なNG対応を取り挙げておきます。
data-amount="8000"
ここの部分の値だけを変更する、というやり方です。
これ、裏側としてはうまくいきます。
裏側としては、というのは、実際に決済される金額は、です。
たとえば、
$('#hoge').attr('data-amount', 10000);
みたいにセレクタを適切に指定しつつ書くと、実際にソースコードとしては書き換わってくれますし、決済完了まで進めると、変更後の金額で決済されていることも確認されます。
が。
しかし。
モーダルで表示される「支払ボタン」の横にある「決済金額」だけが、変更されません。
残念。
これ、ここに金額を表示するかどうか、選択できるようにしておいてくれれば良いのに。
と思いました。
まとめ
今回、data-amountだけを例にとりましたが、このやり方であれば、他のdata属性のどれであろうが可変で設置できます。
書かなきゃいけないコード量が増えてしまうのは、今のところ目をつぶるしかありません。
まだまだビミョーに痒いところへ手が届かないのは、やっぱり、ユーザからのフィードバックが足りていないというのがあるんじゃないかな!と思います。
ので、もっとユーザ増えて(増やして)ください、っていうのと、ユーザはしっかりOmiseの中の人達へフィードバックしてあげてください、っていうのを主張し続けていきたいです。
我々も引き続き、情報発信していきます。
Omiseユーザコミュニティを日本で育てていければと思います。