Payment methods are a critical component of Ecommerce websites, as they complete the bridge between your 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. your 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

The following checkout handlers are available in Dynamicweb.

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 1.1
• Enter the credit card information
• Complete the order and, which saves the credit card token in the database.

Figure 1.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 1.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 1.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 1.3 Saved cards from a user perspective

These are the database tables associated with payment in Dynamicweb: