Install and configure AuthorizeTokenEx

AuthorizeTokenEx is a payment provider for Optimizely Commerce Connect that combines Authorize.Net for payment processing with TokenEx for PCI-compliant tokenization. To install and deploy the AuthorizeTokenEx payment provider, follow the steps in this article.

📘

Note

The AuthorizeTokenEx payment provider does not support subscriptions (payment plans).

Download the source packages

Download or clone the Commerce Connect Payment Providers repository on GitHub. It contains open-sourced payment gateways for Optimizely Commerce Connect, including the AuthorizeTokenEx payment provider projects described in this article.

📘

Note

AuthorizeTokenEx requires Commerce Connect version 13.29.0 or later.

The repository contains the following AuthorizeTokenEx projects:

• EPiServer.Commerce.Payment.AuthorizeTokenEx — Contains AuthorizeTokenExPayment and AuthorizeTokenExGateway. Deploy to both Commerce Manager and the front-end site.
• EPiServer.Commerce.Payment.AuthorizeTokenEx.CSR — Contains the API controller and React components. Deploy to the front-end site.

To add the projects to your solution, follow the steps in the next sections.

Build the AuthorizeTokenEx project

1. Open the AuthorizeTokenEx project and save the solution.

2. Rebuild the solution and confirm that the AuthorizeNet and EPiServer.Commerce.Core packages are installed from NuGet. To install them manually, run the following Package Manager Console commands:

   PowerShell

   Install-Package AuthorizeNet -version 1.9.4
   Install-Package EPiServer.Commerce.Core

3. Rebuild the AuthorizeTokenEx project. The build produces EPiServer.Commerce.Payment.AuthorizeTokenEx.dll and AuthorizeNet.dll.

Project structure

The project contains the following files and folders:

• AuthorizeTokenExService.cs — Performs Authorize.Net operations integrated with TokenEx.
• AuthorizeNetTokenExCimBasedManager.cs — Implements the operations used by AuthorizeTokenExGateway.
• AuthorizeTokenExGateway.cs — Main payment gateway implementation.
• ConfigurePayment.ascx — Commerce Manager payment-method editor UI.

Build the AuthorizeTokenEx.CSR project

1. Open the AuthorizeTokenEx.CSR project and save the solution.
2. Rebuild the solution. NuGet should restore the AuthorizeNet and EPiServer.Commerce.Core packages automatically. If they are not restored, install them manually with the Package Manager Console commands shown above.
3. Rebuild the EPiServer.Commerce.Payment.AuthorizeTokenEx.CSR project. The build produces EPiServer.Commerce.Payment.AuthorizeTokenEx.CSR.dll.

The key build artifact is CSRExtensibility/react-app/dist/tokenExPayment.min.js, deployed to the front-end site. It contains the TokenEx payment-method component for the Order Management (CSR) user interface and the TokenExConfiguration registration shown below.

Register the TokenEx scripts with the Order Management UI by adding a configuration class:

using EPiServer.Commerce.UI.CustomerService.Extensibility;
using EPiServer.ServiceLocation;

namespace EPiServer.Commerce.Payment.AuthorizeTokenEx.CSR
{
    [ServiceConfiguration(typeof(CSRUIExtensionConfiguration))]
    public class TokenExConfiguration : CSRUIExtensionConfiguration
    {
        public TokenExConfiguration() => ResourceScripts = new string[]
        {
            "/CSRExtensibility/react-app/dist/tokenExPayment.min.js",
            "https://htp.tokenex.com/Iframe/iframe-v3.min.js"
        };
    }
}

Project structure

The project contains the following files and folders:

• Controllers/TokenExApiController.cs — Generates the TokenEx configuration on demand.
• Controllers/TokenExPaymentsControllerBase.cs — Base controller for processing TokenEx payments.
• Controllers/OrderTokenExPaymentsController.cs — Processes TokenEx payments for an order. TokenEx does not support subscriptions.
• CSRExtensibility/ — Contains the React application for the TokenEx component, built on the Order Management (CSR) extensibility feature.
• Models/TokenExIframeConfigModel.cs — Model for the TokenEx iFrame configuration sent to the client.
• Models/TokenizationPaymentModel.cs — Model representing a tokenized payment.
• TokenExConfiguration.cs — Registers TokenEx scripts with the Order Management (CSR) user interface (the same class shown in the code block above).

Set up Commerce Manager

1. Open the Commerce Manager Apps folder in the Optimizely Commerce Manager project.
2. Deploy ConfigurePayment.ascx to the Apps/Order/Payments/Plugins/AuthorizeTokenEx folder. If the AuthorizeTokenEx folder does not exist, create it.
3. Deploy AuthorizeNet.dll and EPiServer.Business.Commerce.Payment.Authorize.dll to the bin folder of your Commerce Manager site.
4. In your solution's Commerce Manager project, add references to the deployed DLLs and rebuild.

Configure AuthorizeTokenEx in Commerce Manager

After you deploy the files described in the previous section, open the Commerce Manager back-end site and follow these steps:

1. Go to Administration > Order System > Payments, then select the language for which you want to enable the AuthorizeTokenEx payment method (for example, English (United States)).

2. Click New to create a payment method.

   • For System Keyword, enter AuthorizeTokenEx (the name of the folder you created during deployment).

   • For Class Name, select EPiServer.Business.Commerce.Payment.Authorize.AuthorizeTokenizationGateway from the drop-down list.

   • For Payment Class, select EPiServer.Commerce.Order.Payments.Internal.TokenizationPayment from the drop-down list.

     

3. Click OK to save the AuthorizeTokenEx payment method.

4. Open the AuthorizeTokenEx payment method for additional editing.

5. Go to the Parameters tab and enter the following:

   • API UserId — The API user name that Authorize.Net provides when you register for API access.
   • Transaction Key — Your Authorize.Net API user password.

Configure AuthorizeTokenEx on the front-end site

1. Open your front-end site project.

2. Deploy AuthorizeNet.dll, EPiServer.Commerce.Payment.Authorize.dll, and EPiServer.Commerce.Payment.AuthorizeTokenEx.CSR.dll to the bin folder of your front-end site.

3. In your front-end site project of your solution, add references to the deployed DLLs and rebuild.

4. In the root folder of the front-end site project, create the folder path CSRExtensibility/react-app/dist and copy tokenExPayment.min.js into it.

   📘

   Note

   You can change the location for tokenExPayment.min.js, but remember to update TokenExConfiguration.cs correspondingly.

5. Edit the appSettings section of web.config to add the following keys:

   • episerver:tokenization.TokenizationId — Your TokenEx account ID.
   • episerver:tokenization.ClientSecretKey — Your TokenEx client secret key.
   • episerver:tokenization.ApiKey — Your TokenEx API key.
   • episerver:tokenization.TestMode — true for the TokenEx sandbox, false for production.

📘

Note

The front-end site must run on HTTPS to use AuthorizeTokenEx.