Background
I am trying to integrate Stripe into our website. There are two buttons on the verification page, 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>
He produces it ...
The button and everything works fine ... 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 click the anchor tag of a <a>form trigger type (possibly a hidden form).
I have a vague idea of how this might work, so I will try to show you guys what I tried ...
My attempt
I removed the class stripe-buttonfrom the script tags and added a onclick="document.getElementById('stripe').submit();"binding tag to my new 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>
, , , ... ?
?
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>