如何使用锚标签触发 Stripe 信用卡结账？

Question

背景

我正在尝试将 Stripe 整合到我们的网站中。结帐页面有两个按钮选项，PayPal 或 Visa/Credit Card。

这是目前的代码。

<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 (0.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 class 并添加了 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 (0.00)"
    data-amount="10000" />
    </script>
</form>

标签显示的原始条纹按钮显示条纹弹出窗口window 在提交表单之前...我如何触发相同的过程用我的锚标签？

我哪里错了？

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 (0.00)"
    data-amount="10000" />
    </script>
</form>

Answer 1

您需要使用 Checkout 的 "custom integration"，这将允许您使用自己想要的样式的按钮，并使用 JavaScript 将 Checkout 的弹出窗口绑定到按钮的点击事件。

如何使用锚标签触发 Stripe 信用卡结账？

How do I trigger Stripe Credit Card Checkout with an anchor tag?

html

javascript

php

jquery

stripe-payments