背景
我正在尝试将 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>
anchor 标记触发表单(可能是隐藏表单)。
我对这可能如何工作有一个模糊的想法,所以我会尽力向你们展示我的尝试......
我的尝试
我删除了 stripe-button
来自脚本标签的类并添加了onclick="document.getElementById('stripe').submit();"
到我的新 anchor 标记以提交表单,但这没有相同的效果。
<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>
标签显示的原始 Stripe 按钮在提交表单之前显示 Stripe 弹出窗口...如何使用我的 anchor 标签触发相同的过程?
我哪里错了?
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>
最佳答案
您需要使用 Checkout 的 "custom integration" ,这将允许您使用具有所需样式的自己的按钮,并使用 JavaScript 将 Checkout 的弹出窗口绑定(bind)到按钮的点击事件。
关于javascript - 如何使用 anchor 标签触发 Stripe 信用卡结账?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39613324/