自定義條紋按鈕

Question

我有一個靜態網站。 這是我網站上的默認按鈕，看起來不錯，所以我想保留它並集成Stripe。

        <a class="btn btn-xl btn-primary w-250" href="#">Order Now <strike>$50</strike><span class="pl-4">$30</span></a><br>

這是我正在使用的條帶代碼：

                <form action="your-server-side-code" method="POST" >
                  <script
                    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                    data-key="xxxx"
                    data-amount="35000"
                    data-name="website.com"
                    data-description="my packag"
                    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                    data-locale="auto"
                    data-zip-code="false"
                    data-label="Buy Now">   
                  </script>
                </form>  

我想使條紋按鈕看起來像本地按鈕。

你有什么想法嗎？

Answer 1

嘗試使用此技巧，而不是用<a>按鈕代替它，當單擊它時，它將提交Stripe默認按鈕;）

            <form action="your-server-side-code" method="POST" >
              <script
                src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                data-key="xxxx"
                data-amount="35000"
                data-name="website.com"
                data-description="my packag"
                data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                data-locale="auto"
                data-zip-code="false"
                data-label="Buy Now">   
              </script>
              <button class="btn btn-xl btn-primary w-250" type="submit">Order Now <strike>$50</strike><span class="pl-4">$30</span></button><br>

            </form>  

然后在您的CSS中隱藏默認按鈕：

.stripe-button-el { display: none }