CODEWITHSUNDEEP
phppaypalexpress-checkout
zorrotmm
zorrotmm

Reputation: 527

Express Checkout In-Context integration for Paypal

So, I have PayPal's express checkout system basically working, thanks to the following guide:

http://www.sanwebe.com/2012/07/paypal-expresscheckout-with-php

But now I would like to integrate the in-context experience, 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'm supposed to take:

1. Update your redirect URL to: https://www.paypal.com/checkoutnow/

What do they mean by redirect url? Is this the return or cancel url? both? neither? The API endpoint maybe? There is no context for what I'm supposed to be replacing or where.

  1. I need to add the following code on 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 is action="/checkout" supposed to be? It doesn't work by itself, so what am I ACTUALLY supposed to put in there? A URL? Is this supposed to be a file on my server? If so, what do I need to do in that file? WHAT DOES IT WANT?

I guess those are the main problems I'm having so far. I'm just amazed that there's so little information out there on how to actually set this up.

Upvotes: 3

Views: 2881

Answers (2)

pp_pduan
pp_pduan

Reputation: 3402

Try this on your existing Express Checkout codes, literally there's nothing you would need to tamper or modify, so that this is a purly "Front-end" change

  1. Reference JavaScript in your 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>

  1. Replace your PayPal checkout button tag with this, no change needed on the 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 a little bit different from the instructions on the developer.paypal.com, as an alternative workaround to save the hassle but wouldn't be recommended solution

Upvotes: 2

EdSF
EdSF

Reputation: 12351

In-Context pretty much is more "front end" changes at the end of the day (to your existing "redirect" Express Checkout integration). So, that said:

The "redirect" they are referring to is the URL of Paypal where you are currently redirecting to after obtaining the ec token

  • this sample is probably better as you can see it being used (line 51)
    var url = paypal.checkout.urlPrefix +token;

  • as shown, the token you obtain (just like you currently do) is appended to the "new redirect url" - if you check your browser console for that paypal.checkout.urlPrefix variable, you'll see it's value is that "new redirect url" (sandbox):
    https://www.sandbox.paypal.com/checkoutnow?token=

  • so /checkout is just a sample showing you how you would probably call your (existing) backend EC implementation that obtains the EC token, at which point, instead of doing an HTTP redirect yourself, you pass it to the front end so it can be handled by the In-Context flow.

Hth...

Upvotes: 3

Related Questions