Calling the checkout form from a custom button

Resolved zgall1
(@zgall1)

11 years, 7 months ago
I have the following price table – http://www.lucidwebgrouptest.com/test-table-page/

(Note: this is not the actual table I want to modify but all code is identical)

I would like to call the Stripe checkout form when the customer clicks the submit button.

According to documentation here – http://wpstripe.net/docs/getting-started/simple-stripe-checkout-faq/ – I need to follow the instructions for the question “How do I call the checkout form from a custom button or link?”

Specifically, I need to follow this section
Each Stripe form is assigned it’s own unique “id” attribute, such as “sc_checkout_form_1”, “sc_checkout_form_2”, etc. You’ll simply need to trigger the submit event of your targeted form.

For example, to trigger the first Stripe form on a page with a button containing the id “my_custom_button”, use this script:
```
jQuery('#my_custom_button').click(function(e) {
  e.preventDefault();
  jQuery('#sc_checkout_form_1').submit();
});
```
The problem I having is that my buttons do not have a unique ID attribute that allow me to identify them. In contacting Phil Derksen at Stripe support he suggested, “You’ll need to use the element’s class or somehow pinpoint how to detect a click even on each specific button element.”

Would anybody be able to expand on this and provide a more specific solution?

Thanks!

https://wordpress.org/plugins/stripe/

Viewing 9 replies - 1 through 9 (of 9 total)

Phil Derksen
(@pderksen)

11 years, 7 months ago

Hey to follow up, the easiest would be if you could add a unique ID attribute to each price button html tag, then you can use that jQuery code.

If you can’t do that, you’ll need to traverse the DOM in jQuery to pinpoint each individual pricing button. It’s a fairly straightforward thing to figure out for most JavaScript developers if that’s not up your alley.

webfreshing
(@webfreshing)

11 years, 5 months ago

hey, I need help with this.

Can you clarify how this should be done.

I have my own hyperlinks ready to go, and need to use these rather than having to style those nasty blue buttons.

Can you tell me exactly where everything should go please.

Thanks

Phil Derksen
(@pderksen)

11 years, 5 months ago

@webfreshing My previous post explains it, but we recently moved the instructions here and added a few more tips.

http://wpstripe.net/docs/misc/calling-stripe-checkout-externally/
webfreshing
(@webfreshing)

11 years, 5 months ago
Thanks for your reply Phil. Sorry I’m being so dumb here.

I’m obviously not a developer or used to working with jQuery and javascript at all.

I’ll be needing the pro version of this plugin later for subscriptions, but I need to get this working using my own buttons and links for now.

I followed the instructions on the provided page, and I see it’s been updated slightly. Unfortunately, while the shortcode button works, I cannot get my link to work.

Would you mind letting me know what I have done wrong please?

I’ve tried inserting the jQuery in header, footer and on page, but it simply doesn’t work for me. I’ve probably done it all wrong.
```

[stripe name="this offer" description="bonus" amount="7900"]
<div class="buttons buttons_big"><a href="#">Get this Today!</a></div>
<script>
  jQuery('#paymentButton').click(function(e) {
  e.preventDefault();
  jQuery('#sc_checkout_form_1').submit();
});
</script>

```
webfreshing
(@webfreshing)

11 years, 5 months ago
sorry, the id is not being shown in the code. The code I have is as follows:
```

[stripe name="this offer" description="bonus" amount="7900"]
<div class="buttons buttons_big"><a href="#" id="paymentButton">Get this Today!</a></div>
<script>
  jQuery('#paymentButton').click(function(e) {
  e.preventDefault();
  jQuery('#sc_checkout_form_1').submit();
});
</script>

```
Phil Derksen
(@pderksen)

11 years, 5 months ago

Looks correct to me.

Did you edit this in the Text (source) tab and save there?

Are there any other theme or plugin conflicts going on? Or script errors in the console?

Do you have a test page I can take a look at?

Thanks.

webfreshing
(@webfreshing)

11 years, 5 months ago

Thanks for the reply again.

At least you have confirmed that I have added the Javascript correctly. That was my first doubt.

Yes, I added this to the source tab.
I don’t see any conflicts or errors at all in the console
I have tried a different theme also

The blue button from the shortcode works without any issues. My link just does not.

here is a test page. I have commented out the css that hides the blue button, so you can see it working.

http://www.websitemint.com.au/promo/about-us/

Hope you can help.

webfreshing
(@webfreshing)

11 years, 5 months ago

By the way, I have no other plugins activated either.

webfreshing
(@webfreshing)

11 years, 5 months ago

It’s ok. I appreciate your help, but I wanted to use this to make things easier, and I’ve run out of patience with it.

Thanks for your time anyway.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Calling the checkout form from a custom button’ is closed to new replies.

Tags