PayPal: Invoke the Embedded Payment Flow Using a Lightbox

PayPal: Invoke the Embedded Payment Flow Using a Lightbox

I've managed to implement PayPal Adaptive Payments Parallel Payment processing into my app (many thanks Ricardo's ardoHTTP and ardoJSON extensions) and once I have returned the "payKey" I am able to call the standard PayPal payments page with an ExternalURL pointing to ""+payKey.

What I would like to try now is using the "Embedded Payment Flow Using a Lightbox" as per the experpt below (see full details near the bottom of this page). After my 'Pay Now" button calls my "PayPal_ParallelPayment " action to set up the payment and return the payKey I'm just not sure how to implement the instructions in this section.  I'm thinking I'll call a HTTPPost action to do Step 2 but I'm really not sure what to do after that with the javascript calls...

Hoping someone can help.

Happy to share any of this code once I have it working.


Setting Up Web Pages to Invoke the Embedded Payment Flow Using a Lightbox

Use the JavaScript functions in to set up and control the embedded payment flow. This example shows how to initiate the embedded payment flow after obtaining a payment key.

This example assumes that you obtain a payment key before initiating the flow and that the key does not change or expire before the sender completes the flow.

To set up a web page to invoke the embedded payment flow:

  1. Call the Pay API operation to obtain a valid pay key.
  2. Create your form or button.
    • You must include the pay key and redirect to

    • Optionally, include a preapproval key if you want to enable the selection of Preapproval for future payments

    • Specify that a lightbox opens in the PayPal-created IFRAMEPPDGFrame.

    • Set the expType parameter to indicate your preference for the context in which the PayPal payment flow is displayed. You must specify light for lightbox.

    <form action= 
    		<input id="type" type="hidden" name="expType" value="light"> 
    		<input id="paykey" type="hidden" name="paykey" value="AP-..."> 		<input id="preapprovalkey" 				type="hidden" name="preapprovalkey" value="PA-..."> 		<input type="submit" id="submitBtn" value="Pay with PayPal"> 	</form>

    To modify an existing application to use the embedded payment flow, change the redirect from to                               paykey=... after obtaining the pay key.

  3. Include the PayPal JavaScript functions from dg.js.
    <script src=""> 
  4. Create an embedded flow object and associate it with your payment form or button.
    	var dgFlow = new PAYPAL.apps.DGFlow({ trigger: 'submitBtn' }); 

On the pages you identify as the return and cancel URLs in the Pay API operation, you must include the PayPal JavaScript functions fromdg.js and close the PayPal window, as in the following example:

dgFlow = top.dgFlow ||;