Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

AI OnAI Off

DIBS payment provider - installation and user guide

 

Table of content

Introduction

This document describes how to install and use the DIBS Payment Module for EPiServer Commerce with the Enoteca sample templates. The module integrates the DIBS payment provider with EPiServer Commerce and the Enoteca sample templates.

Important notice

Multiple shipping is not supported in this version of the DIBS payment provider. In order to enable this, we recommend that you modify the workflow process rather than the DIBS payment provider.

Copying files

Do the following to add the DIBS source code files to your solution:

  1. Download and install the project source code. You can find the referenced assemblies in the bin folder of Enoteca. You can also copy the bin folder to a folder named Library, add this at the same level as the DIBS project folder, and then compile the project.
  2. Copy the dll EPiServer.Business.Commerce.Payment.DIBS.dll to the bin folder of the Enoteca and Commerce Manager websites.
  3. Create a DIBS folder in the payment plugins folder of the shared Commerce Manager Site, usually "C:\EPiServer\eCommerceFramework\5.3\<CommerceManagerSite>\Shared\Apps\Order\Payments\Plugins", and copy ConfigurePayment.ascx to it.
  4. Create a DIBS folder in the Metadata folder of the shared Commerce Manager Site, usually "C:\EPiServer\eCommerceFramework\5.3\<CommerceManagerSite>\Shared\Apps\Order\Payments\MetaData", and copy Edittab.ascx to it.
  5. Copy DIBSPayment.aspx, and DIBSPaymentLanding.aspx to the page folder of the Enoteca site, usually "\Templates\ Enoteca\Pages".
  6. Copy PaymentMethods.ascx to the DIBS folder in plugin control folder of the Enoteca site, usually "Templates\Enoteca\Units\Placeable\Plugins\Payment\DIBS" (create a DIBS folder if needed).
  7. Copy lang\DIBSPayment_en.xml to the lang folder of the Enoteca site, usually "Enoteca\lang".

Handling redirect problem in Chrome/Firefox

For security reasons, Chrome and Firefox (17.0.1 and later) do not allow the redirect of URLs within an iframe, which would prevent the Enoteca sample template from completing checkout with DIBS. To resolve this, you need to add iframe permissions, which can be done as described below.
In <Enoteca Folder>\Templates\Enoteca\Units\Placeable\CheckoutPaymentStep.ascx, change the line number 106 from this:
<iframe id="paymentMethodsFrame" sandbox="allow-forms allow-same-origin allow-scripts" seamless="seamless" class="enoPaymentMethodFrame" src="" ></iframe>
to the following:
<iframe id="paymentMethodsFrame" sandbox="allow-top-navigation allow-forms allow-same-origin allow-scripts" seamless="seamless" class="enoPaymentMethodFrame" src="" ></iframe>>
In <Enoteca Folder>\Templates\Enoteca\Units\Placeable\CompanyPaymentStep.ascx, change the line number 25 from this:
<iframe id="paymentMethodsFrame" seamless="seamless" class="enoPaymentMethodFrame" src=""></iframe>>
to the following:
<iframe id="paymentMethodsFrame" sandbox="allow-top-navigation allow-forms allow-same-origin allow-scripts" seamless="seamless" class="enoPaymentMethodFrame" src=""></iframe>>

Configuring DIBS in Commerce Manager

Do the following to create and configure the DIBS payment provider in Commerce Manager:

  1. Login to Commerce Manager.
  2. Go to Administration and Order System/Payments/<The language you want to use>.

  3. Click New, and configure the parameters. Note: the following parameters are required and must be configured as follows (Commerce Manager will use these to find the folder that contains .ascx files):
    - System Keyword: DIBS
    - Class Name: EPiServer.Business.Commerce.Payment.DIBS.DIBSPaymentGateway
    - Payment Class: Mediachase.Commerce.Orders.OtherPayment
    The other parameters can be set as desired.
      

     
  4. Click OK to save the payment provider.
  5. In the payment provider list, click on DIBS payment, switch to the Parameters tab, and set the parameters for DIBS. NOTE API UserId and Merchant Password are the login/password for the administration page of DIBS. You just need the API UserId to allow customers to check out, but in order to complete and return an order, you must also add a valid Merchant Password.
     

6.       Click OK to save the payment provider details.

Creating a DIBS page type

In order to use the DIBS payment provider you also need to configure a page type to use. See example below for the Enoteca sample templates.

Do the following to define a page type for DIBS to use:

  1. Go to Admin mode and Page Types in EPiServer CMS, select Create New Page Type.
  2. Create two new page types, with parameters as in the image below. For the first one, set the file name to the relative path DIBSPayment.aspx. For the other, set the file name to DIBSPaymentLanding.aspx. 
      
  3. Add a property of the type page to the website Home Page as in the image below. The name of the property must be DIBSPaymentPage for the [Commerce] Payment page type, and DIBSPaymentLandingPage for the [Commerce] PaymentLanding page type. In this example the property is added to the Site Configuration tab of the Home page.
       
  4. Go to the EPiServer CMS Edit view.
  5. In an appropriate part of the structure, create a new page based on the [Commerce] PaymentLanding page type.
  6. Edit the Home page of the site, go to the Site Configuration tab and set the property DIBSPaymentLandingPage to point to the [Commerce] PaymentLanding page type you just created. 
  7. Create a new page based on the [Commerce] Payment page type like step 5.
  8. Do the same for the [Commerce] PaymenLanding page type like step 6 set the property DIBSPaymentPage.

Using DIBS

When you have deployed and configured the DIBS payment provider, it will appear as an option in the checkout procedure. Add a product to the basket, proceed to checkout and select DIBS as payment option.