Modifica lo stile del pulsante "Pay with Card"

Question

E 'possibile modificare lo stile del pulsante "Pay with Card" Stripe? Ho provato a modificare da,

• l'aggiunta di una nuova classe definita nel foglio di stile esterno
• modificando la propria classe di stripe-button nel foglio di stile esterno
• e modificandolo in linea con style=""

Ma non riesco a ottenere il pulsante per cambiare il suo stile.

Sembra che potrebbe essere possibile con lo custom integration anziché lo simple integration (fonte: https://stripe.com/docs/checkout#integration-simple), ma speravo che ci fosse qualcosa di più semplice.

Pulsante con stile predefinito:

Qualcuno ha esperienza con questo?

(che sto integrando in Ruby on Rails se questo fa alcuna differenza.)

Answer 1

Cerca per questa classe:

.stripe-button-el span 

Penso che questo è dove è necessario modificare il pulsante proprio stile. È possibile sovrascriverlo nel proprio file css esterno.

Answer 2

Anche se un po 'hacky, per chiunque voglia un modo semplice e veloce di usare un pulsante diverso insieme alla "semplice integrazione", specialmente se non si hanno "solide competenze JavaScript", basta nascondere la striscia pulsante con;

.stripe-button-el { display: none } 

In questo modo, qualsiasi pulsante di invio all'interno della forma chiamerà alla cassa in modo si può semplicemente utilizzare il pulsante avevi già prima di introdurre Stripe.

Answer 3

Nessuno di quelli ha funzionato per me. Alla fine ho nascosto il pulsante in javascript e ne ho fatto uno nuovo.

<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

È possibile rimuovere gli stili di pulsante con Jquery e aggiungerne uno. Ha lavorato un fascino per me:

<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

Di seguito avrà la precedenza sul colore di sfondo con il colore personalizzato #EB649C. È richiesta la disattivazione dell'immagine di sfondo, oltre allo stile sia del pulsante che del tag span interno.

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

Answer 6

utilizzando jQuery, si può anche semplicemente scalare il pulsante mi piace questo:

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

o sostituirla con un pulsante con qualsiasi immagine che si desidera, in questo modo:

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