Question

因此，我尝试集成条纹签出按钮（将您带到“条纹签出”页面的Beta版），问题是按钮为灰色和纯色，并且通常无法更改大小或颜色或设置其格式。

我没有任何编码技能，我尝试使用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>

Answer 1

这里非常简单。只需使用选择器＃checkout-button添加CSS。

这里是一个示例：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;
}

条纹自定义按钮

1 个答案: