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

４ヶ月ぶりの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フレームワークを使うべきかもしれません。）