Widget FAQ

COPYandPAY 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 COPYandPAY 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. COPYandPAY gracefully handles these multiple brands per checkout session.

Does COPYandPAY support 3D Secure?

Yes, the COPYandPAY 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://sandbox-card.peachpayments.com/".

Does COPYandPAY support responsive Webdesign?

Yes, COPYandPAY on OPP is supporting responsive design

Which browsers are supported by COPYandPAY?

Please see supported browsers page for more information.

Could COPYandPAY be used as a stand-alone widget?

Yes, and multiple clients are using it that way

Why should I use COPYandPAY and not my own forms?

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

-COPYandPAY 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.

COPYandPAY looks nice and simple, but I've got my own shop designs. How can I adapt COPYandPAY 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 COPYandPAY 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 COPYandPAY 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 COPYandPAY?

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

How do I add CSP for COPYandPAY ?

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

For UAT testing, use following domain name: https://sandbox-card.peachpayments.com.

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" 
              content="
                       style-src 'self' https://card.peachpayments.com 'unsafe-inline' ;
                       frame-src 'self' https://card.peachpayments.com;
                       script-src 'self' https://card.peachpayments.com 'nonce-${NONCE_ID}' ;
                       connect-src 'self' https://card.peachpayments.com;
                       img-src 'self' https://card.peachpayments.com;
                       ">
                       
        <script src="https://card.peachpayments.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, COPYandPAY 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 COPYandPAY:

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" 
              content="
                       style-src 'self' https://card.peachpayments.com 'unsafe-inline' ;
                       frame-src 'self' https://card.peachpayments.com https://*.paypal.com;
                       script-src 'self' https://card.peachpayments.com https://*.paypal.com 'nonce-${NONCE_ID}' ;
                       connect-src 'self' https://card.peachpayments.com https://*.paypal.com;
                       img-src 'self' https://card.peachpayments.com  https://*.paypal.com https://*.paypalobjects.com;
                       ">
                       
        <script src="https://card.peachpayments.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>