-
Posts
-
Hello,
I’m using WP Simple Pay Pro and I want the stripe checkout to execute on an external button (found here)
I have already done this but now I’m having trouble with the jquery script. I’m not 100% sure where to put it to get it to work properly.
Also if I give my button the custom class “gpmonthly” then will this be the correct script?
jQuery(‘#gpmonthly’).click(function(e) {
e.preventDefault();
jQuery(‘#sc_checkout_form_1’).find(‘.sc-payment-btn’).click();
});Thanks in advance
Hey rauschworks,
Where did you try the code? Also, do you know where the plugin authors recommend to put it?
Change your code to this if you’re using a class for the element:
jQuery(‘.gpmonthly’).click(function(e) { e.preventDefault(); jQuery(‘#sc_checkout_form_1’).find(‘.sc-payment-btn’).click(); });Best regards,
RikardI am using Scripts n Styles and I placed the code in the plugin on the page (where it says …<body> tag) The plugin author does not specify where to put it. I am having no luck with this. Do I need the link the button to something to the query to work?
Hi!
Please try adding following code to Functions.php file in Appearance > Editor
function av_custom_js_code(){ ?> <script> jQuery(window).load(function(){ jQuery('#gpmonthly').click(function(e) { e.preventDefault(); jQuery('#sc_checkout_form_1').find('.sc-payment-btn').click(); }); }); </script> <?php } add_action('wp_footer', 'av_custom_js_code');Best regards,
YigitThank you Yigit, although I still cannot get it to work. Do I need to make the go_monthly button link to anything?
Looking at the HTML source, this is the Stripe button that I want to be executed when the go_monthly button has been clicked.
</div></div></div><!-- close content main div --></div></div><div id='after_section_4' class='main_color av_default_container_wrap container_wrap fullsize' ><div class='container' ><div class='template-page content av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-6542'><div class='entry-content-wrapper clearfix'> <section class="av_textblock_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_textblock ' itemprop="text" ><form method="POST" action="" class="sc-checkout-form" id="sc_checkout_form_1" data-sc-id="1" data-parsley-validate><br /> <div class="sc_sub_wrapper sc-form-group" id="sc_sub_wrapper_2"><input type="hidden" name="sc_sub_id" class="sc_sub_id" value="Monthly" /><input type="hidden" name="sc_sub_amount" class="sc_sub_amount" value="400" /><input type="hidden" name="sc_sub_interval" class="sc_sub_interval" value="month" /><input type="hidden" name="sc_sub_interval_count" class="sc_sub_interval_count" value="1" /><input type="hidden" name="sc_sub_setup_fee" class="sc_sub_setup_fee" value="0" /><input type="hidden" name="sc_sub_trial_days" class="sc_sub_trial_days" value="0" /><input type="hidden" name="sc_sub_max_occurrences" class="sc_sub_max_occurrences" value="" /><input type="hidden" name="sc_sub_quantity" class="sc_sub_quantity" value="1" /><input type="hidden" name="sc_sub_currency" class="sc_sub_currency" value="usd" /></div><br /> <input type="hidden" name="sc-name" value="An Awesome Plan" /><input type="hidden" name="sc-description" value="Subscribe for $10 per month" /><input type="hidden" name="sc-amount" class="sc_amount" value="" /><input type="hidden" name="sc-redirect" value="https://www.cheapflightsny.com/welcome/" /><input type="hidden" name="sc-redirect-fail" value="https://www.cheapflightsny.com/error/" /><input type="hidden" name="sc-currency" value="USD" /><input type="hidden" name="stripeToken" value="" class="sc_stripeToken" /><input type="hidden" name="stripeEmail" value="" class="sc_stripeEmail" /><input type="hidden" name="wp-simple-pay" value="1" /><input type="hidden" name="sc-details-placement" value="above" /><input type="hidden" id="wp-simple-pay-pro-nonce" name="wp-simple-pay-pro-nonce" value="e58311f56a" /><button class="sc-payment-btn stripe-button-el"><span>Go Premium</span></button></form> </div></section>And here is the go_monthly button that I want to execute this query
<div class='avia-button-wrap avia-button-center avia-builder-el-33 el_after_av_iconlist avia-builder-el-last go_monthly'><a href='https://www.cheapflightsny.com/' class='avia-button av-icon-on-hover avia-icon_select-yes-left-icon avia-color-custom avia-size-small avia-position-center ' style='background-color:#ff3300; border-color:#ff3300; color:#ffffff; ' ><span class='avia_button_icon avia_button_icon_left ' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span><span class='avia_iconbox_title' >Go Premium</span></a></div></div><div class="flex_column av_one_fourth flex_column_divIs the jquery code correct to do this? I’m not sure why it is not working.
Edit: I apologize for any confusion, I changed ‘gpmonthly’ to ‘go_monthly’
I think my issue is that adding a “CSS Class” isn’t enough. Is there anyway I can assign a proper ID to my button?
Hi,
You can create a button using HTML and give it an ID manually or give it a custom class and then add following code to Functions.php file
function avia_button_id(){ ?> <script> jQuery(window).load(function(){ jQuery('.your-custom-class a').attr('id','my-custom-id'); }); </script> <?php } add_action('wp_footer', 'avia_button_id');Best regards,
Yigit
- You must be logged in to reply to this topic.