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

Question

Background

I am trying to integrate Stripe into our website. The checkout page has two button options, PayPal or Visa/Credit Card.

This is the code at the moment.

<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>

It produces this...

The button and everything works perfectly... however I want it to look like this.

The code looks like this...

<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>

I am wondering if there is a way to make the clicking of the <a> anchor tag sort of trigger the form (perhaps a hidden form).

I have a vague idea of how this might work so I will try my best to show you guys what I have attempted...

My Attempt

I removed the stripe-button class from the script tags and added onclick="document.getElementById('stripe').submit();" to my new anchor tag to submit the form, however this does not have the same effect.

<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>

The original stripe button that is displayed by the tag is showing the stripe popup window before the form is submitted... how do I trigger the same process with my anchor tag?

Where am I going wrong?

UPDATE-1:

Still not working unfortunately... here is what I have tried...

<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事件。