Изменить стиль кнопки "Оплатить карточкой"

Можно ли изменить стиль кнопки "Оплатить карточкой"? Я пробовал модифицировать,

добавление нового класса, определенного во внешней таблице стилей
изменение собственного класса stripe-button во внешней таблице стилей
и отредактируйте его с помощью style=""

Но я не могу заставить кнопку менять стиль.

Похоже, что возможно с custom integration вместо simple integration (источник: https://stripe.com/docs/checkout#integration-simple), но я надеялся, что есть что-то более простое.

Кнопка со стилем по умолчанию:

Есть ли у кого-нибудь опыт?

(Я интегрируюсь в Ruby on Rails, если это имеет значение.)

Ответ 1

Найдите этот класс:

.stripe-button-el span

Я думаю, что вам нужно изменить свой собственный стиль кнопки. Вы можете перезаписать его в своем собственном внешнем файле css.

Ответ 2

Никто из меня не работал. Я закончил тем, что скрывал кнопку в 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>

Ответ 3

Хотя немного взломанный, для тех, кто хочет супер быстрый и простой способ использовать другую кнопку вместе с "простой интеграцией", особенно если у вас нет "твердых навыков JavaScript", вы можете просто скрыть кнопку "Stripe" с;

.stripe-button-el { display: none }

Таким образом, любая кнопка отправки в форме будет вызывать проверку, поэтому вы можете просто использовать кнопку, которую вы уже имели, прежде чем вводить Stripe.

Ответ 4

Следующее переопределит цвет фона с пользовательским цветом #EB649C. Требуется отключение фонового изображения, а также стилизация как кнопки, так и внутри тега span.

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

Ответ 5

Вы можете удалить стили кнопок с помощью 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>

Ответ 6

Используя jQuery, вы также можете просто масштабировать кнопку следующим образом:

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

Ответ 7

Вы должны использовать data-label своей части обычного чекового Checkout API:

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

Ответ 8

.stripe-button-el span действительно работает.

Но вам нужно добавить !important в CSS, чтобы перезаписать CSS по умолчанию.

Ответ 9

Вы можете попробовать это,

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

Оплата картой внутри пролета.

Ответ 10

Для тех из вас, кто хочет изменить цвет фона кнопки, убедитесь, что вы делаете что-то вроде

.stripe-button-el span {
  background: #5e366a !important;
  background-image:none !important;
  background-color: #5e366a !important;
}

в вашем файле CSS. это изменит фактический фон кнопки для вас. Если вы хотите изменить родительский элемент div, вы можете сделать то же самое без span или использовать прямой встроенный стиль.