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

Можно ли изменить стиль кнопки «Оплатить карточкой»? Я попытался изменения по,Изменить стиль кнопки «Оплатить карточкой»

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

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

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

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

Кто-нибудь есть опыт работы с этим?

(я интегрируется в Ruby On Rails, если это делает никакой разницы.)

источник

2016-04-16 tim_xyz

Что проблема с 'custom integration'? Вы можете использовать свой собственный стиль кнопки и отделить логику. Кажется, это не так сложно;) – RWAM

Вы правы. Это не было сложным. –

https://gist.github.com/u01jmg3/a9f53d4c4978c76a87f433570af4bbbc – u01jmg3

Поиск этого класса:

.stripe-button-el span

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

источник

2016-04-16 03:12:29 Xovika

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

Отметьте это как правильно, потому что я спросил, как отредактировать кнопку, но в конечном итоге решение было использовать 'custom integration' –

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

.stripe-button-el { display: none }

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

источник

2017-01-07 22:01:42

Спасибо за этот отзыв. Я попробовал это, и стили по умолчанию Stripe переопределили мой CSS. Итак, я написал '.stripeFormContainer .stripe-button-el' (потому что моя форма оказывается заключенной в div с классом' stripeFormContainer'), и это сработало! Теперь я использую кнопку из Bootstrap следующим образом: ''. – Ryan

Просто с помощью этого метода кнопка отправки отключается при нажатии, но ** не включается **, если пользователь закрывает приглашение Checkout, в отличие от кнопки Stripe по умолчанию, которая * * повторно включена. Несчастливый UX-ошибка с этим подходом. – ttarik

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

источник

2017-03-23 04:03:14

Не самое изящное решение, но выполняет эту работу. Благодаря! –

Работал для меня! Благодаря! – AndrewLeonardi

Работал как шарм. : D – qommander

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

источник

2017-06-25 22:32:15

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

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

источник

2017-11-12 21:21:09 ruffrey

Использование 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>

источник

2018-02-09 12:32:54

Масштабирование, похоже, хорошо работает для меня. Хотя 2x для меня было немного чрезмерным. Вместо этого используется 1.5x. – Nuclearman

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

ответ

Смежные вопросы