Skip to main content

PayPal PLUS

Integration only for Callisto online stores

This page only contains instructions for integrating PayPal PLUS in Callisto online stores. For further information on using PayPal PLUS in Ceres online stores, refer to the detailed information in the plugin description available in the plentyMarketplace.

PayPal PLUS includes the payment method PayPal and additional payment methods such as credit card or debit. However, the payment methods debit and purchase on invoice are only available if Germany is selected as the country of delivery.

1. Opening a business account for PayPal PLUS

You need to open a business account with PayPal before you can set up the payment method in plentymarkets. You will then receive information and access data, which you will need for setting up the function in plentymarkets.

PayPal PLUS and store design

Note that the following conditions must be met before integrating PayPal PLUS successfully in plentymarkets:

  • Use of the standard design Callisto (Version 2 or higher)

  • Use of the individual order process

  • Safe handling of the plentymarkets CMS

  • Experience with integrating payment providers

2. Setting up PayPal PLUS in plentymarkets

This section explains how and where to select stores and countries of delivery for PayPal PLUS. It also explains how to enter data for the interface. You can only choose the countries of delivery that were set up under System » Orders » Shipping » Shipping options » Tab: Countries of delivery.

Setting up the PayPal PLUS interface:

  1. Go to System » Orders » Payment » Methods.

  2. Place a check mark next to the setting Also show inactive.

  3. Open the folder International.

  4. Click on PayPal PLUS.
    → The Settings tab will open.

  5. Click on the Interface tab.

  6. Expand a Client (store).

  7. Activate the Test mode if you want to make a few test purchases first.

  8. Save the settings.

  9. Click on Add account.
    → You will be forwarded to PayPal.

  10. Log in.

  11. Confirm that plentymarkets should be allowed to access your PayPal account.
    → You will be redirected back to your plentymarkets system.

  12. Repeat steps 1 to 6.

  13. Enter your store name.

  14. Enter the URL to your logo. This makes it possible for PayPal to display your logo within PayPal’s shopping cart.

  15. Select Yes if you want the access data to apply for all clients (stores).

  16. Save the settings.

Test mode or live mode

Activate the Test mode if you want to make a few test purchases using the PayPal sandbox first. Note that you will be forwarded to a different address (sandbox) within PayPal when activating the test mode. Therefore, save the settings for the interface after activating the test mode before you add the account.

3. Activating payment methods

In addition to the payment method PayPal PLUS which you activate in the System » Orders » Payment » Payment methods menu, additional payment methods such as credit card or debit are available. However, the payment methods debit and purchase on invoice can only be used if Germany is selected as the country of delivery. Set up and activate the desired payment methods in your plentymarkets system. To display the logos of additional payment methods, upload the logos directly in the settings of the payment method with a maximum size of 100 x 25 px. In addition, check the settings for Permitted payment methods in the customer classes and for Blocked payment methods in the shipping profiles.

Limitations for purchase on invoice

Purchase on invoice via PayPal PLUS is not available if the purchase value is less than 1.50 EUR or greater than 1,500.00 EUR. Furthermore, digital media cannot be purchased on invoice due to the impossibility of return.

4. Displaying PayPal PLUS in the online store

This section explains how to add PayPal PLUS to the individual order process in plentymarkets. This is done in several steps. First, PayPal PLUS is inserted in a category of the type Container.

No changes to the active design

Do not make changes to your active design. Before making changes to the design, make a backup copy so that you can restore the original state of the design.

Calculating the order total

PayPal and plentymarkets use a different number of decimal places when calculating prices. As such, there may be slight rounding differences in the order total calculated by plentymarkets and PayPal. These differences are automatically settled in the background ensuring that the totals match in plentymarkets and PayPal. This is either done with a credit note or with an item to balance out the difference.

4.1. Adding a category for the additional step in the order process

Shipping and payment need to take place in two different steps. Your customer should first select a shipping method and then this shipping price should be transferred to PayPal. Therefore, create a new category for selecting the payment method. Afterwards, edit the Payment & shipping category which is included in Callisto Light by default.

Creating a category of the type container:

  1. Go to Item » Categories.

  2. Click on New category.
    → The Create new category window will open.

  3. Enter name, e.g. Select payment method.

  4. Click on Create.
    → The category will be opened and the Settings tab will be displayed.

  5. Select the option Container as the Type.

  6. Click on the Description 1 tab.

  7. Insert the code example.
    → The code examples below are for versions 2 and 3 of Callisto Light.

  8. Save the settings.

Code example for version 3 of Callisto Light:

<div class="row equal margin-bottom-1">
	{% if $CheckoutMethodOfPaymentID == 50 %}
		{% $_pppWall = Container_CheckoutPayPalPlus()  %}
	{% endif %}
	{% if strlen($_pppWall)>0 %}
		<div class="panel panel-paypal-plus">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Zahlung</h3>
				</div>
				<div class="panel-body">
					<div data-plenty-checkout-template="Totals">
						{% Container_CheckoutTotals() %}
					</div>
					<div data-plenty-checkout-template="Payment">
						$_pppWall
					</div>
				</div>
			</div>
		</div>
</div>
<script>
(function($) {
		$(document).ready(function() {
			$('#checkoutPanelPayment').show(function() {
        		$('#ppplus').width('100%');
        	});
        	// Resize the iframe again
        	$("iframe[id^='iframe_']").load(function() {
    			$(this).width("100%");
			});
        });
	}(jQuery));
</script>
{% else %}
	<div class="col-lg-6 col-md-6 col-sm-6" data-plenty-checkout-template="MethodsOfPaymentList">
		{% Container_CheckoutMethodsOfPaymentList() %}
	</div>
</div>
<div class="text-right">
	<button class="btn btn-primary btn-lg btn-block-xs" data-plenty="click:Redirect.toCheckoutTab('next')">
		<span>Weiter</span><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	</button>
</div>
<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		plenty.NavigatorService.afterChange(function(currentContainer, targetContainer) {
			if (currentContainer.id === "payment" && $('#ppplus').length <= 0) {

				// Hide default list of payment methods (non PayPal PLUS)
				$('[data-plenty-checkout-template="MethodsOfPaymentList"]').hide();
				var waitscreen = $("#PlentyWaitScreen");

				// Show/append wait screen until PayPal is ready
				if( waitScreen.length <= 0 ) {
		            waitScreen = $('<div id="PlentyWaitScreen" class="overlay overlay-wait in"></div>');
		            $('body').append(waitScreen);
		        } else {
		            // Show wait screen if not already visible
		            waitScreen.addClass('in');
		        }

				// Reload payment checkout step. WARNING: Check your individual checkout steps. Category of payment must be linked with the correct checkout step (here step 7).
				PlentyFramework.factories.CMSFactory.getCategoryContent({% CheckoutStepPageID(7) %}).done(function(response) {
					$('#checkoutPanelPayment').html(response.data[0]);
					waitScreen.removeClass('in');
					plenty.bindDirectives();
				});
			}
		});
	});
})(jQuery);
</script>
{% endif %}

Code example for version 2 of Callisto Light:

<div class="row equal margin-bottom-1">
	{% if $CheckoutMethodOfPaymentID == 50 %}
		{% $_pppWall = Container_CheckoutPayPalPlus()  %}
	{% endif %}
	{% if strlen($_pppWall)>0 %}
		<div class="panel panel-paypal-plus">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Payment</h3>
				</div>
				<div class="panel-body">
					<div data-plenty-checkout-template="Totals">
						{% Container_CheckoutTotals() %}
					</div>
					<div data-plenty-checkout-template="Payment">
						$_pppWall
					</div>
				</div>
			</div>
		</div>
</div>
<script>
(function($) {
		$(document).ready(function() {
			$('#checkoutPanelPayment').show(function() {
        		$('#ppplus').width('100%');
        	});
        	// Resize the iframe again
        	$("iframe[id^='iframe_']").load(function() {
    			$(this).width("100%");
			});
        });
	}(jQuery));
</script>
{% else %}
	<div class="col-lg-6 col-md-6 col-sm-6" data-plenty-checkout-template="MethodsOfPaymentList">
		{% Container_CheckoutMethodsOfPaymentList() %}
	</div>
</div>
<div class="text-right">
	<button class="btn btn-primary btn-lg btn-block-xs" data-plenty-checkout-href="next">
		<span>Next</span><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	</button>
</div>
<script>
	(function($) {
		$(document).ready(function() {
			plenty.NavigatorService.beforeChange(function(currentContainer, targetContainer) {
				// Leave "Shipping & Payment" checkout step
				if ( currentContainer.id === "payment" && targetContainer.id !== "payment" && targetContainer.index > currentContainer.index ) {
					//Prepare payment
					plenty.CheckoutService.preparePayment().done(function(response) {
						if ( response.data.CheckoutMethodOfPaymentRedirectURL == '' && response.data.CheckoutMethodOfPaymentAdditionalContent == '' ) {
							// Show next checkout step in case of success
							plenty.NavigatorService.continueChange( targetContainer );
						}
					});
					// Stop checkout step change
					return false;
				}
				return true;
			});

			plenty.NavigatorService.afterChange(function(currentContainer, targetContainer) {
				if (currentContainer.id === "payment" && $('#ppplus').length <= 0) {

					// Hide default list of payment methods (non PayPal PLUS)
					$('[data-plenty-checkout-template="MethodsOfPaymentList"]').hide();
					var waitscreen = $("#PlentyWaitScreen");

					// Show/append wait screen until PayPal is ready
					if( waitScreen.length <= 0 ) {
		                waitScreen = $('<div id="PlentyWaitScreen" class="overlay overlay-wait in"></div>');
		                $('body').append(waitScreen);
		            } else {
		                // Show wait screen if not already visible
		                waitScreen.addClass('in');
		            }

					// Reload payment checkout step. WARNING: Check your individual checkout steps. Category of payment must be linked with the correct checkout step (here step 7).
					PlentyFramework.factories.CMSFactory.getCategoryContent({% CheckoutStepPageID(7) %}).done(function(response) {
						$('#checkoutPanelPayment').html(response.data[0]);
						waitScreen.removeClass('in');
					});
				}
			});
		});
	}(jQuery));
</script>
{% endif %}

4.2. Editing the Payment & shipping category

Next, you need to edit the Payment & shipping category, which is included in Callisto Light 3 by default.

Editing the Payment & shipping category:

  1. Go to Item » Categories.

  2. Open the design’s folder, e.g. the folder for Callisto Light 3.

  3. Open the category Payment & shipping.

  4. Change the name in the Settings tab, e.g. to Shipping.

  5. Click on the Description 1 tab.

  6. Delete the div container for displaying payment methods.

  7. Save the settings.

4.3. Changing the order steps

Both the newly created category and the edited category need to be added to the order steps of the individual order process.

Changing the order steps:

  1. Go to CMS » Web design.

  2. Click on Settings.
    → The Design settings window will open.

  3. Click on the Clients tab.

  4. Click on a client.

  5. Click on the Order process tab.

  6. Click on Search for the 6th order process step.

  7. Select the Shipping category.

  8. Click on Select.

  9. Click on Search for the 7th order process step.

  10. Select the newly created Select payment method category.

  11. Click on Select.

  12. Click on Search for the 8th order process step.

  13. Select the Order overview & transaction category.

  14. Click on Select.

  15. Click on Search for the 9th order process step.

  16. Select the Order process category.

  17. Click on Select.

  18. Save the settings.
    → The order steps will be updated.

4.4. Customising the Purchase category

The Purchase category also needs to be customised to ensure that the order steps are carried out in the correct sequence.

  1. Go to Item » Categories.

  2. Open the design’s folder, e.g. the folder for Callisto Light 3.

  3. Open the category Purchase.

  4. Click on the Description 1 tab.

  5. Delete the list element for payment & shipping.

  6. After the list element Address, insert list elements for the new order steps Shipping and Select payment method.
    → Example code is displayed further below.

  7. Scroll farther down in the code and replace Step 3 and Step 4 with the 2nd code example underneath this description.

  8. Save the settings.

						<li>
							<span id="checkoutTabShipping" role="tab" aria-controls="checkoutPanelOrderShipping">
								<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
								<span>Shipping</span>
							</span>
						</li>
						<li>
							<span id="checkoutTabPayment" role="tab" aria-controls="checkoutPanelOrderPayment">
								<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
								<span>Payment</span>
							</span>
						</li>
						<!-- STEP 3: Shipping-->
		{% $_id = CheckoutStepPageID(6) %}
		<div class="container" data-plenty-checkout-id="shipping" id="checkoutPanelShipping" aria-labelledby="checkoutTabShipping" role="tabpanel" data-plenty-checkout-content="$_id">
			{% CategoryContentBody($_id) %}
		</div>

		<!-- STEP 4: Payment -->
		{% $_id = CheckoutStepPageID(7) %}
		<div class="container" data-plenty-checkout-id="payment" id="checkoutPanelPayment" aria-labelledby="checkoutTabPayment" role="tabpanel" data-plenty-checkout-content="$_id">
			{% CategoryContentBody($_id) %}
		</div>

		<!-- STEP 5: Overview & Confirmation -->
		{% $_id = CheckoutStepPageID(8) %}
		<div class="container" data-plenty-checkout-id="confirm" id="checkoutPanelConfirm" aria-labelledby="checkoutTabConfirm" role="tabpanel" data-plenty-checkout-content="$_id">
			{% CategoryContentBody($_id) %}
		</div>

4.5. Customising the Order overview & transaction category

You also need to edit the "Order overview & transaction" category so that customers who want to change their entries are forwarded to the correct order step from the order overview.

  1. Go to Item » Categories.

  2. Open the design’s folder, e.g. the folder for Callisto Light 3.

  3. Open the Order overview & transaction category.

  4. Click on the Description 1 tab.

  5. Search for the code data-plenty="click:Redirect.toCheckoutTab('#shipping-payment')".

  6. Delete shipping- so that the code reads data-plenty="click:Redirect.toCheckoutTab('#payment')".

  7. Save the settings.

4.6. Editing PageDesignPrepareMainColumn

Edit the template PageDesignPrepareMainColumn to ensure that PayPal PLUS is correctly used and displayed.

Editing PageDesignPrepareMainColumn:

  1. Go to CMS » Web design.

  2. Open the folder Layout » PageDesign.

  3. Open the template PageDesignPrepareMainColumn.

  4. Search for the code gototab=shipping-payment.

  5. Replace shipping-payment with payment.

  6. Save the settings.

4.7. Editing PageDesignCheckout

To open the order overview after completing an order, edit the template PageDesignCheckout.

Editing PageDesignCheckout:

  1. Go to CMS » Web design.

  2. Open the folder Layout » PageDesign.

  3. Open the template PageDesignCheckout.

  4. Search for the code PlentyFramework.setGlobal( 'checkoutConfirmCatID', {% CheckoutStepPageID(7) %});.

  5. Replace CheckoutStepPageID(7) with CheckoutStepPageID(8).

  6. Save the settings.

4.8. Displaying a description for additional payment methods

If you use additional payment methods in the order process together with the payment methods of PayPal PLUS, a description can be displayed next to the name of the payment method in the list of payment methods. Learn how to add the description using the payment method Cash in advance as an example. Carry out the settings for other payment methods in the same way.

Creating a category with the description text:

  1. Go to Item » Categories.

  2. Click on New category.
    → The Create new category window will open.

  3. Enter a name.

  4. Select the category type.

  5. If you activate Subcategory, then select the category that should include the new subcategory.

  6. Click on Create.
    → The new category will be created and the Settings tab will open.

  7. Select the type Content.

  8. Activate the client (store).

  9. Save the settings.

  10. Click on the Description 2 tab.

  11. Select the option Text field from the drop-down list on the right.

  12. Insert the description into the text field.

  13. Save the settings.

You now link the previously created category with the payment method in order to display the description in the payment method overview in the order process with PayPal PLUS.

Linking the category with the payment method:

  1. Go to System » Orders » Payment » Methods.

  2. Place a check mark next to the setting Also show inactive.

  3. Open the folder International.

  4. Click on Cash in advance.
    → The Settings tab will open.

  5. Select Info page (internal) from the Info page drop-down list.

  6. Click on Edit next to the option Info page (internal).
    → The window Select item template will open.

  7. Select the newly created category.

  8. Click on Select.
    → The category is linked to the payment method.

  9. Save the settings.

5. Customising the invoice template for PayPal PLUS orders

If you use PayPal PLUS and you generate invoices for the orders that are paid for with PayPal PLUS invoices, then make sure to display PayPal’s bank details on the invoice rather than your own bank details. This is done automatically with a payment instruction. Proceed as described below to use your own PDF template.

Respect the payment instruction width

In order to display the bank details of PayPal PLUS correctly on your invoice, save a width of 120 millimetres for the payment instruction in the System » Client » Select client » Locations » Select location » Documents » Invoice menu.

Using own PDF template:

  1. Go to System » Client » Select client » Locations » Select location » Documents » Invoice.

  2. Click on the PDF template tab.

  3. Click on the New template tab.

  4. Select PayPal PLUS from the drop-down list to save the template for PayPal PLUS.

  5. Use the File area to select the PDF file on your computer.

  6. Click on Open.

  7. Save the settings.
    → The PDF file will be uploaded and listed in the Templates tab.

Before sending invoices to customers, find out whether customers already receive invoices from PayPal. In other words, make sure the customer does not receive 2 invoices.

6. Not applying the delivery address from PayPal PLUS

When ordering with PayPal PLUS, the delivery address is applied from PayPal by default and not the data entered by the customer. If you do not want to apply the delivery address from PayPal, proceed as follows.

Not applying the delivery address:

  1. Go to System » Orders » Payment » Methods.

  2. Place a check mark next to the option Also show inactive.

  3. Open the folder International.

  4. Click on PayPal PLUS.
    → The Settings tab will open.

  5. Click on the Interface tab.

  6. Expand a Client (store).

  7. Activate the setting Do not apply delivery address.

  8. Save the settings.

7. Refunding a partial amount

It is possible to refund customers part of the purchase amount by creating a credit note and specifying how much of the total amount should be refunded. Use your own discretion to decide how much is refunded. Partial amounts need to be entered manually since it is possible to enter a different amount for every order. Hence, it is not possible to automate this process.

Creating a credit note to refund a partial amount:

  1. Go to Orders » Edit orders.

  2. Open the desired PayPal PLUS order.

  3. In the Overview tab, click on the Credit note …​ drop-down list and then select create.
    → The credit note will be created.

  4. Open the newly created credit note and click on the Settings tab.

  5. Click on PayPal PLUS Refund under Refund.

  6. Enter the amount that you want to refund.

  7. Click on Transfer refund.
    → The amount will be sent to PayPal.

8. Refunding the total amount and automatically sending it to PayPal

It is possible to refund customers the total purchase amount by creating an order of the type Credit note. Credit notes will automatically be assigned to the payment.

Creating a credit note to refund the total amount:

  1. Go to Orders » Edit orders.

  2. Open the desired PayPal PLUS order.

  3. In the Overview tab, click on the Credit note …​ drop-down list and then select create.
    → The credit note will be created.

Then create an event procedure to automatically send the refunds to PayPal PLUS.

Setting up an event procedure
  1. Go to System » Orders » Events.

  2. Click on Add event procedure.
    → The Create new event procedure window will open.

  3. Enter a name.

  4. Select the Event listed in table 1.

  5. Save the settings.

  6. Pay attention to the explanations given in table 1 and carry out the settings as desired.

  7. Place a check mark next to the option Active.

  8. Save the settings.

Table 1. event procedure for automatically sending refunds to PayPal PLUS
Setting Option Selection

Event

Order generation: New credit note

Filter

Order > Payment method

PayPal PLUS

Procedure

Payment methods > Send refund to PayPal PLUS

9. Automatically reporting rejected payments

Set up an event procedure to automatically inform your customers of rejected payments. In order to inform your customers by email of rejected PayPal PLUS payments and change the status of these payments, create an order status for rejected payments by PayPal PLUS or use an existing order status.

Setting up an event procedure
  1. Go to System » Orders » Events.

  2. Click on Add event procedure.
    → The Create new event procedure window will open.

  3. Enter a name.

  4. Select the event listed in table 2.

  5. Save the settings.

  6. Pay attention to the explanations given in table 2 and carry out the settings as desired.

  7. Place a check mark next to the option Active.

  8. Save the settings.

Table 2. Event procedure for automatically reporting rejected payments by PayPal PLUS
Setting Option Selection

Event

Payment: Rejected

Filter

Order > Payment method

PayPal PLUS

Procedure 1

Customer > Send email

Select email template;
Select Customer

Procedure 2

Order > Change status

Select the order status, e.g. [3.2] In waiting position

To top