「Pay with Card」ストライプボタンのスタイルを変更する

Question

「Pay with Card」ストライプボタンのスタイルを変更することはできますか？私は

は

外部スタイルシートにstripe-buttonの独自のクラスを変更し、style=""

とインラインで編集 外部スタイルシートで定義された新しいクラスを追加することによる変更

• を試してみましたしかし、ボタンのスタイルを変えることはできません。

  simple integration（出典：https://stripe.com/docs/checkout#integration-simple）の代わりにcustom integrationと表示される可能性がありますが、私はもっと簡単なことがあると思っていました。デフォルトのスタイルで

  ボタン：

  

  誰もがこの経験を持っていますか？

  （つまりはすべての違いを、私はRuby on Railsでに統合しています。）このクラスため

Answer 1

検索：

.stripe-button-el span 

私はあなたがあなた自身のボタンのを修正しなければならないところ、これがあると思いますスタイル。 自分の外部のcssファイル内に上書きすることができます。

Answer 2

あなたは「固体JavaScriptのスキルを」持っていない場合は特に、あなただけのストライプを非表示にすることができ、「簡単な統合」と一緒に別のボタンを使用しての超迅速かつ簡単な方法を望む人のため、少しハックが、ボタン付き。

.stripe-button-el { display: none } 

このように、フォーム内の送信ボタンはチェックアウトを呼び出し、ストライプを導入する前に既に使用していたボタンを使用することができます。

Answer 3

私のために働いた人はいません。私は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> 

Answer 4

ボタンスタイルを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> 

Answer 5

以下は、カスタムカラー#EB649Cと背景色を上書きします。バックグラウンド画像を無効にする必要があり、ボタンとその内側のスパンタグの両方をスタイリングする必要があります。jQueryのを使用して

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

Answer 6

、あなたはまた、単に次のようにボタンをスケーリングすることができます

<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>