Payment

Payment methods are a critical component of Ecommerce websites, as they complete the bridge between a web shop and a financial institute – a bank, credit card company, or an online wallet such as PayPal.

A payment method uses a piece of software called a checkout handler to interact with your payment provider – e.g. AuthorizeNet, ChargeLogic Connect, DIBS or QuickPay – which then handles transferring payment to the payment acquirer (i.e. a bank).

Setting up payment in Dynamicweb Ecommerce consists of:

  • Creating a new payment method
  • Selecting and configuring a checkout handler
  • Configuring the matching payment provider

In this article, you can read about creating and configuring a new payment method in Dynamicweb on a general level, as well as associated subjects such as how to set up the saved cards functionality.

Additionally, each checkout handler provided by Dynamicweb comes with a dedicated how-to outlining the setup process for that particular provider.

To create a new payment method:

  • Go to Settings > Ecommerce > Orders > Payment
  • Click New payment in the toolbar (Figure 2.1)
Figure 2.1 Creating a new payment method

This opens the payment method window (Figure 2.2).

Figure 2.2 Creating a new payment method

In methods, you must:

  • Name the payment method – and optionally provide it with a description and icons

Under fees (Figure 3.1), you can set a fixed amount or a percentage of the price of an order and add it to the total price. This makes it possible to account for various fees – universal or country-specific – which a payment provider may charge for their service.

To add a new fee to the payment method click the "Click here to add a new row" button.

Figure 3.1 Setting up payment fees

You must:

  • Enter a fee amount
  • Select a type – fixed amount ($) or percentage (%)
  • Set an total price, at which point the fee will trigger – and below which it will not trigger.
  • Specify which countries the fee applies to under Country\Region

Under country rates and cart type (Figure 3.2), you can specify which countries the payment method should include and configure the Checkout Handler.

Figure 3.2 Configuring country rates and the cart type

You must:

  • Select one or more countries where the payment method is applicable, of the countries created under Countries. If you have added states or regions to a country, you can also choose these.
  • Select a cart type – none or Checkout Handler (which is used with the current shopping cart). Gateway is only supported for legacy reasons, for those who use the old shopping cart app.
  • If relevant, select the Checkout Handler which integrates with the payment provider you want to use
  • Fill in any associated parameters, and more, as outlined in the how-to for each checkout handler – read more below.

Please note, that region/state fees override country-fees.

This means that you can create region and country-specific fees, yet still have general fees to fall back on. 

To calculate fees based on the delivery country instead of the billing country, see the settings in advanced configuration.

The following checkout handlers are available in Dynamicweb.

Name
AltaPay Checkout
AuthorizeNet & AuthorizeNet AIM
Beanstream
ChargeLogic Connect
CyberSource
DIBS FlexWin
ePay
Klarna Checkout V2
Klarna Invoice and Part payment
Stripe Checkout
QuickPay Payment Window
Ogone
PayPal Express Checkout
Nets Netaxept (BBS)

Saved Cards  currently only works with Stripe, Charge Logic Connect and Quickpay Payment Window checkout handlers.

With Saved Cards logged-in customers can store a credit card token at your web shop. This makes it possible for the customer to return to the web shop at a later point, and buy products with the token only – without entering their credit card information.

When the customer enables the Saved cards functionality, the checkout handler makes a real-time request to a secure remote storage server for a credit card token, and stores the token in the database.

When a transaction is submitted, the checkout handler makes another real-time request to the payment provider for the card number, so that it can be submitted directly to the payment processor.

The credit card information is never stored in the Dynamicweb database, but retrieved from the remote storage server, securely transmitted, and then forgotten.

All in all, a safe, easy and user friendly way of making payment easier.

To implement Saved Cards, you must:

  • Modify an order step in the shopping cart to allow users to pay with a saved card token.
  • Modify your customer center to allow logged-in users to view and cancel their saved cards.

 

In order to let the customer choose a stored card to pay with, you need to add a section in the order flow where it’s possible to choose a saved card.

To do so:

  • Navigate to the page with the Shopping cart app.
  • Open app settings.
  • Select the default template InformationSavedCards.html in the Information step, or modify your own information template to to allow users to name and save a credit card token and to contain a radio button list of saved cards.
  • Save and close the page.
Figure 8.1 Setting up payment using a saved cart on the Shopping Cart

ChargeLogic Connect checkout handler uses an inline payment window which means that you need to modify the ChargeLogic payment template in the checkout handler settings to allow users to name and save a credit card token during checkout. The default post template Payment_Confirmation.html provides an example.

You need to add a section in the Customer Center where the customer is able to get an overview of their saved cards.

  • Navigate to a page with the Customer Center app and open the app settings
  • In the Menu texts section, rename “Saved cards” to a name that fits your solution or language. This is the name which will show up in the Customer Center navigation.
Figure 9.1 Setting up saved cards in Customer Center

In the Templates section of the app settings:

  • Insert the Ecom:CustomerCenter.SavedCards tag in the navigation template in order to render the navigation name and link to saved cards list – or select the default template named NavigationSavedCards.html in the Menu layout field.
  • In the Saved card list field, select the default SavedCardList.html template. This renders the list of saved cards.
Figure 9.2 Setting up saved cards in Customer Center
  • Save and close the page.

Test your implementation with a test user:

  • Login to frontend and create an order with a test card and save the card during the checkout.
  • Go to Customer Center and check that the test card is added in the saved card list.

Once set up, a user may save a credit card by following these steps:

  • Login with their extranet login.
  • Add product(s) to the shopping cart and go to checkout
  • During the information step, select a payment method 
  • Check the “Save used card with name”-checkbox, and provide a name (e.g. “My Mastercard”) – See Figure 10.1
  • Enter the credit card information
  • Complete the order and, which saves the credit card token in the database.
Figure 10.1 Saved cards from a user perspective

The credit card will then be available for selection when placing orders:

  • Login with their extranet login.
  • Add product(s) to the shopping cart and go to checkout
  • During the information step, select the saved credit card (Figure 10.2) and check out
  • The order is then completed

A user may get an overview of their saved cards from the Customer Center.

They will be able to see the name they gave their saved card, the card type, the last four digits of the credit card, and the payment provider which was used when the card was saved (Figure 10.3).

From the overview, the user can delete a saved credit card, which removes the token from the database. In Messages the user can view errors - if payments with the card fails, e.g. if a card or it's token has expired.

Figure 10.3 Saved cards from a user perspective

Database

These are the database tables associated with payment in Dynamicweb:

EcomPayments

Contains payment method configuration data from Settings -> Ecom -> Orders -> Payment.

Field name Data type Length
PaymentId nvarchar 50
PaymentLanguageId nvarchar 50
PaymentName nvarchar 255
PaymentDescription nvarchar Max
PaymentIcon nvarchar 255
PaymentGatewayId nvarchar 50
PaymentGatewayTemplate nvarchar 255
PaymentMerchantNum nvarchar 50
PaymentGatewayMD5Key nvarchar 255
PaymentCCITemplate nvarchar 255
PaymentGatewayParameters nvarchar Max
PaymentIconOrderList nvarchar 255
PaymentAddInType nvarchar Max
PaymentCheckoutSystemName nvarchar Max
PaymentCheckoutParameters nvarchar Max
PaymentSorting int 4
PaymentAutoId int 4

EcomCustomersSettings

Links a user (AccessUserId) with preferred currency, payment method and shipping method (CurrencyCode, PaymentMethodId, ShippingMethodId).

Field name Data type Length
SettingId int 4
AccessUserId int 4
PaymentMethodId nvarchar 50
ShippingMethodId nvarchar 50
CurrencyCode nvarchar 3

EcomGiftCard

Contains information about Giftcards created in the solution and their giftcard code. Transactions for a giftcard can be found in the EcomGiftCardTransaction table.

Field name Data type Length
GiftCardAutoId bigint 8
GiftCardId nvarchar 50
GiftCardName nvarchar Max
GiftCardCode nvarchar Max
GiftCardExpiryDate datetime 8
GiftCardCurrency nvarchar 10

EcomGiftCardTransaction

Contains transactions for a giftcard when money is added and when a giftcard is used on an order.

Field name Data type Length
GiftCardTransactionId bigint 8
GiftCardTransactionAmount float 8
GiftCardTransactionOrderId nvarchar 50
GiftCardTransactionGiftCardId nvarchar 50
GiftCardTransactionDate datetime 8
GiftCardTransactionOrderLineId nvarchar 50