SDN経由でJavascriptを用いて表示しているボタンのカスタマイズ

いつもお世話になっております。

現在Railsでウェブサイトを作成しております。
PAY.JPの決済サービスを導入しようとしており、以下のコードでボタンを作成することはできたのですが、このボタンのカスタマイズができない状況です。

こういったSDN経由でのJavascriptのボタンをcssなどでカスタマイズする方法はあるのでしょうか。
ご教示いただけますと幸いです。よろしくお願いいたします。

Ruby
1
2#show.html.erb
3
4    <%= form_tag("/yyy/buy/purchase", method: :post) do %>
5      <script type="text/javascript"
6              src="https://checkout.pay.jp"
7              class="payjp-button"
8              data-key="pk_test_xxxxxxxxxxxxxxxxx"
9              data-text="支払いに進む"
10              data-submit-text="お支払い"
11              data-partial="false"></script>
12    <% end %>
13
14

mtdsnsk

2018/02/04 08:43

class="payjp-button" とありますが、ここをclass="payjp-button custom-button" などにして、CSSファイルにcustom-buttonのレイアウトを定義してもダメですか？Chromeなどで開発者用のコンソールを開いて、実際に出力されるHTMLがどうなるかを見ればヒントが得られるかと思います

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<div id="payjp_checkout_box">
2  <input type="button" value="支払う">
3  <input type="hidden" name="payjp-token">
4</div>

実際に試して見たところ、上記のようなHTMLに変換されており、ついでにheadに下記のようなCSSが追加されていますね

html
1<style type="text/css">
2#payjp_checkout_box input[type=button]
3{
4-webkit-appearance:none;
5border-radius:2px;display:inline-block;padding:.5em 1em;font-size:12px;
6text-align:center;
7white-space:nowrap;vertical-align:middle;
8cursor:pointer;border:1px solid #2FA0DC;
9color:#fff;background-color:#198fcc;background-image:-webkit-linear-gradient(#35a9e6 0,#319cd3 48%,#2590c7 100%);
10background-image:-moz-linear-gradient(#35a9e6 0,#319cd3 48%,#2590c7 100%);
11background-image:-o-linear-gradient(#35a9e6 0,#319cd3 48%,#2590c7 100%);
12background-image:linear-gradient(#35a9e6 0,#319cd3 48%,#2590c7 100%)}#payjp_checkout_box input[type=button].has-token{border:1px solid #1C9A1C;
13background-color:#469C46;background-image:none
14}
15</style>

上記のCSSを上書きするstyleを書けば良さそうですが、headの最下部にstyleが生成されるため、通常の書き方だと、独自で指定したCSSが後から読み込まれるCSSに上書きされるので、少し工夫が必要かもしれません。

投稿2018/02/04 09:07

mtdsnsk

総合スコア789

lyzmfeqpxs54

2018/02/05 01:12

いつもご回答ありがとうございます。こちらのコードでは右クリックから、ページのソースを表示してもheadにのCSSは追記されないのですがどういったことが考えられますでしょうか。また、「通常の書き方だと、独自で指定したCSSが後から読み込まれるCSSに上書きされるので、少し工夫が必要かもしれません。」とご教示いただきましたが、具体的にはどのような方法が考えられますでしょうか。勉強不足で申し訳ございませんが、参考になるサイトなどでも構いませんので、ご教示いただけますと幸いです。よろしくお願いいたします。

mtdsnsk

2018/02/05 02:04

具体的にはbody要素の中の一番下に<style> ... </style>を書けば良いと思います <body> ... 省略 ... <style type="text/css"> #payjp_checkout_box input[type=button] { -webkit-appearance:none; border-radius:2px;display:inline-block;padding:.5em 1em;font-size:12px; text-align:center; white-space:nowrap;vertical-align:middle; cursor:pointer;border:1px solid #2FA0DC; ... なんか適当にstyleを書く } </style> </body> でどうでしょうか

lyzmfeqpxs54

2018/02/05 04:48

ご回答ありがとうございます。ご教示いただいた方法で無事解決いたしました。いつも本当にありがとうございます。まだまだ勉強不足で申し訳ございませんが、またいろいろご教示ただけますと幸いです。

行動規範の内容に同意します