Полоса пользовательская кнопка - PullRequest
Новая
       4

Полоса пользовательская кнопка

0 голосов
/ 28 ноября 2018

, поэтому я пытаюсь интегрировать кнопку проверки полосы (бета-версия, которая приводит вас на страницу проверки полосы), проблема в том, что кнопка является серой и простой и не смогла изменить размер или цвет или отформатировать ее в целом.

У меня нет никаких навыков кодирования, я пытался использовать пользовательскую кнопку CSS, но не уверен, как я могу связать это с исходным кодом.

Поэтому я ценю, если кто-нибудь может помочьмне либо:

Иметь возможность связать результат нажатия кнопки оригинальной полосы с одной из моих кнопок ИЛИ

Помогите отформатировать кнопку, увеличив ее размер, используя определенныйшрифт и выбор цвета, чтобы я мог изменить их самостоятельно.

Заранее большое спасибо

Это код, который я использую: 

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. -->
<button id="checkout-button">StandardBlue</button>
<div id="error-message"></div>

<script>
  var stripe = Stripe('KEYYYYYYYYYYYYYYYYYYYYYYYYYYYY', {
    betas: ['checkout_beta_3']
  });

  var checkoutButton = document.getElementById('checkout-button');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: 'SKU', quantity: 1}],
      successUrl: 'https://WEBSITE.COM/success',
      cancelUrl: 'https://WEBSITE.COM/canceled',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
</script>

1 Ответ

0 голосов
/ 30 ноября 2018

Довольно просто здесь.Просто добавьте css с кнопкой выбора # checkout.

Вот пример: https://jsfiddle.net/tonyprovenzola/sb7dtakz/3/

button#checkout-button {
font-family:'Arial', sans-serif;
padding:10px 14px;
background-color:#255eba;
border-radius:10px;
color:#fff;
cursor:pointer;
border:none;
outline:none;
}

button#checkout-button:hover {
background-color:#112a51;
}
...