Modifier le style de " Payer avec une Carte de Bande bouton

Est-il possible de modifier le style de "Payer par Carte" Bande de bouton? J'ai essayé de modifier par,

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

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

On dirait qu'il pourrait être possible avec la custom integration au lieu de la simple integration (source: https://stripe.com/docs/checkout#integration-simple), mais j'espérais qu'il y a quelque chose de plus simple.

Bouton avec le style par défaut:

Modifier le style de

Quelqu'un a une expérience avec cela?

(Je suis l'intégration dans Ruby on Rails si cela fait une différence.)

Quel est le problème avec custom integration? Vous pouvez utiliser votre propre style de bouton et de séparer la logique. Il ne semble pas être si compliqué 😉
Vous avez raison. Il n'était pas thaaat compliqué.
gist.github.com/u01jmg3/a9f53d4c4978c76a87f433570af4bbbc

OriginalL'auteur tim_xyz | 2016-04-16

  1. 11

    De recherche pour cette classe: 

    .stripe-button-el span

    Je pense que c'est là que vous devez modifier votre propre touche de style.
    Vous pouvez le remplacer au sein de votre propre fichier css externe.

    Notez que la Bande ne garantit pas la structure de la touche et donc il peut changer à tout moment.
    Ce marquage comme correcte parce que j'ai demandé comment faire pour modifier le bouton, mais la qualité supérieure de la solution finale a été d'utiliser custom integration

    OriginalL'auteur Xovika

  2. 33

    Aucun de ceux qui ont travaillé pour moi. J'ai fini par cacher le bouton en javascript et en faire 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>
    Pas la solution la plus élégante, mais fait le travail. Merci!
    A fonctionné pour moi! Merci!
    A travaillé comme un charme. 😀

    OriginalL'auteur Endive au Jambon

  3. 9

    Bien qu'un peu hacky, pour tous ceux qui veulent une super façon simple et rapide, à l'aide d'un bouton différent avec les "simples d'intégration", surtout si vous n'avez pas de "solide JavaScript compétences", vous pouvez masquer la Bande bouton;

    .stripe-button-el { display: none }

    Cette façon, tout le bouton "soumettre" dans le formulaire d'appel de la caisse, de sorte que vous pouvez simplement utiliser le bouton que vous avez déjà eu, avant l'introduction de Bande.

    Merci pour cette astuce. J'ai essayé ce, de Bande et de styles par défaut ont été primordial mon CSS. Alors j'ai écrit .stripeFormContainer .stripe-button-el (parce que mon formulaire se trouve être enfermé dans un div avec la classe stripeFormContainer ), et cela a fonctionné! J'utilise maintenant un bouton de Bootstrap comme ceci: <button class="btn btn-lg btn-success">Reserve My Spot</button>.
    Juste un heads-up avec cette méthode, le bouton soumettre obtient désactivée lorsque l'utilisateur clique dessus, mais est pas re-activé si l'utilisateur ferme la Caisse invite, à la différence de la valeur par défaut de Bande le bouton est ré-activée. Un malheureux UX de bug avec cette approche.

    OriginalL'auteur Carl G

  4. 3

    La suivante permet de remplacer la couleur de fond avec la couleur personnalisée #EB649C. La désactivation de l'image de fond d'écran est nécessaire, ainsi que le style à la fois le bouton, et c'est à l'intérieur de la balise span.

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

    OriginalL'auteur ruffrey

  5. 2

    Vous pouvez supprimer les styles de bouton avec Jquery et ajouter votre propre. 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>

    OriginalL'auteur Lyrical.me

  6. 2

    À l'aide de jQuery, vous pouvez aussi, tout simplement, à l'échelle du bouton comme ceci:

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

    Ou le remplacer 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>
    Mise à l'échelle semble bien fonctionner pour moi. Si 2x a été un peu excessif pour mon but. Utilisé de 1,5 x à la place.

    OriginalL'auteur Guillaume Bihet

  7. 0

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

    Mais vous devez ajouter !important en CSS pour remplacer le CSS par défaut.

    OriginalL'auteur Ajay kumar

  8. 0

    Vous pouvez essayer ce,

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

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

    OriginalL'auteur Pillai