css - react - Modificar el estilo del botón "Pagar con tarjeta"

stripe payment reference

Question

¿Es posible modificar el estilo del botón de banda "Pagar con tarjeta"? He intentado modificar por

• Añadiendo una nueva clase definida en la hoja de estilo externa.
• Modificar su propia clase de stripe-button de stripe-button en la hoja de estilo externa
• y editándolo en línea con style=""

Pero no puedo conseguir que el botón cambie su estilo.

Parece que podría ser posible con la custom integration lugar de la simple integration (fuente: https://stripe.com/docs/checkout#integration-simple ), pero esperaba que hubiera algo más simple.

Botón con estilo por defecto:

¿Alguien tiene experiencia con esto?

(Me estoy integrando en Ruby on Rails si eso marca alguna diferencia).

Answer 1

Aunque es un poco intrincado, para cualquier persona que desee una forma súper rápida y sencilla de usar un botón diferente junto con la "integración simple", especialmente si no tiene "habilidades sólidas de JavaScript", puede ocultar el botón Raya con;

.stripe-button-el { display: none }

De esta forma, cualquier botón de envío dentro del formulario llamará al proceso de pago para que pueda usar el botón que ya tenía antes de introducir Stripe.

Answer 2

Buscar esta clase :

.stripe-button-el span

Creo que aquí es donde tienes que modificar el estilo de tu propio botón. Puede sobrescribirlo dentro de su propio archivo css externo.

Answer 3

El .stripe-button-el span realmente funciona.

Pero debe agregar !important en CSS para sobrescribir el CSS predeterminado.

Answer 4

Lo siguiente anulará el color de fondo con el color personalizado #EB649C . Es necesario deshabilitar la imagen de fondo, así como aplicar estilo tanto al botón como a su etiqueta interna.

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

Answer 5

Ninguno de esos trabajó para mí. Terminé escondiendo el botón en javascript y haciendo uno nuevo.

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

Puedes eliminar los estilos de botones con Jquery y agregar los tuyos. Trabajó un encanto para mí:

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

Puedes probar esto,

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

Pagar con tarjeta está dentro de un lapso.

Answer 8

Usando jQuery, también puedes simplemente escalar el botón de esta manera:

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

O sustitúyalo por un botón con cualquier imagen que desee, como esta:

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