Omiseで決済フォーム出現ボタンを任意の位置に表示させる方法

4ヶ月ぶりのQiita記事投稿ですが小ネタです。
当協会ではWebpayからOmiseに決済システムを移行中です。

iframeを使い外部ドメインで生成した決済フォームを出すことで、
こちらではトークン以外一切カードの情報を保存させないOmise.jsを使っています。
これは、formタグの中に以下のようなタグを書くだけで良いというお手軽なものなのです。

<script type="text/javascript" src="https://cdn2.omise.co/omise.js"
                    data-key="<%= ENV['MEMBER_SHOP_PUBLIC_KEY'] -%>"
                    data-frame-label="ほげ"
                    data-button-label="決済"
                    data-submit-label="決済実行"
                    data-amount=<%= sum_price %>
                    data-currency="jpy"
                    data-locale="ja"
                    >
            </script>

しかし、必ずformタグ配下の一番下に「決済」ボタンが出現してしまい、意図したところで出すことが出来ません。
そこで、data-id=”omise-button”を付け加え、$(‘button[data-id = “omise-button”]’)
としてやることでjqueryオブジェクトとして如何ようにも料理することが出来ます。

今回は、scriptタグがある部分の直下に置きたかったので、以下のように、insertAfterを使い、DOM要素を移動させました。

$(document).ready(function(){
  $('button[data-id = "omise-button"]').insertAfter('script[data-id="omise-button"]');
});

jQueryのDOM移動、結構使っていない便利なものがあるので積極的に使っていきたいです。(あまり多用するならJSフレームワークを使うべきかもしれません。)

[紹介元] jQueryタグが付けられた新着投稿 – Qiita Omiseで決済フォーム出現ボタンを任意の位置に表示させる方法

  • コメント

    1. 匿名希望
      2017/06/29(木) 05:55:14

      フォーム内容をクリアするボタンって全然みなくなったな

    2. 匿名希望
      2017/06/29(木) 05:55:14

      【フルフルフルスロットル】
      ナイスドライブ5弾にて、強力な武器を携えて最強フォームが勢揃いだ。
      バースト必殺技発動時には特別な「超ひっさつボタン」が登場し、成功すればダメージアップのボーナスが付くぞ。
      最強フォームで最強の必殺技を決めろ!
      #ガンバライジング

    3. 匿名希望
      2017/06/29(木) 05:55:14

      申込みボタン押したら申込みフォームリセットされてウォーなんでじゃー!って思ってたら、下のほうに送信されましたって書いてあった…

    4. 匿名希望
      2017/06/29(木) 05:55:14

      というかKH2のフォームチェンジと三角ボタン(正式名称わからん)システムは神

    5. 匿名希望
      2017/06/29(木) 05:55:14

      長戸さんの早押しボタンを構えるフォームが当時のままでめっちゃ嬉しい

    記事に戻る

関連記事