Working with payment and delivery providers

Litum has a number of pre-built payment provider add-ons that are available for download. See this list or the full scope and related articles on how to install and configure them. You can also refer to these two articles for more information:

• Payment providers
• How to develop a payment provider

The checkout page has a list of payment and delivery methods for a visitor to choose from. Checkout.DeliveryMethods.js declares the component that shows the list of delivery options, while Checkout.PaymentMethods.js is responsible for the payment options. When a visitor selects an option, a PUT request is sent to the CheckoutController WebApi controllers. They are SetPaymentProvider for payment options and SetDeliveryProvider for delivery options. The controller then sets the selected option, and returns the payment widget if the current payment option wants to render one. For more info on how the payment widget works, go to Klarna Checkout to see an example.

Enable payment and delivery methods 

To enable and show the payment and delivery methods on the checkout page, we need to configurate the channel and set up different payment/delivery methods for different countries. Click on the cogwheel to navigate to the back-office settings. Select Globalization > Channels and the channel you want to modify. Switch to Countries and configure the country as well as the corresponding payment/delivery methods there.

Configure a payment account

Each payment provider needs a different configuration. In general, they all require the merchant to sign up for an account and then apply it in the configuration file. Please check the configure section of the applicable payment providers to see how this is done, for example Configure Klarna. 

Edit a payment or delivery method

Payment and delivery methods can be configured in terms of name, description, icon, cost and VAT. Open the settings by clicking on the cogwheel in back office, navigate to Sales > Payment methods or Sales > Delivery methods and select an item to edit: