1. Add customised CS files to your project
After installing the Adyen add-on through the NuGet feed, download this ZIP file and save the two CS files at the following locations and then include them in your project:
- AdyenPaymentWidgetController.cs
\src\Web\Controllers\Pages
- AdyenWidget.cshtml
\src\Web\Views\CheckoutB2C
2. Enter test account settings in Litium.AddOns.Adyen.dll.config
If you have not done so already, apply for an Adyen test account on the Adyen web site. Then enter the test account settings that you receive in the file Litium.AddOns.Adyen.dll.config, in the section paymentAccounts.
You can get your Adyen checkout API key by following the instructions here.
On the Adyen site, you will also find test credit card numbers.
3. Modify the integration CS files
If you build the solution at this point you will get a list of build errors that need to be fixed. The first file to modify is src\Litium.Accelerator\Constants\CheckoutConstants.cs. Add the following properties:
public const string ExecutePaymentResult = ”ExecutePaymentResult”;
public const string AdyenCheckout = ”AdyenCheckout”;
Add the following properties to src\Litium.Accelerator\Services\PaymentWidgets\PaymentWidgetResult.cs.
public string ResponseString { get; set; }
public string ViewName { get; set; }
4. Invoke the Adyen widget to display it on the checkout page
Go to Litium.Accelerator.Mvc.Controllers > CheckOutB2C.Controller and modify the HttpGet Index method in the following way:
[HttpGet]
public ActionResult Index(CheckOutB2C currentPageDefinition)
5. Specify what should happen when Adyen is chosen as payment method
Add this code to the same file as above, CheckOutB2C.Controller:
else if (currentStep == CheckoutConstants.AdyenCheckout)
{
var executePaymentResult = CartService.CheckoutFlowInfo.GetValue<ExecutePaymentResult>(CheckoutConstants.ExecutePaymentResult);
return HandlePaymentResult(currentPageDefinition.CurrentPage, executePaymentResult.Success, executePaymentResult.ErrorMessage);
}
6. Embed the Adyen checkout form in the checkout page
To load the Adyen checkout form into the checkout page, change the last line in CheckOutB2C.Controller to the following (old code commented out):
// return View(model.PaymentWidget == null ? "Index" : "Widget", model);
return View(model.PaymentWidget == null ? "Index" : model.PaymentWidget.ViewName ?? "Widget", model);
7. Add Adyen as a payment provider in back office
Log in to back office and add Adyen as a payment provider. In the Websites area, select a site and go to the checkout page in the tree structure. Then click the context menu (the three dots in the upper right corner) > Edit > Settings tab. In the Payment Methods Settings section, choose Adyen:CMS Adyen Checkout in the Add payment method drop-down list.
8. Test the integration and implement it on the live site
Place an order and verify that you can choose the Adyen payment option.
Note: When the user clicks Confirm and is re-directed to the receipt page, the Customer information section of the checkout page will be greyed out and cannot be edited.
When you have verified that the integration works as expected, implement it on the live site by changing the configuration value to live.
var sdkConfigObj = {
context: 'live',
};
Back to the top
By default the locale for the checkout page is determined by the website the user is visiting. If you always want to display the checkout page in a certain language, you can set a locale in the object CheckoutFlowInfo in the file CheckoutControllerBase.cs located in Litium.Accelerator.Mvc/Controllers/Pages, which is called before the payment is executed.
- value: Replace with the language code in the format "xx-XX".
if (paymentInfos[0].PaymentProviderName == AdyenProvider.ProviderName)
{
CheckoutFlowInfo.SetValue(AdyenExecutePaymentArgs.ShopperLocaleKey, "value");
}
Back to the top