I am using Paypal to accept payments on a website. Its working fine on the full size website but when I implement the same code on the mobile version of the website which runs jQuery mobile, the 'add to cart' button doesn't work.
I'm using website payments standard so its not as simple as adding "-mobile" as with the express checkout in this post: Paypal Checkout in mobile website
Paypal says the page should automatically re-direct but it doesn't.
My button is also not showing correctly which is rather strange. On my laptop (on mobile website) the button is stretched strangely, and on my phone (on mobile website) the button looks strange aswell.
Here is my code for the Paypal button:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ZQK9WXTYG3SDN">
<table>
<tr><td><input type="hidden" name="on0" value="Weekend Ticket Type">Weekend Ticket Type</td></tr><tr><td><select name="os0">
<option value="Full Price Weekend Ticket">Full Price Weekend Ticket £42.00 GBP</option>
<option value="Weekend Concession Ticket">Weekend Concession Ticket £40.00 GBP</option>
<option value="Under 12 Weekend Ticket">Under 12 Weekend Ticket £0.00 GBP</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input style="padding:20px 0px 0px 0px;" width="120" type="image" src="http://www.website-domain.com/images/PayPal-button.jpg" 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>
(I have changed the website domain name to stop it getting picked up in search engines ;-)
Many thanks in advance for your help
I suggest jQuery Mobile is hijacking your form submit (like it does with <a href=".."> tags too).
Try adding data-ajax="false"to your <form> tag.
You can find out more about this behaviour here:
http://jquerymobile.com/test/docs/forms/forms-sample.html
Or globally disable it by adding this snippet to your code:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
Related
I am trying to integrate paypal as a payment option. As I have done it (which works) is not using any paypal snd but just the simple html form. Ive been looking at it for a while and perhaps my question is stupid, but I don't understand what the difference is to just using the html form or (at paypal developer provided sdk)? Could someone explain please?
Also, I am trying to write a backend route with nodes/express. I set up the notify url for paypal which - as I understand- will return to me an object containing data (what was paid, the users paypal id etc.).
so what I did was:
1. set up notify url which goes to the (angular state) /summary. - Im not sure if it perhaps should be the backend url and not the state.
2. then I have the fronted http call (as I also want to display a purchase summary to customer after he paid at paypal).
3. route in the backend to post to db.
I have been looking a lot a different documentation and tutorials but don't quite understand it and if anyone would have a few min explaining it to me, that would be amazing!! Thank you!
app.controller('summaryCtrl', function($scope, $http){
return $http.post('api/order/summary', {???})
.then(function(paypalObj){
$scope.paypalObj=payppalObj;
})
// here I am not sure what Im sending/how do I know what the object Im getting back from paypal named)
})
router.post('/summary', function(req, res, next){
console.log(req.body,res, 'paypal')
User.findById(req.user.id)
....
Order.create
...
})
html form:
<form method="POST" accept-charset="utf-8" action="https://www.sandbox.paypal.com/xxx/xxx" name="pp" id="pp">
<input type="hidden" name="cmd" value="_xclick" class="validate">
<input type="hidden" name="business" value="name#yahoo.com" required="required">
<input type="hidden" name="currency_code" value="USD" required="required">
<input type="hidden" name="quantity" value="{{quantity}}" required="required">
<input type="hidden" name="amount" value="{{price}}" required="required">
<input type="hidden" name="return" value="http://localhost:1337" required="required">
<input type="hidden" name="cancel_return" value="http://localhost:1337/about" required="required">
<input type="hidden" name="notify_url" value="http://localhost:1337/api/order/summary" required="required">
</form>
insight my angular controller (as Im using angular:
$scope.paypalPay=function(){
$('#pp').get(0).submit()
};
I'm building a small search app using Elasticsearch and AngularJS. I'm using AngularJS UI bootstrap typeahead to implement autocomplete and I'm using ES's edge_n_grams and highlight object to 1) generate the suggestions and 2) highlight the suggestions, respectively. ES highlight object wraps the suggestions in HTML <em></em> tags... which seems to be causing some issues with how I have things setup.
1) When I press Enter key instead of clicking on the search button - all that happens is the search terms are displayed wrapped in the <em></em> tags AND no search is performed... <em>search terms</em>
2) When I select a suggestion with the mouse, same thing happens.
The only time search performs is when I type a query in and click the search button...
Here is the search form that I'm using, I have ng-submit="search()" on the form element and on the button, not sure where I'm going wrong......?
<form name="q" ng-submit="search()" class="navbar-form" id="results-search" role="search">
<div class="input-group">
<input type="text" name="q" ng-model="searchTerms" class="form-control input-md" placeholder="{{ searchTerms }}" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)">
<div class="input-group-btn">
<button type="submit" ng-submit="search()" class="btn btn-primary btn-md"><i class="fa fa-search fa-lg"></i></button>
</div>
</div>
</form>
Am I doing something wrong with the UI Bootstrap Typeahead?
More clarification
So basically what I'm asking is how do I get the tags stripped from the suggestions, on selection and for searching?
Similar kind of example already asked in Stackoverflow: Click here
I couldn't find any similar questions (most dealt with broken form posts) but this is not the case.
I have a paypal form that works flawlessly on desktop/laptop. On mobile devices I successfully get to paypal but there is nothing in the order summary, as if nothing got posted to paypal. A variable dump shows all form variables are in place, so I'm quite confused.
Here is the form I submit:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="myRegister">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="service#obscured.com">
<input type="hidden" name="item_name" value="Some description.">
<input type="hidden" name="amount" value="5.00">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-BuyNowBF">
<input type="hidden" name="item_number" value="1248" />
<input type="hidden" name="cbt" value="Click This Button To Register." />
<input type="hidden" name="return" value="http://mydomain/redirect.cfm" />
</form>
And that works on Desktop. I am just trying to get it work within a phone browser at the moment. I'll deal with the Paypal phone app at another time, if needed.
Any help appreciated.
Edit: This is also happening with PayPal hosted Buy It Now buttons as well.
Your code works fine for me on mobile, I can see the order details by tapping the "My total". The details are hidden at the first place though, I have to tap to make it show, seems it's designed this way
Within Android browser settings, clear setting for individual websites: Settings > Content Settings > Website Settings. Select paypal.com. Apparently there was a issue that was not resolved just by clearing the browser cache.
I have a two forms in my application.
In the first one the user sets his data. When submitted the form data gets checked and an entry is made into a database with $http.
The second one is hidden and contains the payment parameters for either paypal or amazon payments.
I need one of two solutions (I can do A but my gut feeling is that B is better):
A)
Trigger the submit function of form B when the promise of form A's http is resolved.
This would be one solution which is not very good I guess:
HTML
<form method="POST" action="{{spendenController.paypal.actionUrl}}" target="_top" id="paypalForm">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="{{spendenController.paypal.accountEmail}}">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="DE">
<input type="hidden" name="amount" value="{{spendenController.spenden.amount}}">
<input type="hidden" name="item_name" value="Spende">
<input type="hidden" name="notify_url" value="{{spendenController.paypal.notifyUrl}}">
<input type="hidden" name="return" value="{{spendenController.paypal.successRedirectUrl}}" />
<input type="image" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_donateCC_LG.gif" border="0" name="btnSubmit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>
Controller
document.getElementById('paypalForm').submit()
B)
Or load a page with POST params directly from the controller/a service when the promise is resolved. In that case I wouldn't even need the second form.
Question: How to open a page with POST from the controller?
I do not just want to send POST data with $http.post I need the user to see the paypal checkout window in order to fulfill the payment.
I am using the new Woocommerce bookings and would like the calendar to be displayed permanently, instead of having users click the "choose" option that then displays the text.
I am too much of a novice to display pictures in this foru, so here is the link instead.
I would like the bottom one to be displayed permanently.
The source code looks like this:
<fieldset class="wc-bookings-date-picker wc_bookings_field_start_date">
<legend>Start Date: <small>Choose...</small></legend>
<div class="picker" data-availability="[["days",{"6":true}],["days",{"4":true}],["time",{"from":"11:30","to":"13:30","rule":true,"day":0}]]" data-default-availability="false" data-fully-booked-days="{"2014-6-8":[true]}" data-min_date="+0d" data-max_date="+12m"></div>
<label>
<input type="text" value="2014" name="wc_bookings_field_start_date_year" placeholder="YYYY" size="4" class="required_for_calculation booking_date_year" />
<span>Year</span>
</label> / <label>
<input type="text" name="wc_bookings_field_start_date_month" placeholder="mm" size="2" class="required_for_calculation booking_date_month" />
<span>Month</span>
</label> / <label>
<input type="text" name="wc_bookings_field_start_date_day" placeholder="dd" size="2" class="required_for_calculation booking_date_day" />
<span>Day</span>
</label>
not sure if you figured this out yet or not, but Bookings now has a selection button to always show the Datepicker. Edit your Bookings product, and on the General tab, next to Calendar display mode select Calendar always visible from the drop-down menu. That should do it, no coding needed!