Open external link (HTTPS) with POST values inside Fancybox? - paypal

Is there a way to open external https urls, triggered on post submit and with post data inside Fancybox popups or similar?
I am talking about Paypal payments, for example. Clicking the "Buy Now" button, the PayPal website would open inside Fancybox and the data would be parsed using Ajax.
This would improve the user experience, IMHO...
I tried this solution, found in another thread but it does not work...
$("#payment_form").bind("submit", function() {
$.ajax({
type : "POST",
cache : false,
url : "https://www.paypal.com/XXX/XXX",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
<form id="payment_form"action="https://www.paypal.com/XXX/XXX" method="post">
<input type="hidden" name="yyy" value="xxxx">
<input type="hidden" name="yyy" value="xxxxxxxx">
<input class="gift-card" type="image" src="button.jpg" name="submit" alt="">
</form>

PayPal is actively enforcing the X-FRAME-OPTIONS:DENY response header, so I doubt this would work.
Note that I haven't tested it yet though, but PayPal actively discourages anyone from 'embedding' their site in any way, shape or form, so even if it works today, you can't guarantee it'll work tomorrow.

Related

PayPal ignoring "return" variable on PayPal Subscribe Button, even though "Auto return" option is enabled

PayPal is ignoring my return variable on PayPal Subscribe Button, even though "Auto return" option is enabled.
At first, I did not have the "Auto return" option enabled, and PayPal just showed a receipt page after the user subscribed, with no link back to our site, despite passing the return variable with our receipt page.
Then we enabled the "Auto return" option and was forced to enter some URL, so we created a generic page for PayPal to hit to verify the page exists, which I understand is required to enable the feature.
However, now users are able to subscribe and they see that awesome "If you are not redirected... in 10 seconds... click here" message, which takes the user to the static return page we setup in the "Auto return" settings, not the dynamic URL we passed to PayPal using the return variable.
Here's what our button code looks like:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="MYHOSTEDBUTTONID">
<input type="hidden" name="custom" value="MyCustomData">
<input type="hidden" name="return" value="https://www.example.com/secure/page/receipt?specialId=1234">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_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_US/i/scr/pixel.gif" width="1" height="1">
</form>
Did PayPal break this feature or am I doing something wrong?
For hosted buttons, the return doesn't belong there, it should be in the Advanced Variables section of step 3 of creating the button.
These HTML buttons are deprecated, they are from ~18 years ago and some new PayPal accounts can no longer create them (my understanding is all will not be able to create them soon enough.) The recommended integration method is a "Smart Subscribe" button, which uses JS and a client ID to identify the receiver account. To be notified of completed payments with a smart subscribe button, create a listener URL on your server for the webhook event PAYMENT.SALE.COMPLETED (that is the only subscription webhook event that is truly useful, all others are of limited utility). As for redirecting a Smart payer, if you need to do that you can add a window.location.href redirect from the onApprove function. Modern websites don't redirect unless they absolutely need to, consider using this function to display whatever message in the DOM w/o a redirect. But don't depend on sending data to a server from the client onApprove, as for whatever reason the client may never notify the server. The PAYMENT.SALE.COMPLETED webhook is the only reliable way to get notifications. For reconciliation, there is a similar custom_id variable available alongside the plan_id when creating the subscription in the createSubscription function.

Finding PayPal Buy Now Button redirection link

I am trying to make a program that can scrape a site and search for PayPal buy now button redirection links.
I can scrape the site but I realize that when you hit the button, it does not contain the URL that you will be redirected to make purchase. How would I go about finding the button redirection link, or even how would I have the site scrape and click on the button to at least have the redirect site appear? Would I somehow have to make the scraper hit the form and submit?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick" /><br />
<input name="hosted_button_id" type="hidden" value="PUEGWVJXLH4FQ" /><br />
<input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" type="image" /><br />
<img loading="lazy" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></form>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">_______________________________________________________</p>
</form>
Go to https://www.paypal.co/buttons, log in, and (after logging in) create a new simple Buy Now button with no dropdown options nor text fields (which require HTML) -- and once the button is created and you are viewing the generated code, switch over to the "E-mail" tab above it.
The link in that E-mail tab will have a hosted button ID, which you can swap out / use to dynamically generate the Buy Now "redirection link" you're asking for. When loaded in a browser, that link will initiate a checkout, same as clicking the button.
There are several other types of PayPal payment buttons, including:
Unhosted Buy Now buttons (which are not saved at PayPal, and do not have a hosted_button_id). These buttons use a redirection link or form post that will include HTML variables to set up the payment.
Newer smart buttons, generated via https://www.paypal.com/buttons/smart or similar -- these do not have redirection URL, and instead use JS to open a mini window for payment approval.
Another way to construct a working URL is to begin with the form's action parameter https://www.paypal.com/cgi-bin/webscr, add ? to begin a GET string, and add all the inputs from the form that have a name, in with the syntax name=value, separated by '&' .... so for example:
https://www.paypal.com/cgi-bin/webscr?hosted_button_id=PUEGWVJXLH4FQ&anothername=anothervalue&...

Embedded payments and 'This function is temporarily unavailable' error

I am trying to implement Embedded chained payments.
I have downloaded PHP PayPal SDK and it works fine without embedded option. The problem comes when I try to do it embedded:
I get my payKey with sdk. It returns something like:
Pay - Response
responseEnvelope.timestamp: 2012-09-30T16:30:09.512-07:00
responseEnvelope.ack: Success
responseEnvelope.correlationId: 297f1e4a38b63
responseEnvelope.build: 3779320
payKey: AP-9EB01133M3012281Y
paymentExecStatus: CREATED
* Redirect URL to Complete Payment
(href of the link: https://www.sandbox.paypal.com/webscr&cmd=_ap-payment&paykey=AP-9EB01133M3012281Y)
Then, I copy the paykey (AP-9EB01133M3012281Y) and I paste on this html code:
<script type="text/javascript" src="https://www.paypalobjects.com/js/external/dg.js"></script>
<form action= "https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame">
<input id="type" type="hidden" name="expType" value="light"></input>
<input id="paykey" type="hidden" name="paykey" value="AP-3GH99339RW1696440"> </input>
<button id="submitBtn" value="Pay with PayPal"><p style="font-size:20px">Pay</button>
</form>
<script>var dgFlow = new PAYPAL.apps.DGFlow({ trigger: 'submitBtn' });</script>
When I click the button, the iframe is shown right, but an error appears: "Transaction Cancelled. This function is temporarily unavailable".
If I click the cancel button, I am redirect correctly to my sdk page (the same if I wouldn't have do it embedded)
I am using sandbox.
Not setting the senderEmail when you create the PayRequest message should resolve the issue. It seems the PayPal embedded flow requires the buyer/sender to insert his/her email manually on PayPal.

Add multiple items to Paypal in single form using hosted_button_id

I want to setup a single form on a site to purchase multiple products via PayPal. The products are set in the PayPal account and each has a hosted_button_id.
The form would contain a series of descriptions and quantity fields, all initially set to zero. The customer could then add desired quantities against each product and submit the form with a single 'Buy now' button.
Is this possible with PayPal? I don't particularly want a 'cart' experience and I don't want to pass product prices (instead using the data stored at PayPal).
thanks
In the end I concluded you can't do this.
I tried everything, including AJAXing the submission and send the submission via a hidden iFrame to keep the user on my site. Nothing worked. It seems PayPal are very keen to enforce their approved shopping workflow when using their cart.
You can do this, but you'll need to do some server-side programming. You build an "encrypted button" programmatically, and submit that to PayPal.
My store page at https://secure.entrian.com/store/store.html does it - it prompts for some information, sends that to the server to be turned into an encrypted button, and then submits that to PayPal.
The JavaScript looks like this, where $license_name and $quantity are the fields that I'm prompting for, and formgen.py is a server-side Python script that builds and signs the request using OpenSSL according to PayPal's documentation:
$paypal_form.submit(function () {
var response = $.ajax({
type: "GET",
url: 'formgen.py?' + serialize({
licenseName: $license_name.val(),
quantity: $quantity.val()
}),
async: false
}).responseText;
if (response.indexOf('PKCS7') >= 0) {
$encrypted.val(response);
} else {
$payment_errors.text(response).show(easing_duration);
return false;
}
return true;
}
The form looks like this (simplified rather):
<form id="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="upload" value="1">
<input type="hidden" id="encrypted" name="encrypted" value="">
<button id="buynow" class="submit-button btn" type="submit">Buy Now</button>
</form>
That <input name="encrypted" ...> gets populated with the AJAX response before the form gets submitted to PayPal.

Trying to load an offsite page in Fancybox lightbox on form submit

I'm attempting to load a lightbox (via Fancybox) on submission of a mailing list sign-up form. The sign-up form action loads an off-site link to Constant Contact when a form is submitted. Normally, this page is loaded in a standard pop-up, which does work just fine.
But, because folks often have pop-ups blocked, we're trying to spiff it up with a lightbox.
So here's the rub: when I submit the form, it loads the lightbox, but won't load the page in the lightbox. I suspect this is because it's not passing the information through to the iframe/lightbox and it's likely because I don't have it set up properly. I'm hoping someone can help, as I'm not totally that versed in jquery yet. I may not even need to use iframe, I'm not sure.
I did find this reference to passing the information via ajax, but I'm not totally clear on how that works. I also found this similar post, but it's not really clear how they resolved it.
Here is my code, perhaps you can help? :) I'd appreciate it.
$(document).ready(function() {
$("#iframe").fancybox({
'hideOnContentClick': true,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
});
});
Here is the form:
<form name="ccoptin" id="signup" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post">
<input type="hidden" name="llr" value="yyyyyy">
<input type="hidden" name="m" value="xxxxxx">
<input type="hidden" name="p" value="oi">
<label>sign up for new services and promotions:</label>
<input type="text"name="ea" value="" class="text" /> <input type="submit" id="iframe" class="submit" name="go" value="submit" />
</form>
I appreciate your input and please bear with me, as I am a relative jquery/ajax newb.
Thank you!