Express check In-Context integration for Paypal
So, I have a PayPal express payment system mostly working thanks to the following tutorial:
http://www.sanwebe.com/2012/07/paypal-expresscheckout-with-php
But now I would like to integrate the experience within the context, but once again the documentation is completely useless:
https://developer.paypal.com/docs/classic/express-checkout/in-context/integration/
So, I'll break down the questions I have based on the steps I have to take:
1. Update your redirect URL to: https://www.paypal.com/checkoutnow/
What do they mean by redirection? Is this a return or cancellation link? both? no? Possibly an API endpoint? There is no context for what I should replace or where.
-
I need to add the following code to my site:
<form id="myContainer" method="post" action="/checkout"></form>
<script> window.paypalCheckoutReady = function () { paypal.checkout.setup('<Your-Merchant-ID>', { environment: 'sandbox', container: 'myContainer' }); }; </script> <script src="//www.paypalobjects.com/api/checkout.js" async></script>
Fair enough. But what should action = "/ checkout" be? It doesn't work on its own, so how am I really supposed to get there? URL? Is this supposed to be a file on my server? If so, what do I need to do in this file? WHAT DOES THIS WANT?
I think these are the main problems that I have so far. I'm just surprised that there is so little information out there on how to do this.
In-Context is pretty much a more "forward" change at the end of the day (to your existing "redirect" Express Checkout integration). So that said:
The "redirect" they link to is the Paypal url you are now redirecting to after receiving ec token
-
this example is probably better as you can see it is being used (line 51)
var url = paypal.checkout.urlPrefix +token;
-
as shown,
token
which you are getting (as currently) is appended to the "new redirect url" - if you check your browser console for this variablepaypal.checkout.urlPrefix
, you see its value is that the "new redirect url" ( sandbox):https://www.sandbox.paypal.com/checkoutnow?token=
-
so
/checkout
- this is just a sample showing you how you are likely to call your (existing) backend EC implementation that receives the ECtoken
, at this point instead of doing the HTTP redirect yourself, you traverse this to the front end so that it could be handled by an In-Context thread.
Hth ...
Try this on existing express check codes, literally there you won't need to fake or change anything, so this is a pure "Front-end" change
- JavaScript link on checkout page
<script>
(function(d, s, id) {
var js, ref = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.async = true;
js.src = "//www.paypalobjects.com/js/external/paypal.v1.js";
ref.parentNode.insertBefore(js, ref);
}
}(document, "script", "paypal-js"));
</script>
- Replace PayPal checkout button tag with this, no changes needed for form action parameter
<input type="image" data-paypal-button="true" data-paypal-sandbox="true" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/checkout-logo-large.png" alt="Check out with PayPal" />
This is slightly different from the instructions on developer.paypal.com, as an alternative solution for persisting problems, but not recommended.