Omise.jsのdata-amount値を可変にする

はじめに

皆さん、決済サービスに Omise 使ってますか？
WebPay事変の後、WebPayユーザはPay.jpだとかStripeだとか、色々なところへ散っていったわけですが、当協会(全日本ピアノ指導者協会)ではOmiseへ移りました。
移行直後のあれこれは、以下記事ご参照。

クレジットカード決済にOmiseを導入してみている最中で、良さそうな点・いまいちな点

Omise.jsとは

Omiseの中の人の @akinrt さんが書かれた以下の記事をご参照ください。
英語の決済フォームはツライのいで日本語でOmise.jsを使ってみよう

引用すると、

2017年2月6日現在のOmise.jsには大きく分けて下記の3つの機能を有しています。

• クレジットカード情報のトークン化
• 独自のクレジットカードフォームでトークン化のための Omise.createToken
• Card.jsの進化版、PayによるUIと通貨の切り替え

ということです。

最近よくある、以下のような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ユーザコミュニティを日本で育てていければと思います。