LoginSignup
3
1

More than 5 years have passed since last update.

Railsでページ遷移時にPay.jpのフォームが表示されない問題の解決方法

Last updated at Posted at 2019-02-09

Turbolinksを切らないと、Pay.jpのフォームは表示されない

https://pay.jp/docs/checkout の注意事項にも書かれているように、
RailsでPay.jpのチェックアウトを利用しようとすると、Turbolinksに邪魔されてフォームがうまく表示されません。
具体的にいうと、ページ遷移時にチェックアウトのフォームが表示されません。
スクリーンショット 2019-02-09 20.53.33.png

ページ遷移時にjQueryが発火しない問題自体は、
https://qiita.com/kumagi/items/289ccadf344f32613304
https://hackbaka.hatenablog.com/entry/2018/02/15/175259 
あたりを参考にして、

$(document).on('turbolinks:load', function() {  });
で解決できるわけですが、
これを使ってページ遷移時にチェックアウトのScriptをappendしても、チェックアウトのフォームは表示されませんでした。
Script自体は追加されているようでしたが、srcがきちんと機能しないせいで表示されないみたいです。

つまり、 どうあがいてもTurbolinksが邪魔してページ遷移時にフォームを表示することができなかったので、ページ遷移時にフォームを表示するためには、やはりTrubolinksを切る必要があるようです。

とはいえ、自分の場合はTurbolinksを完全に切るのは嫌だったので、フォームを設置したページのturbolinksだけ切ることで問題を解決しました。

具体的には、画面遷移前のリンクに以下の属性を追加して、リンク先のturbolinksを一時的に切ることで、画面遷移後にもチェックアウトのフォームを表示できました。

リンク先のturbolinksを切る.html.erb
<!-- aタグでturbolinksを切る -->
<a href="<%= book_url(book) %>" class="link" data-turbolinks="false"></a>

<!-- link_toでturbolinksを切る -->
<%= link_to @book, data: { turbolinks: false} do %>

参考: https://qiita.com/morrr/items/54f4be21032a45fd4fe9

スクリーンショット 2019-02-09 21.44.35.png

多分、turbolinksを切らずに、htmlにjsを埋め込みたい場合に全般的に役に立つ方法だと思います。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1