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/08/22(火) 10:41:07

      【チェインフィニッシュ】
      極極極ワザキャンペーンとして、5弾のキャンペーンで導入された新必殺システムだ。
      フォームチェンジを次々に行い、ボタンを押して必殺技を連鎖させる、何とも見ごたえのある必殺技になっているぞ。
      #ガンバライジング

    2. 匿名希望
      2017/08/22(火) 10:41:07

      メール送ってもらってパスワードの再設定フォームまでは行けるけど、肝心の新しいパスワードを送信するボタンが反応しなくて詰んでる

    3. 匿名希望
      2017/08/22(火) 10:41:07

      何がすごいの?ってなる方もいると思うのですが、各フォーム部品にデータベースの情報を読み込んで、処理をボタンと関連付けて…っていうのは結構途方もない作業なのです…
      「ただ正常に動いてるだけ」って実はすごいことなんだよ…!

    4. 匿名希望
      2017/08/22(火) 10:41:07

      質問フォームなど何も無く、面接の場所すら書いていない。いきなり参加お申込みはコチラ、というボタンが出てくる。メンズスタイルとかいうライブイベント。大体、ライブをやるのに面接とはおかしいじゃないか。オーディションなら分かるがね。オイシイ事しか書いてない。怪しいことこの上ない。

    5. 匿名希望
      2017/08/22(火) 10:41:07

      遅くなりましたが夏コミにてFGO本手にとってくださりありがとうございます!
      最後のページに感想とか送れる投稿フォームにアクセスできるQRコードが記されていますので、お気軽にどうぞ!購入理由アンケート(ラジオボタン式)だけでも答えていただけるとありがたいです!!よろしくです!!

    記事に戻る

関連記事