3

I'm using Stripe Custom Checkout. After a successful charge I'm trying to get a form to automatically be submitted. I know the form works but I'm not able to get the form to submit after the stripe checkout processes.

I'm pretty sure the code should go after the function(token). The stripe checkout form closes and the form is not submitting.

My form:

<form name="regform" id="regform" action="[[~[[*id]]]]" method="post" class="form">..Lots of data......<input type="submit" name="regform" id="regform" value="Register"> </form>

My Strip checkout:

<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_zizizizizizizizizzizi',
image: '/images/VR-logo.png',
token: function(token) {
document.getElementById("regform").submit();
// Use the token to create the charge with a server-side script.
// You can access the token ID with `token.id`
}
});

$('#customButton').on('click', function(e) {
  var grtotal;
  grtotal = document.getElementById('total').value;
      // Open Checkout with further options
handler.open({
  name: 'Verticle Runner',
  description: '[[!+fi.pagetitle]]',
  amount: parseInt(grtotal * 100),
  email: "[[+modx.user.id:userinfo=`email`]]"
});
e.preventDefault();
});
// Close Checkout on page navigation
$(window).on('popstate', function() {
  handler.close();
});

</script>
Mike Tarantino
  • 41
  • 1
  • 4

3 Answers3

5

The idea here is to retrieve the card token in the token callback and then submit your form from there.

Let's assume you have the following form:

<form id="myForm" action="XXXXXX" method="POST">
    <input type="text" id="amount" name="amount"/>
    <input type="hidden" id="stripeToken" name="stripeToken"/>
    <input type="hidden" id="stripeEmail" name="stripeEmail"/>
</form>

Then your call to StripeCheckout.configure() could be something like this:

var handler = StripeCheckout.configure({
    key: 'pk_test_XXX',
    image: '/square-image.png',
    token: function(token) {
        $("#stripeToken").val(token.id);
        $("#stripeEmail").val(token.email);
        $("#myForm").submit();
    }
});
koopajah
  • 23,792
  • 9
  • 78
  • 104
  • It seems like it starts the form submit and then just stops. Is it possible that that when stripe closes it resets the page in the middle of the form submission? Could the close be delayed until after the the submit? – Mike Tarantino Apr 21 '15 at 16:46
  • not it's not unless you have something else in your code doing something weird. For example the submit succeeds but your code is redirecting to the same page again because you have an error in your back end – koopajah Apr 21 '15 at 20:01
  • I currently have it setup so that after the check out a submit button appears (RED) to click to submit form. This works, but I'd like to make it happen in one action. We've had a few people pay and not submit the form. – Mike Tarantino Apr 21 '15 at 21:12
  • just disable the submit after the first one? You'd set a global variable that you would check before submitting so that you can't submit twice – koopajah Apr 21 '15 at 22:21
1

Make sure your submit button does NOT have a name of "submit". Took me about 6 hours to figure that one out.

Kyle Goss
  • 37
  • 2
  • This should be a comment instead of an answer. Since you did not provide a direct answer to the question, you shouldn't mark it as answered. This is a tip, not an answer. – Ben Leitner Jun 20 '17 at 22:14
0

I have this same issue.

My problem was that I had 2 buttons in the form. One of them is type=submit, and the other has not defined a type. I fixed it defining type=button on that one.

Broda Noel
  • 1,760
  • 1
  • 19
  • 38