Adding Own amount on payment button - javascript

Does anyone know how I could go about inserting a custom amount in a payment button. The vender (Payfast) does not allow just a payment link where a customer can enter their own amount, the amount has to be specified in the link.
Here is the link:
<a href=”https://www.payfast.co.za/eng/process?cmd=_paynow&receiver=support%40payfast.co.za&?item_name=Black+Eye+Boxing+Gloves&amount=129.99″>
The amount of 129.99 I want to have replaced with the amount a customer enters into a field before pressing the link. Is this possible? The only other route seems to be severe hacking of sophisticated ecommerce plugins like woocommerce + name your price... I am sure there is a simple, elegant solution...

By default leave the href attribute in the tag empty and give it a id
<input type='text' name='payment' onblur="add_value(this.value);">
<a id='pay_button'>Pay</a>
<script type='text/javascript'>
function add_value(value)
{
var url = 'https://www.payfast.co.za/eng/process?md=_paynow&receiver=support%40payfast.co.za&?item_name=Black+Eye+Boxing+Gloves&amount='+value;
var elem = document.getElementById('pay_button');
elem.setAttribute("href", url);
}
</script>

Related

Link user input with login button

I would like to create a sort of login page. Which links to a href depending on the input of the user.
So i have a text input part and a login button.
Then it should go to the website depending on the text input.
Example: users fills in 1234 and clicks on the login button, then the website:
example.com/1234 opens up.
I tried but i cant get it worked.
<input type=text id='token' name="token"/>
<input type=button name=login value="login" onClick=changeQuery()/>
changeQuery(){
var input_query=document.getElementById('sq').value;
window.location="http://www.google.com/"+input_query+"myString";
}
There are many issues with your code...
HTML attribute should be in quotes (so change things like onclick=changeQuery() to onclick="changeQuery()")
Your function does not start with the keyword function
Your textbox control has an id of token... so in the example you have, there is no sq for the getElementById to find
And I'm not sure why you're adding "MyString" at the end of the URL, but that might be part of your intended code
The result should be something like this...
function changeQuery(){
var input_query = document.getElementById('token').value;
//window.location = "http://www.google.com/" + input_query + "myString";
console.log("http://www.google.com/" + input_query + "myString");
}
<input type="text" id="token" name="token"/>
<input type="button" name="login" value="login" onClick="changeQuery()"/>
(Please note, I've commented out the window.location and instead put a console.log so you can see what is produced without it actually navigating to another page)
function changeQuery() {
var input_query =
document.getElementById('token').value;
window.location = "https://www.google.com/search?
q=" + input_query;
}
Above is the correct code for what you want, but google doesn't allow some different origin to make search request.
Refused to display 'https://www.google.com/search?q=somequery' in a frame because it set 'X-Frame-Options' to 'sameorigin'.If you try to redirect some other origin it will work.

Add hidden form variable to the end of the URL

I have searched Unbounce and Google for documentation, but can't find a way to make this work. Any help is greatly appreciated!
Use case:
I have a test page setup in Unbounce and it would be great when a user lands on the page and submits the form that the value being generated through the script below in the hidden field is added to the current URL upon submission.
It's important that if the user lands on the page from an advertising campaign that the value is added to URL and does not replace it.
Example:
User lands on testpage.com or testpage.com?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA
Unique ID is created with the following JavaScript and added to a hidden field:
<script type="text/javascript">
$(document).ready(function() {
var id = new Date().toISOString().replace(/[-tTzZ:.]/g, '');
$('#lead_id').val(id);
});
</script>
User clicks submit and and is redirected to a thankyou page with the value of the hidden field passed in the URL:
testpage.com/thank-you?lead_id=1234
testpage.com/thankyou?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA&lead_id=1234
I should also mention that I can not edit the html of the form so this would need to happen with JavaScript as Unbounce provides a space to add custom code.
Is the form method get? If it is post it wont append that to the URL for the hidden field.
Your approach seems right however if this is the HTML on page:
<form action="http://example.com" method="get" id="theForm">
<input type="hidden" value="xyz" />
<button type="submit">Send</button>
</form>
You can use some JS code like one of the following to modify this...however you'll want to verify that everything still works as expected:
document.getElementById('theForm').action = "http://another.example.com";
document.getElementById('theForm').method = "get";

Append the values to the URL on Form in Javascript

I have a form link on multiple pages. All I need when I click on a form link for page A it should display as www.form.com?referrer=Page A on URL and when I submit the form, I have created a hidden field referrer, when I received it on my email on the referrer field it should show "page A".
I have this HTML code which was working fine however, I do not want to do it manually on every page, as soon as a user clicks on the form link or received the form it should automatically updated:
<a target="_blank" title="Click Here" href="https://myform.com/forms/land_discount?referrer= Beach Club">
Here is the JavaScript for my Form:
Discount Form
See if this is what you are trying to do:
// I'm going to use jQuery, it's easier for me
$(document).ready(function(){
// I used a class so it doesn't do it to every <a> tag
$('a.use_refer').click(function(e){
// Stop the button from submitting normally
e.preventDefault();
// Create a new url
// You may or may not want to use encodeURIComponent() on the path value
var newUrl = $(this).attr('href')+'?referrer='+document.location.pathname;
// Go to the new page
window.location = newUrl;
});
});
</script>
Click Here
Assuming you Page A is the last directory of the path. And wrap this for when the DOM is ready.
Note the changes to the HTML with the addition of the id= tag.
On "Page A"
HTML:
<script type="text/javascript" src="https://myform.com/forms/js.php/test"></script>
<noscript>
Game Form
</noscript>
Javascript:
var url = document.getElementById('formRef').getAttribute("href");
document.getElementById('formRef')
.setAttribute('href', encodeURI(url + '?referrer=' + window.location.href.slice(window.location.href.lastIndexOf('/') + 1)));
On "Landing Page"
HTML:
<a id="landingPage" target="_blank" title="Click Here" href="https://myform.com/forms/land_discount">
Javascript:
var href = document.getElementById('landingPage').getAttribute('href');
if(window.location.href.indexOf('referrer=') > -1){
document.getElementById('landingPage').setAttribute('href', encodeURI(href + window.location.href.slice(window.location.href.indexOf('?referrer='))));
}

window.location doesn't produce same outcome as pasting the same link into browser - Magento Add To Cart URL

I'm creating a Magento category page which allows users to add configurable products from the category page. This is outside of how Magento wants to operate out of the box.
I've got to a point where I'm 99.9% there but am having trouble with some final javascript.
I've manage to build all of the configurable products on the page with a select dropdown for the size attribute and an add to cart button for each product.
The select dropdowns have the ->getAddUrl() method as their value. So during the onclick event of the 'add to cart' button I'm using window.location(thegetAddUrlLink) to add the product to the cart.
Unfortunately this doesn't work for some unknown reason, it just takes me to that product's individual product page and asks to select a size. This is strange because if I copy the same links from the source (from the value field) for any of the the products on that page and paste it into my browser then I get the intended outcome.
Below is an example of the mark up of one product on the page
<form action="http://www.mysite.com/checkout/cart/add/" method="post" style="display:block; clear:both;">
<p class="shopthislookpageselectsize">Size</p>
<div class="shopthislookpageselectholder">
<select name="select-35900" id="select-35900" class="required-entry shopthislookpageselect">
<option value="http://www.mysite.com/checkout/cart/add/uenc/aHR0cDovL3d3dy5jdWx0dXJla2luZ3MuY29tLmF1L3Nob3AtdGhpcy1sb29rL2Zlc3RpdmFsLWdlYXJzLTEuaHRtbA,,/product/35895/">ONE SIZE</option>
<option value="http://www.mysite.com/checkout/cart/add/uenc/aHR0cDovL3d3dy5jdWx0dXJla2luZ3MuY29tLmF1L3Nob3AtdGhpcy1sb29rL2Zlc3RpdmFsLWdlYXJzLTEuaHRtbA,,/product/22533/">28</option>
</select>
</div>
<button class="button btn-cart" input="" type="hidden" name="product" id="button-35900" value="35900" onclick="addLookItemsToCart(this.id); return false;"><span><span>Add to Cart</span></span></button>
<script type="text/javascript">
function addLookItemsToCart(id){
var clickedId = id;
var theValue = clickedId.replace("button-", "");
var theLink = $j('#select-'+theValue).val() );
window.location = theLink;
};
</script>
</form>
Just to reiterate. As an example if I copy the link http://www.mysite.com.au/checkout/cart/add/uenc/aHR0cDovL3d3dy5jdWx0dXJla2luZ3MuY29tLmF1L3Nob3AtdGhpcy1sb29rL2Zlc3RpdmFsLWdlYXJzLTEuaHRtbA,,/product/35895/ out of the source and paste it into my browser, I get the intended outcome. If I use the javascript method of window.location it redirects me to ask me to confirm the size and I'm not sure why.
Problem was in the javascript
This line had an extra closing bracket ')'.
$j('#select-'+theValue).val() );

paypal dg flow lightbox no longer works

I've noticed today that my link that usually popups up a paypal light box for digital goods express payment has stopped working. The link was working as recently as the 2012/11/21, and I checked that the problem exists on a server that contains old code (that used to work), so I don't think that this is something that I have changed, but rather something that paypal has changed in their js files.
The code I use is exactly what is generated by the paypal wizard:
<!-- INFO: The post URL "checkout.java" is invoked when clicked on "Pay with PayPal" button.-->
<form action='checkout.java' METHOD='POST'>
<input type='image' name='paypal_submit' id='paypal_submit' src='https://www.paypal.com/en_US/i/btn/btn_dg_pay_w_paypal.gif' border='0' align='top' alt='Pay with PayPal'/>
</form>
....
<!-- Add Digital goods in-context experience. Ensure that this script is added before the closing of html body tag -->
<script src='https://www.paypalobjects.com/js/external/dg.js' type='text/javascript'></script>
<script>
var dg = new PAYPAL.apps.DGFlow(
{
trigger: 'paypal_submit',
expType: 'instant'
//PayPal will decide the experience type for the buyer based on his/her 'Remember me on your computer' option.
});
</script>
Firstly, when the page now loads, there looks like there's some noise on an image named 'nameOnButton' (the 'image' contains the text 'su yi' with a few empty boxes) that the PP javascript must insert, as it is not in the HTML that I generate. Various examples on the web also have this spurious image. The HTML looks like:
<form action="/pay/dpSetCheckout/" method="GET" target="PPDGFrame">
<input type="hidden" name="express">
<input type="hidden" name="trackingNumber" value="UNg0000306">
<span class="nameOnButton"><img src="https://www.paypal.com/webapps/checkout/nameOnButton.gif"><br><input type="image" name="paypal_submit" id="paypal_submit" src="https://www.paypal.com/en_US/i/btn/btn_dg_pay_w_paypal.gif" border="0" align="top" alt="Pay with PayPal"></span>
</form>
...
<script>
$(document).ready(function(){
var dg = new PAYPAL.apps.DGFlow({
trigger: 'paypal_submit',
expType: 'instant'
//PayPal will decide the experience type for the buyer based on his/her 'Remember me on your computer' option.
});
});
</script>
When I click on the 'pay with paypal' button, the screen 'shades to grey', but the paypal popup never appears. After about 5 seconds the error message 'Refused to display document because display forbidden by X-Frame-Options.' appears in the javascript console, most probably because the lightbox was not created. I don't think this is a back end/configuration problem, because if I open the 'pay with paypal' link in a new tab, it opens up fine.
I'm not quite sure where to start debubgging this (seeing that there aren't any javascript error messsages).
I think there was a bug with Japanese and Chinese language fonts in recent PayPal release and it should be fixed soon

Categories

Resources