Customize a Payment Wall


To customize the configuration of your internal or external payment button within the iframe on your payment wall, you can use the PayPal PLUS JavaScript library on a PayPal PLUS Payment Selection Page (PSP).

  1. To define the API, load the pppluslibrary. The library attaches itself to the application as the PAYPAL.apps object as PAYPAL.apps.PPP.

    var ppp = PAYPAL.apps.PPP(config)

    This operation accepts a configuration object and returns an instance of the PSP.

  2. When the user clicks Continue or the library handles the checkout event, invoke the ppp.doContinue function.
  3. Set the following parameters in the configuration object to render the PSP.

    |`approval_url`|String|Required. The `approval_url` returned by the create payment call.|
    |`placeholder`|String|Required. The ID of the DOM object where the PSP is mounted in the page. The PSP sets the object's width.|
    |`country`|ISO 3166-1 alpha-2| Required. The country where the PayPal PLUS service is deployed, for example, `FR`, `GB`, `DE`, or `US` which is the default. Get the country code from the buyer's billing address.|
    |`buttonLocation`|`enum`| Optional. <ul><li><code>outside</code>. Does not render the checkout button in the PayPal PLUS payment wall. To redirect, you must attach the <code>doCheckout</code> function to an external button and call <a href="/docs/paypal-plus/germany/how-to/optional-params-for-configuration-object/"><code>enableContinue</code></a>.</li><li><p><code>inside</code>. Renders the checkout button in the PayPal PLUS payment wall.</p><blockquote><strong>Important:</strong> Use of this parameter also requires that you include the <a href="/docs/paypal-plus/germany/how-to/optional-params-for-configuration-object/"><code>onContinue</code> parameter</a> to define the next page or action to which the user is sent.</blockquote></li></ul>|
    > **Note:** For additional optional parameters, see

    Optional Parameters for Configuration Object.

  4. For an internal payment button, see update your payment resource. For an external payment button, complete the following external button configuration steps.

Additional external button configuration

When the user clicks Continue, they are redirected to the page in the attached function.

  • doContinue. The configured URL, which enables additional pages between the selection and checkout pages. To use this configuration option, add the onContinue function to the configuration object of the PayPal PLUS library.

    onContinue: function () {
    window.location = "nextpage.php";
  • doCheckout. The PayPal hosted pages.

For external buttons:

  1. Add the following script to your external Continue button. On id, replace continueButton with your button ID:

    onclick="ppp.doContinue(); return false;"> Checkout
  2. On the nextpage.php, load the PayPal PLUS library and add the checkout function to the button.

    PayPal PLUS Checkout Now


Update your payment resource.