web-dev-qa-db-ja.com

「カードで支払う」ストライプボタンのスタイルを変更する

「カードで支払う」ストライプボタンのスタイルを変更することはできますか？変更しようとしましたが、

  • 外部スタイルシートで定義された新しいクラスを追加する
  • 外部スタイルシートでstripe-buttonの独自のクラスを変更する
  • style=""を使用してインラインで編集します

しかし、ボタンのスタイルを変更することはできません。

custom integrationの代わりにsimple integration（ソース： https://stripe.com/docs/checkout#integration-simple ）で可能かもしれませんが、もっとシンプルなものがあればいいのにと思っていました。

デフォルトスタイルのボタン：

enter image description here

誰もこれを経験したことがありますか？

（Ruby on Rails違いがあれば）に統合しています。）

cssstripe-payments
28
tim_xyz

これを検索クラス：

.stripe-button-el span

これは、独自のボタンのスタイルを変更する必要がある場所だと思います。独自の外部cssファイル内で上書きできます。

13
Xovika

それらのどれも私のために働いた。私はJavaScriptのボタンを非表示にして、新しいボタンを作成しました。

<form action="/your-server-side-code" method="POST">
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="xxx"
        data-amount="999"
        data-name="zzz"         
        data-locale="auto">
    </script>
    <script>
        // Hide default stripe button, be careful there if you
        // have more than 1 button of that class
        document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
    </script>
    <button type="submit" class="yourCustomClass">Buy my things</button>
</form>
36
Endive au Jambon

少しハックですが、「シンプルな統合」と一緒に別のボタンを使用する非常に迅速かつ簡単な方法を望んでいる人、特に「しっかりしたJavaScriptスキル」を持っていない場合は、Stripeボタンを非表示にできます。

.stripe-button-el { display: none }

この方法では、フォーム内の送信ボタンがチェックアウトを呼び出すため、Stripeを導入する前に既に持っていたボタンを使用できます。

9
Carl G

以下は、背景色をカスタム色#EB649Cで上書きします。背景画像を無効にする必要があり、ボタンとその内部タグの両方のスタイルを設定する必要があります。

button.stripe-button-el,
button.stripe-button-el>span {
  background-color: #EB649C !important;
  background-image: none;
}
7
ruffrey

Jqueryを使用してボタンスタイルを削除し、独自のスタイルを追加できます。私にとって魅力的でした：

<script type="text/javascript">
    $(document).ready(function(){
        $(".stripe-button-el span").remove();
            $("button.stripe-button-el").removeAttr('style').css({
                "display":"inline-block",
                "width":"100%",
                "padding":"15px",
                "background":"#3fb0ac",
                "color":"white",
                "font-size":"1.3em" }).html("Sign Me Up!");
        });
</script>
2
Lyrical.me

JQueryを使用して、次のようにボタンを単純にスケーリングすることもできます。

<script>
  $(function() {
    $(".stripe-button-el").css({'transform': 'scale(2)'});
  });
</script>

または、次のように、必要な画像のボタンに置​​き換えます。

<script>
  $(function() {
    $(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
  });
</script>
2
Guillaume Bihet

通常のストライプチェックアウトAPIの一部であるdata-labelを使用する必要があります。

<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="<%= ENV.fetch('STRIPE_PUBLISHABLE_KEY') %>"
  data-amount="10000"
  data-label="Proceed to Pay with Card"
  ...
  ...
  data-locale="auto">
  </script>
1
Blair Anderson

ボタンの背景色を変更する場合は、次のようなことを確認してください

.stripe-button-el span {
  background: #5e366a !important;
  background-image:none !important;
  background-color: #5e366a !important;
}

あなたのcssファイルで。これにより、ボタンの実際の背景が変わります。親divを変更したい場合は、spanなしで同じことを行うか、直接インラインスタイルを行うことができます。

0
Jamar

.stripe-button-elスパンは実際に機能します。

ただし、CSSに!importantを追加して、デフォルトのCSSを上書きする必要があります。

0
Ajay kumar

これを試すことができます、

$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");

カードで支払うは、スパン内にあります。

0
reshma