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 for transaction processing
In order to allow processing transactions on your behalf, corresponding permissions should be granted to .
Permissions can be granted to under your PayPal account. Please use the following links to login into your PayPal account and follow the steps.
Send PayerID to Merchant Services
To complete merchant setup on side, you should send PayerID to Merchant Services.
PayPal Sandbox
1. Login to https://developer.paypal.com/dashboard and go to "Testing tools" --> "Sandbox Accounts".
2. Select the appropriate Sandbox merchant account and notify Merchant Services about "Account ID".
PayPal Production
PayerID can be found under your PayPal account by https://paypal.com/myaccount/settings/ , as follows. PayerID uniquely identifies merchant in PayPal.
PayPal Smart Button
There are two ways for integration of PayPal V2 via . First one is by using JavaScript module. Another one is setting up PayPal button by copy-paste of JavaScript code, which is prepared below.
JavaScript module
The PayPal JavaScript module provides client-side technology to complement with the integration of PayPal V2 via .
- 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.
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.
<!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¤cy=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>
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¤cy=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.
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¤cy=EUR&disable-funding=giropay,sofort,sepa,card&enable-funding=paylater"></script>
As a result the following two buttons will appear.
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¤cy=EUR&disable-funding=giropay,sofort,sepa,card&intent=capture"></script>
offers 3 possible options for a payment.
- SALE (capture=Auto) (when 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¤cy=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¤cy=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.
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.
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/