Checkbox validation within wordpress for a paypal button - javascript

I am trying to get a simple Terms and Conditions checkbox to validate before a user is allowed to click a paypal button. I currently have this code:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="my email">
<!-- Specify a Buy Now button. -->
<input type="hidden" name="cmd" value="_xclick">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="15-minutes">
<input type="hidden" name="amount" value="15.00">
<input type="hidden" name="currency_code" value="USD">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif"alt="stuff">
<img alt="" border="0" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
</form>
Any help or guidance would be super helpful.
Festivus for the rest of us,
Tom

A little jQuery like this should do the trick: http://jsfiddle.net/mVK4r/
I added a terms and conditions checkbox and then tested to see if it's checked. If it is, the button behaves normally. If it is not, there's an alert prompting the user to accept the terms and the button won't work.
Hope this helps - good luck!
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Terms and Conditions check box -->
<p><input type="checkbox" id="terms"> Yes, I accept the terms and conditions</p>
<p> </p>
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="my email">
<!-- Specify a Buy Now button. -->
<input type="hidden" name="cmd" value="_xclick">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="15-minutes">
<input type="hidden" name="amount" value="15.00">
<input type="hidden" name="currency_code" value="USD">
<!-- Display the payment button. -->
<input type="image" id="button" name="submit" border="0" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" alt="stuff">
<img alt="" border="0" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
</form> ​
<script type="text/javascript">
$(function(){
$('#button').click(function(e){
if ($('#terms').prop('checked') == false) {
alert('Please accept the terms and conditions');
e.preventDefault();
}
else {
// Allow the button the do its thing
}
});
});​
</script>

Related

Target text without tags in a form

I am using a WordPress plugin on my website and I have a form that has some text I need to change, basically perform a find and replace. The problem is the form doesn't have a class and neither does the text, but since this is a plugin, I am not able to modify the actual plugin files. I only want to target a specific form on a specific page, so I'm wondering how to do this? I found a band-aid solution, but I'm wondering if there isn't a better way to do this?
My code looks like:
<?php if (is_page("tickets")) { ?>
<script type="text/javascript">
$("form").addClass("tickets");
$("form").contents().filter(function(){
return this.nodeType === 3
}).wrap('<p />');
$("form p").text($("form p").text().replace("PayPal", ""));
</script>
<?php } ?>
Basically, this is a WordPress website, so is_page is targeting the specific page that has the form on it. The JS is only executing on the "Tickets" page.
Then, I am adding a class called tickets to my form, so I can target that specific form for styling purposes. This way I'm not affecting any of my other forms site-wide :-)
I am also wrapping text without tags in p tags. This way, I can target the text without tags for JS and styling purposes.
Finally...I am targeting the text (I just wrapped in p tags) and am removing the word "PayPal".
I try and stay away from JS if I can, because I know it can slow your page speed down, but I'm thinking since I narrowed it down to a specific page and a specific form, it probably won't affect things that much.
All this JS is pieced together from code I found here and there. Is there a better way to do this
The form looks like:
<div>
<form target="_blank" action="https://url.com/wp-admin/admin-post.php?action=add_wpeevent_button_redirect" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="path" value="sandbox.paypal">
<input type="hidden" name="business" value="seller#url.com">
<input type="hidden" name="item_name" value="2022 Event Name">
<input type="hidden" name="custom" value="20681">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="notify_url" value="https://url.com/wp-admin/admin-post.php?action=add_wpeevent_button_ipn">
<input type="hidden" name="lc" value="EN_US">
<input type="hidden" name="bn" value="WPPlugin_SP">
<input type="hidden" name="return" value="">
<input type="hidden" name="cancel_return" value="">
<input type="hidden" name="upload" value="1">
<table class="main-table_20681" style="width: 100% !important;">
<tbody>
<tr>
<td class="row-qty">
<select name="wpeevent_button_qty_a">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="row-name">Ticket</td>
<td class="row-price">31.50 USD</td>
<td class="row-desc">
2022 Event Name
<input type="hidden" name="item_name_1" value="Ticket">
<input type="hidden" name="id_1" value="2201">
<input type="hidden" name="amount_1" value="31.50">
</td>
</tr>
</tbody>
</table>
Your eTicket will be sent to your PayPal email address after payment.<br>
<input class="wpeevent_paypalbuttonimage" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="Make your payments with PayPal. It is free, secure, effective." style="border: none;"><img loading="lazy" alt="" border="0" style="border:none;display:none;" src="https://www.paypal.com/EN_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
Thanks,
Josh
I ended up using #vinay suggestion...thank you #vinay!
So now, the code looks like:
<?php if (is_page("tickets")) { ?>
<script type="text/javascript">
$("form").addClass("tickets");
$("form").contents().filter(function(){
return this.nodeType === 3
}).wrap('<span />');
$("form span").text($("form span").text().replace("PayPal", ""));
</script>
<?php } ?>

Add % discount to Add to Cart HTML paypal button

I have tried several times and relied on the code snippets examples provided by paypal (https://www.paypal.com/mq/smarthelp/article/how-do-i-create-a-discount-code-or-coupon-code-for-my-paypal-buttons-ts1512).
Yet my button doesn't show any % discount as it should.
This is the HTML code snippet, trying to implement a 10% discount (I have just hidden my merchant ID):
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="this.target = 'paypal';
discnt = 10;
coupval = '(blanket)';
ReadForm (this);
discnt = 0;">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="XXX" />
<input type="hidden" name="item_name" value="Test Item" />
<input type="hidden" name="amount" value="10.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="baseamt" value="10.00" />
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!" name="submit" alt="add to cart" />
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
Does any of you know what am I missing/how to fix it?
Thank you so much, take the chance to wish you a good day!
Michele

Add Paypal to simple website

<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>E-commerce Website</h1>
<h2>Website Pages:</h2>
<p>Home Page</p>
<p>About Us</p>
<p>Our Products</p>
<p>Buy Now</p>
<footer id="foot01"></footer>
</div>
<script src="script.js"></script>
</body>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="Email">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</html>
It is a very simple HTML page, I am trying to add a code I've got from a paypal website on how to add a paypal button and (They said it should work when I add it to my Page) It is not working though...The form tag is flagging red error ??
Thanks for any Help in advance!
All the HTML content to be displayed needs to be between the
<body>
and
</body>
tags. Just move the Paypal content above the closing </body>.

minicart.js not working, cart is not popping up

I am using Minicart.JS for my simple paypal shopping cart. But this is not working as it should. The cart is not popping up if I click 'add to cart' button.
Here's my code.
<html>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/minicart/3.0.3/minicart.min.js"></script>
<script>
paypal.minicart.render();
</script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="labs-feedback-minicart#paypal.com" />
<input type="hidden" name="item_name" value="Test Product" />
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="shipping2" value="1.50">
<input type="hidden" name="shipping" value="2.50">
<strong>Test Product</strong>
<p>
<label><input type="checkbox" id="terms" name="terms" value="" /> I agree to the terms</label>
</p>
<input type="submit" name="submit" value="Add to cart" />
</form>
<script>
paypal.minicart.render();
paypal.minicart.cart.on('checkout', function (evt) {
var hasAgreed = !!document.getElementById('terms').checked;
if (!hasAgreed) {
alert('You must agree to the terms!');
evt.preventDefault();
}
});
</script>
</body>
</html>
Here is the actual site. , I found an error in console that said:
Uncaught TypeError: Cannot call method 'appendChild' of null
I am not sure how to fix this, please let me know what's wrong with my setup. Thanks.
You need to change the Add to cart button to not be saved on PayPal (In Profit and loss Section) and also unprotect code after the button is created right before you copy and paste it :)
Hope this helps :)

How to completely hide radio button options when a page loads using Jquery or javascript?

I'm building a site with a shopping cart that doesn't give you access to the source code. I can edit the text on this page but I can't touch the forum fields or html.
Is it possible (using javascript or jquery) to hide the radio buttons on this payment page when the page loads so the customer can't edit payments on ALL pending orders at once? I'd like it to do the following:
1. hide both radio buttons when the page loads;
2. select only the radio button for the selected order
<form id="AccountSettingsForm" action="/AccountSettings.asp" method="POST" onsubmit="if (typeof(Update_Hidden_State_Fields) == 'function') Update_Hidden_State_Fields();"><input type="hidden" name="modwhat" value="change_c">
<input type="hidden" name="BillingID" value="">
<input type="hidden" name="ShipID" value="">
<input type="hidden" name="CCardID" value="">
<input type="hidden" name="OrderPlaced" value="4">
<input type="hidden" name="ReturnTo" value=""><br>
<table width="80%" border=0 align="center" cellpadding="5" cellspacing="1" bgcolor="#F7E26C">
<tr><td bgcolor="#FFFFCC">
<input type="radio" name="Apply_Payment_Method_To_All_Orders" value="" checked="checked" /><font color="#000000"><strong>Apply this payment method change to my Order#: 4 </strong></font><br />
<input type="radio" name="Apply_Payment_Method_To_All_Orders" value="Y" />
<font color="#000000"><strong>Apply Payment Method To All Orders</strong></font></td></tr></table>
Appreciate any help you can provide.
Thanks!
Start your page with the AccountSettingsForm element with the css property display set to none, then
<input class="rdbBtn" type="radio" name="Apply_Payment_Method_To_All_Orders" value="" checked="checked" /><font color="#000000"><strong>Apply this payment method change to my Order#: 4 </strong></font><br />
<input class="rdbBtn" type="radio" name="Apply_Payment_Method_To_All_Orders" value="Y" />
$('.rdbBtn').on('load',function(){
$('AccountSettingsForm').css('display', 'inline-block');
}

Categories

Resources