Integrate Payment Selection Page

For PayPal Plus for Brazil, see the Brazilian integration guide.

To collect payment information, you must integrate a payment selection page by using an embedded iFrame or mini browser.

Embed an iFrame

You can display the payment selection page in an iFrame where buyers enter their credit card information. To render it, you must complete the following tasks.

1. Include the JavaScript library on your checkout page using the following script:

   1<script src="https://www.paypalobjects.com/webstatic/ppplusdcc/ppplusdcc.min.js" type="text/javascript">
   2</script>

2. Define a placeholder DIV on your checkout page for the payment selection page:

   1<div id="ppplus">
   2</div>

3. Render the payment selection page using the following script. Include the approval_url returned from the previously issued request to create a payment.

   1<script type="application/javascript">
   2var ppp = PAYPAL.apps.PPP({
   3"approvalUrl": "'.$approval_url.'",
   4    "placeholder": "ppplus",
   5    "mode": "sandbox",});
   6</script>

4. Create an external Continue button by setting the following parameters in the script to render the payment selection page:

   • disableContinue: "continueButton"
   • enableContinue: "continueButton"

   When the external Continue button is pressed, a response object that contains the payer’s ID, the rememberedCards token, and the installment selection is posted to the checkout page if execution of payment can proceed. If payment execution cannot proceed, an error is displayed.

   Add the following script to your external Continue button:

   1<button>
   2type="submit"
   3id="continueButton"
   4onclick="ppp.doContinue(); return false;"> Checkout
   5</button>

   The following sample client-side JavaScript handles the response object that is posted when the external Continue button is pressed.

   1// Register postMessage Listener for the iframe.
   2if (window.addEventListener) {
   3window.addEventListener("message", messageListener, false);
   4log("addEventListener successful", "debug");
   5} else if (window.attachEvent) {
   6window.attachEvent("onmessage", messageListener);
   7log("attachEvent successful", "debug");
   8} else {
   9log("Could not attach message listener", "debug");
   10throw new Error("Can't attach message listener");
   11}
   12
   13function messageListener(event) {
   14    try {
   15        //this is how we extract the message from the incoming events, data format should look like {"action":"inlineCheckout","checkoutSession":"error","result":"missing data in the credit card form"}
   16        var data = JSON.parse(event.data);
   17        //insert logic here to handle success events or errors, if any
   18    }
   19    } catch (exc) {}
   20}

Display mini browser

You can display the payment selection page in a mini browser where buyers enter their credit card information. A button is required to open the mini browser without the browser’s pop-up blocker blocking it. To render it, you must complete the following tasks.

1. Use this script to include the JavaScript library on your checkout page.

   1<script src="https://www.paypalobjects.com/webstatic/ppplusdcc/ppplusdcc.min.js" type="text/javascript"></script>

2. Render the payment selection page using the following script and example button. Include the ‘approval_url’ returned from the previously issued request to create a payment.

   1<script language="JavaScript">
   2function initiateCheckout() {
   3var ppp = PAYPAL.apps.PPP({
   4    "approvalUrl": "'.$approval_url.'",
   5    "placeholder": "ppplus",
   6    "mode": "sandbox",});
   7}
   8</script>
   9<button type="submit" id="miniBrowserInitiateCheckout"
   10class="btn btn-lg btn-primary btn-block"
   11onclick=" initiateCheckout(); return false;">
   12Checkout
   13</button>

Payment selection page components

The components in the previous examples enable integration of and later launch the payment selection page.

PayPal Plus JavaScript library

Loading the ppplusdcc.min.js JavaScript library creates a new object called PAYPAL.apps.PPP. The PPP object defines the API.

PayPal Plus API

To use the PayPal Plus API, send the PPP object with the required parameters in your request.

Sample payment selection pages

These examples show how the payment selection page may look after your integration and configuration is complete:

Next

• Optional: Update the payment selection page
• Optional: Populate an order review page
• Required: Test your integration and execute the payment