web-dev-qa-db-fra.com

Modifier le style du bouton Stripe "Payer avec la carte"

Est-il possible de modifier le style du bouton Stripe "Payer avec la carte"? J'ai essayé de modifier par,

  • ajout d'une nouvelle classe définie dans une feuille de style externe
  • modifier sa propre classe de stripe-button dans une feuille de style externe
  • et le modifier en ligne avec style=""

Mais je ne peux pas obtenir le bouton pour changer de style.

Il semble que ce soit possible avec le custom integration au lieu du simple integration (source: https://stripe.com/docs/checkout#integration-simple ), mais j'espérais qu'il y avait quelque chose de plus simple.

Bouton avec style par défaut:

 enter image description here

Est-ce que quelqu'un a de l'expérience avec ça?

(J'intègre Ruby on Rails si cela fait une différence.)

cssstripe-payments
24
tim_xyz

Rechercher cette classe : 

.stripe-button-el span

Je pense que c'est là que vous devez modifier le style de votre propre bouton. Vous pouvez l’écraser dans votre propre fichier css externe.

11
Xovika

Aucun de ceux qui ont fonctionné pour moi. J'ai fini par cacher le bouton en javascript et en créer un nouveau.

<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>
33
Endive au Jambon

Même si c'est un peu compliqué, pour tous ceux qui souhaitent utiliser un bouton différent avec "l'intégration simple" de manière simple et rapide, en particulier si vous n'avez pas de "solides compétences en JavaScript", vous pouvez masquer le bouton Stripe avec;

.stripe-button-el { display: none }

De cette façon, n'importe quel bouton de soumission du formulaire appellera la commande afin que vous puissiez simplement utiliser le bouton que vous aviez avant d'introduire Stripe. 

9
Carl G

Ce qui suit remplacera la couleur d'arrière-plan par la couleur personnalisée #EB649C. La désactivation de l'image d'arrière-plan est requise, ainsi que le style du bouton et de sa balise span intérieure.

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

Vous pouvez supprimer les styles de bouton avec Jquery et ajouter les vôtres. Travaillé un charme pour moi:

<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

Avec jQuery, vous pouvez aussi simplement redimensionner le bouton comme suit:

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

Ou remplacez-le par un bouton avec l'image de votre choix, comme ceci:

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

Vous devez utiliser data-label sa partie de l'API Checkout Stripe standard:

<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>
0
Blair Anderson

Le .stripe-button-el span fonctionne réellement.

Mais vous devez ajouter !important dans CSS pour écraser le CSS par défaut.

0
Ajay kumar

Tu peux essayer ça,

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

Payer avec la carte est à l'intérieur d'une travée.

0
Pillai