Widget FAQ

PIPE FAQ

How long is the checkout.id valid for?

The checkout.id expires after 30 minutes.

What happens when a popup is closed?

Some methods of payment on PIPE enable checkout in a popup/lightbox. When the popup is shown it is possible to checkout or to close it. In the case where the popup is closed, it is possible for the shopper to continue their checkout with another method of payment, e.g. to choose Masterpass, change their mind, close the popup and then checkout with, say, a credit card. PIPE gracefully handles these multiple brands per checkout session.

Does PIPE support 3D Secure?

Yes, the PIPE payment forms has 3D Secure built in. To activate 3D Secure, the channel needs to be configured and an enrolled card entered. Please refer to the 3-D Secure 2.x Guide for more details.

What languages are supported on the payment form?

By default there are 25: en, de, fr, es, it, nl, dk, fi, se, tr, ja, sl, pt, pl, cz, hu, bg, ro, ru, cn, gr, no, sk, ar, ko. But it is possible to change the text value of the labels to anything you choose using the wpwlOptions API.

What is Active Payment Method Selection (APMS)?

Active Payment Method Selection allows you to dynamically offer different payment brands based on each individual shopper's risk profile. With this integration you can: -Offer the perfect mix of local payment methods
-Steer the payment selection actively and in real time during the checkout
-Optimize risk management to each shop‘s business requirements

What happens if a shopper closes their browser?

If a shopper closes their browser after selecting the payment method but before actually executing the payment, it can cause reconciliation issues as your platform would never receive the final status of the payment. For this reason we automatically call the shopperResultUrl if it has not been called after 29 minutes. This way your platform can request the final status, being notified that the payment was not processed. A notification will be sent from the gateway to the shop to trigger the get status before the checkout id times out, but only after "pay now" button is clicked in the payment widget.

Technically, if POST /checkouts/{id}/payment was called and GET /checkouts/{id}/payment was not called, OPP sends a GET request to the shopperResultUrl with a resourcePath parameter, suggesting the merchant to call GET /checkouts/{id}/payment. The same applies to /checkouts/{id}/registration.

IMPORTANT: The baseUrl must end in a "/", e.g. "https://test.planetpaymentgateway.com/".

Does PIPE support responsive Webdesign?

Yes, PIPE on OPP is supporting responsive design

Which browsers are supported by PIPE?

Please see supported browsers page for more information.

Could PIPE be used as a stand-alone widget?

Yes, and multiple clients are using it that way

Why should I use PIPE and not my own forms?

-PIPE was the first certified PCI 3 SAQ-A compliant payment form solution available in the market. Please find further information at /support-pci

-PIPE offers a huge variety of versatile features. While being very easy to integrate on a webpage with only two code lines various use-cases are available and supported at the same time. Please find further information at Customization Guide and Advanced Options.

PIPE looks nice and simple, but I've got my own shop designs. How can I adapt PIPE to my design?

Just have a look at the Customization Guide. This features an interactive editor where you can try out any styles from the style reference on the same page.

Input fields in the widget generate their own HTML form tag

The PIPE widget might load within an existing form tag (checkout), which is then no longer valid HTML code. Therefore the fields will not be submitted. Make sure to remove the extra widget and payment via credit card should be working.

How can I validate the cardholder's name?

This can be done using the below java script in PIPE customization. The java script does the validation but it is not connected to any setup in BIP.

var wpwlOptions = { 
style:"card", 
onBeforeSubmitCard: function(e){ 
var holder = $('.wpwl-control-cardHolder').val(); 
if (holder.trim().length < 2){ 
$('.wpwl-control-cardHolder').addClass('wpwl-has-error').after('<div class="wpwl-hint wpwl-hint-cardHolderError">Invalid card holder</div>'); 
return false; 
} 
return true; 
} 
} 

My payment form needs additional information. How can I add my own text, messages and fields to PIPE?

Just have a look at the Advanced Options Guide. This features an interactive editor where you can find examples of typical extensions of PIPE. Use these as a starting point and extend it using the API Reference.

How do I add CSP for PIPE ?

The following is an example of the minimum required CSP for PIPE for production.

For UAT testing, use following domain name: https://test.planetpaymentgateway.com.

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" 
              content="
                       style-src 'self' https://planetpaymentgateway.com 'unsafe-inline' ;
                       frame-src 'self' https://planetpaymentgateway.com;
                       script-src 'self' https://planetpaymentgateway.com 'nonce-${NONCE_ID}' ;
                       connect-src 'self' https://planetpaymentgateway.com;
                       img-src 'self' https://planetpaymentgateway.com;
                       ">
                       
        <script src="https://planetpaymentgateway.com/v1/paymentWidgets.js?checkoutId=${CHECKOUT_ID}"></script>
        <script nonce="${NONCE_ID}">
            var wpwlOptions = {
                style:"card",
            }
        </script>
    </head>
    <body>
        <form action="${SHOPPER_RESULT_URL}"
              data-brands="VISA MASTER"
        ></form>
    </body>
</html> 

Please not that, in case the payment method provides an inline integration (e.g. no redirect), to work properly, PIPE might require additional resources to be loaded on the page. In that case, in addition to the ones reported above, further domains may be required.

As an example, below is the CSP header to load properly PayPal inline integration via PIPE:

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" 
              content="
                       style-src 'self' https://planetpaymentgateway.com 'unsafe-inline' ;
                       frame-src 'self' https://planetpaymentgateway.com https://*.paypal.com;
                       script-src 'self' https://planetpaymentgateway.com https://*.paypal.com 'nonce-${NONCE_ID}' ;
                       connect-src 'self' https://planetpaymentgateway.com https://*.paypal.com;
                       img-src 'self' https://planetpaymentgateway.com  https://*.paypal.com https://*.paypalobjects.com;
                       ">
                       
        <script src="https://planetpaymentgateway.com/v1/paymentWidgets.js?checkoutId=${CHECKOUT_ID}"></script>
        <script nonce="${NONCE_ID}">
            var wpwlOptions = {
                inlineFlow: ['PAYPAL'],
                style:"card",
            }
        </script>
    </head>
    <body>
        <form action="${SHOPPER_RESULT_URL}"
              data-brands="VISA MASTER PAYPAL"
        ></form>
    </body>
</html>