如何使用錨標記觸發Stripe信用卡結帳？

Question

背景

我正在嘗試將Stripe集成到我們的網站中。 結帳頁面有兩個按鈕選項，貝寶（PayPal）或Visa /信用卡。

這是目前的代碼。

<div class="pull-right">
    <a class="btn btn-lg btn-paypal" href="#">
        <i class="fa fa-paypal" aria-hidden="true"></i>
        PayPal
    </a>
    <form action="<?php echo base_url() . 'stripe/process'; ?>" method="POST">
        <script src="https://checkout.stripe.com/checkout.js"
        class="stripe-button"
        data-key="xxxx"
        data-image="your site image"
        data-name="w3code.in"
        data-description="Demo Transaction ($100.00)"
        data-amount="10000" />
        </script>
    </form>
</div>

它產生了這個...

該按鈕和一切正常工作...但是我希望它看起來像這樣。

代碼看起來像這樣...

<div class="pull-right">
    <a class="btn btn-lg btn-paypal" href="#">
        <i class="fa fa-paypal" aria-hidden="true"></i>
        PayPal
    </a>
    <a type="submit" class="btn btn-lg btn-stripe">
        Visa/Credit Card
        <i class="fa fa-cc-stripe" aria-hidden="true"></i>
    </a>
</div>

我想知道是否有一種方法可以使點擊<a>錨標簽的某種形式觸發表單（也許是隱藏表單）。

我對這可能如何工作有一個模糊的想法，所以我會盡力向大家展示我所嘗試的...

我的嘗試

我從腳本標記中刪除了stripe-button類，並添加了onclick="document.getElementById('stripe').submit();" 到我的新錨標簽以提交表單，但是效果不一樣。

<a type="submit" class="btn btn-lg btn-stripe" href="javascript:{}" onclick="document.getElementById('stripe').submit();">
    Visa/Credit Card
    <i class="fa fa-cc-stripe" aria-hidden="true"></i>
</a>
<form id="stripe" action="<?php echo base_url() . 'stripe/process'; ?>" method="POST">
    <script src="https://checkout.stripe.com/checkout.js"
    data-key="xxx"
    data-image="your site image"
    data-name="w3code.in"
    data-description="Demo Transaction ($100.00)"
    data-amount="10000" />
    </script>
</form>

標簽顯示的原始條紋按鈕在提交表單之前顯示了條紋彈出窗口...我該如何用我的錨標簽觸發相同的過程？

我要去哪里錯了？

UPDATE-1：

仍然無法正常工作...這是我嘗試過的...

<a type="submit" class="btn btn-lg btn-stripe" onclick="document.getElementByClass('stripe-button').submit();">
    Visa/Credit Card
    <i class="fa fa-cc-stripe" aria-hidden="true"></i>
</a>
<form action="<?php echo base_url() . 'stripe/process'; ?>" method="POST">
    <script src="https://checkout.stripe.com/checkout.js"
    class="stripe-button"
    data-key="pk_test_uT2PnISTl40vQWojZAngFlu6"
    data-image="your site image"
    data-name="w3code.in"
    data-description="Demo Transaction ($100.00)"
    data-amount="10000" />
    </script>
</form>

Answer 1

您需要使用Checkout的“自定義集成” ，這將允許您以所需的樣式使用自己的按鈕，並使用JavaScript將Checkout的彈出窗口綁定到按鈕的click事件。