PayPal embedded: how to launch the lightbox from JavaScript

Hey there,

i'd like to integrate PayPal's DigitalGoods flow for my micropayments. I've already managed to integrate the standard flow for Adaptive Payments with opening a new window, but now I have to integrate the embedded flow using the lightbox.

I haven't worked with JavaScript yet, so I have some troubles with it. Paypal integration guide says:

1. Create your form or button.
   • You must include the pay key and redirect to https://www.paypal.com/webapps/adaptivepayment/flow/pay.
   • 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 IFRAME, PPDGFrame.
   • 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=  "https://www.paypal.com/webapps/adaptivepayment/flow/pay"  target="PPDGFrame">  <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>  

   Note: To modify an existing application to use the embedded payment flow, change the redirect from https://www.paypal.com/cgi-bin/webscr?cmd=_ap-payment&paykey=... to https://www.paypal.com/webapps/adaptivepayment/flow/pay? paykey=... after obtaining the pay key.

2. Include the PayPal JavaScript functions from dg.js.

   <script src="https://www.paypalobjects.com/js/external/dg.js">  </script>  

3. Create an embedded flow object and associate it with your payment form or button.

   <script>  var dgFlow = new PAYPAL.apps.DGFlow({ trigger: 'submitBtn' });  </script>

I've done it that way:

1 created a FormPanel with two "Hidden" widgets and one SubmitButton 

public class PayPalLightbox extends FormPanel{

VerticalPanel vert = new VerticalPanel();

public PayPalLightbox(String authUrl, String payKey){

super("PPDGFrame");

   setAction(authUrl + "?paykey=" + payKey);

   setWidget(vert);

   Hidden expTypeField = new Hidden("expType", "light");

   vert.add(expTypeField);

   Hidden payKeyField = new Hidden("paykey", payKey);  

   vert.add(payKeyField);  

   SubmitButton submitBtn = new SubmitButton("submitBtn");

   submitBtn.setVisible(false);

   vert.add(submitBtn);

   

}

2. Added <script src="https://www.paypalobjects.com/js/external/dg.js" </script> to my project.html

3. Created in PayPalLightbox class the method:  private native void showLightbox() /*-{

var dgFlow = new $wnd.PAYPAL.apps.DGFlow({

trigger: "submitBtn" 

});

}-*/;

and called it:

(...) ppLB= new PaypalLightBox(...)

ppLB.showLightbox()

that causes following error when calling showLightbox:

com.google.gwt.core.client.JavaScriptException: (TypeError) @com.google.gwt.core.client.impl.Impl::apply(Ljava/lang/Object;Ljava/lang/Object;Ljava/lang/Object;)([JavaScript object(37782), JavaScript object(37674), JavaScript object(37785)]): Cannot read property 'apps' of undefined

I've searched groups how to deal with it the whole day, but didn't found a soulution yet. Any help would be greatly appreciated.

Thanks in advance!

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.