Configuration for PayPal

PayPal Sandbox test account

If

Process flow

PayPal process flow

Configuration for PayPal

PayPal Sandbox test account

If you prefer to test the integration before going Live, and you do not have PayPal Sandbox test account, you should create PayPal Sandbox test account as first step.

1. Login to https://developer.paypal.com/ and go to "Testing Tools" => "Sandbox Accounts"

2. Click "Create account" and choose "Business (Merchant Account)" & Germany as "Country / Region".

3. Choose "View/Edit account"

4. Take "Email ID" and "System Generated Password" and use them as Login/Pass for Sandbox on the next step.

Grant permissions to

Multiexcerpt include
SpaceWithExcerpt EN MultiExcerptName Platform-Name PageWithExcerpt Wording

for transaction processing

In order to allow

Permissions can be granted to

<br/>
<script type="text/javascript">
    function sh() {
        alert('Failed to acquire paypal registration link, please contact customer support or try again later.')
    }
  
    function getPPRegUrl(merchId,dataKey,dataLen) {
        const request = new XMLHttpRequest();
        request.open('GET', 'https://www.computop-paygate.com/ExternalServices/paypalorders.aspx?MerchantID='+merchId+'&Len='+dataLen+'&Data='+dataKey, false);
        request.send(null);
        if (request.status === 200) {
            console.log(request.responseText);
            try {
                return request.responseText.split('&').filter(p=>p.startsWith('paypalurl')).map(pv=>pv.substring(pv.indexOf('=')+1))[0]
            } catch (ex) {
                console.log("Unable to extract PP Url");
                sh()
            }
        } else {
            sh()
        }
        return ""
    }

     (function(d, s, id) {
      var js, ref = d.getElementsByTagName(s)[0];
      if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.async = true;
        js.src = "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js";
        ref.parentNode.insertBefore(js, ref);
      }

    }(document, "script", "paypal-js"));

</script> 
 <div dir="ltr" style="text-align: center;" trbidi="on">
  <a id="paypal-reg-button-sb" data-paypal-button="true" href="<Action-URL>&displayMode=minibrowser" target="PPFrame"><h3>Sign up for PayPal Sandbox</h3></a>
  <script type="text/javascript">
    
    function setUrlSB(e) {
        const newUrl = getPPRegUrl('BNPP_PayPal_Onboarding_Sandbox','DE828057708D7DB5ECFF134EB1E455E7012D09DCE955159782378DD13D643C6150D5B0C4757B15803A0CD02718C53A5BB4AD7E04C6D3F3D482378DD13D643C61F5F9688C96A90922DFDC812DAFC2436722014CB179C027FF0F352C8C5E065E89A7615F0DDFB0A217F5A8D0B5D7753657','109')
        if (newUrl) {
            const elm = e.currentTarget
            if (elm) {
                elm.setAttribute("href", "<Action-URL>&displayMode=minibrowser".replace("<Action-URL>", newUrl))
                return true
            }
        }
        if (!e) e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
        return false
    }

    const ppLinkSB = document.getElementById("paypal-reg-button-sb")
    if (typeof window.addEventListener != "undefined") {
        ppLinkSB.addEventListener("click",setUrlSB);
    } else {
        ppLinkSB.attachEvent("onclick",setUrlSB);
    }

  </script>
</div> <br/>
<div dir="ltr" style="text-align: center;" trbidi="on">
  <a id="paypal-reg-button-prod" data-paypal-button="true" href="<Action-URL>&displayMode=minibrowser" target="PPFrame"><h3>Sign up for PayPal Production</h3></a>
  <script type="text/javascript">
    
    function setUrlProd(e) {
        const newUrl = getPPRegUrl('BNPP_PayPal_Onboarding_Prod','372A023346EE99D1B356C84A5C30103BFA009B4CABD722887774741F5E3FEA2DBAB004F3C4F523EC549FDB4564547BCEA8F5EB2EB5060428B064C5C90F987295F102EEC01BB9A1D264B643140D035FA12FC1006BB3D7C15BAE719B9E09D33CFA1F7D7725A2B6F51D78098AAD8FEB8D08','106')
        if (newUrl) {
            const elm = e.currentTarget
            if (elm) {
                elm.setAttribute("href", "<Action-URL>&displayMode=minibrowser".replace("<Action-URL>", newUrl))
                return true
            }
        }
        if (!e) e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
        return false
    }

    const ppLinkProd = document.getElementById("paypal-reg-button-prod")
    if (typeof window.addEventListener != "undefined") {
        ppLinkProd.addEventListener("click",setUrlProd);
    } else {
        ppLinkProd.attachEvent("onclick",setUrlProd);
    }

  </script>
</div>

Send PayerID to

Multiexcerpt include
SpaceWithExcerpt EN MultiExcerptName Partner-Name PageWithExcerpt Wording

Merchant Services

To complete merchant setup on

PayPal Sandbox

1. Login to https://developer.paypal.com/dashboard and go to "Testing tools" --> "Sandbox Accounts".

Image Removed

2. Select the appropriate Sandbox merchant account and notify Merchant Services about "Account ID".

Image Removed

PayPal Production

PayerID can be found under your PayPal account by https://paypal.com/myaccount/settings/ , as follows. PayerID uniquely identifies merchant in PayPal.

Image Removed

PayPal Smart Button

There are two ways for integration of PayPal V2 via

Multiexcerpt include
SpaceWithExcerpt EN MultiExcerptName Partner-Name PageWithExcerpt Wording

JavaScript module

The

• The module provides quick installation, using one command 
• Configuration is done in one place 
• Suitable for all platforms which support JS

For the module and the installation instruction please refer to Readme.

Setting up the PayPal Button

The client-side implementation of PayPal is realized using the PayPal JavaScript SDK.

Depending on your setup, you can use the following script or prepare you own, using the official PayPal JavaScript SDK documentation https://developer.paypal.com/sdk/js/reference/#link-buttons.

Image Removed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
 
<body>
    <!-- Set up a container element for the button -->
    <div id="paypal-button-container"></div>
 
    <!-- Include the PayPal JavaScript SDK -->
    <!-- While you are testing in sandbox, you can use client-id that matches your test app from PayPal web developer portal. When going live, replace this with the live client-id provided by Paypal --> 
    <script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=myClientID&currency=EUR&disable-funding=giropay,sofort,sepa,card&intent=capture"></script>
     
    <!-- Initialize and show PayPal button -->
    <script type="text/javascript">
    let mid = "YOUR MERCHANTID";
    let len = "LEN OF UNENCRYPTED BLOWFISH STRING";
    let data = "BLOWFISH ENCRYPTED STRING";
 	let payid;
     
        if (len != '' && data != '') {
            // Set the request parameter MerchantID, Len and Data
            const params = new URLSearchParams({
                MerchantID: mid,
                Len: len,
                Data: data
            });
 
            // Render the PayPal button into #paypal-button-container
            paypal.Buttons({
                // Call your server to set up the transaction
                createOrder: function(data, actions) {
                    return fetch('https://paymentpage.axepta.bnpparibas/ExternalServices/paypalorders.aspx', {
                        method: 'POST',
                        body: params
                    }).then(function (res) {
                        return res.text();
                    }).then(function(orderData) {
                        var json = stringToObj(orderData);
						 	payid = json.PayID;
                        return json.orderid;
                    });
                },
                // Call cbPayPal.aspx for continue sequence
                onApprove: function (data, actions) {
                    var rd = "MerchantId=" + mid + "&PayId=" + payid + "&OrderId=" + data.orderID;
                    window.location = "https://epayment.axepta.bnpparibas/cbPayPal.aspx?rd=" + window.btoa(rd);
                    }
                        }).render('#paypal-button-container');
                    }
 
            function stringToObj (string) {
                var newobj = {};
                string.split('&').forEach(function (value) {
                var keypair = value.split('=');
                newobj[keypair[0]] = keypair[1];
            });
 
            return newobj;
        }
         
    </script>
     
</body>
</html>

"Testing tools" --> "Sandbox Accounts".

Image Added

2. Select the appropriate Sandbox merchant account and notify Merchant Services about "Account ID".

Image Added

PayPal Production

PayerID can be found under your PayPal account by https://paypal.com/myaccount/settings/ , as follows. PayerID uniquely identifies merchant in PayPal.

Image Added

Enabling PayPal Pay Later Button

The above piece of code contains the following line. In this line it will be possible to define which funding sources will be allowed in the web shop.

<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&disable-funding=giropay,sofort,sepa,card&intent=capture"></script>

The line corresponded to the following button. By default (using the above line) only PayPal button will be available.

Image Removed

If it is required to have PayPal Pay Later Button in addition to standard PayPal button, the button can be enabled by using parameter enable-funding like follows.

<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&disable-funding=giropay,sofort,sepa,card&enable-funding=paylater"></script>

As a result the following two buttons will appear.

Image Removed

Full list of values for disable-funding and enable-funding can be found by the link below.

https://developer.paypal.com/docs/regional/th/checkout/reference/customize-sdk/#components

Parameter intent

The above piece of code contains the following line.

<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&disable-funding=giropay,sofort,sepa,card&intent=capture"></script>

• SALE (capture=Auto) (when

  Multiexcerpt include
  SpaceWithExcerpt EN MultiExcerptName Platform-Kurz PageWithExcerpt Wording

  automatically sends Capture for a payment; this is the default scenario matching most merchant's needs)
• AUTHORIZE (capture=Manual + txtype=Auth) (when Capture should be sent later by the merchant as a separate API call)
• ORDER (capture=Manual + txtype=Order) (when Authorize and Capture should be sent later by the merchant as separate API calls)

Parameter intent in the above line must be in synch with these options.

If SALE option is used, parameters intent must be set to "capture" as below.

<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&disable-funding=giropay,sofort,sepa,card&intent=capture"></script>

If AUTHORIZE or ORDER option is used, parameters intent must be set to "authorize" as below.

<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&disable-funding=giropay,sofort,sepa,card&intent=authorize"></script>

It is important to set proper value for parameter intent, otherwise an error appears.

Banner

It is possible to show a banner with additional details about usage of "Pay Later" option just under "Pay Later" button. 

Image Removed

For this, the following code should be added to the body of product page, and parameter "data-pp-amount" should be updated by actual amount value.

<div
      data-pp-message
      data-pp-style-layout="text"
      data-pp-style-logo-type="inline"
      data-pp-style-text-color="black"
      data-pp-style-text-size="12"
      data-pp-amount=<amount-value> 
      data-pp-placement="product"
</div>

PayPal Button Style

The above piece of code for PayPal Button does not have any style-related parameters. This piece of code assumes default PayPal style for the button as follows.

Image Removed

PayPal allows to define different PayPal Button style by using parameters shape, color, layout and label. Full list of style-related parameters can be find by the following link.

https://developer.paypal.com/docs/checkout/advanced/style-guide/