TokenEx and custom themes for Classic CMS

Describes performance enhancements for TokenEx and related changes that may be needed to custom themes for Classic CMS.

Enhancements made in 5.1.2206 (June 2022) adjusted the way TokenEx is referenced in the Configured Commerce base code. Prior to this change the TokenEx script was included in the Global DOM, but the script is now loaded only when necessary on the Saved Payments and Checkout pages. This change improved performance and javascript processing on the site in general, as TokenEx blocks all other processes while it is running.

You will need to update your Saved Payments and Checkout pages if you are using a custom themes for Classic CMS and have not upgraded and added this reference.

When the TokenEx script was removed from the global DOM, it was re-added to base code in two locations:

insite.review-and-pay.controller.ts received the following updates:

During onInit we remove the script to ensure it was not leftover from a previous render or added anywhere in custom code:

this.$scope.$on("$locationChangeStart", () => {
  this.tokenExIFrameService.removeScript();
});

In the getSettingsCompleted method we add the TokenEx script (providing full method so you can see where in the process it is added):

protected getSettingsCompleted(settingsCollection: core.SettingsCollection): void {
    this.cartSettings = settingsCollection.cartSettings;
    this.customerSettings = settingsCollection.customerSettings;
    this.useTokenExGateway = settingsCollection.websiteSettings.useTokenExGateway;
    this.useECheckTokenExGateway = settingsCollection.websiteSettings.useECheckTokenExGateway;
    this.usePaymetricGateway = settingsCollection.websiteSettings.usePaymetricGateway;
    this.useSquareGateway = settingsCollection.websiteSettings.useSquareGateway;
    this.squareLocationId = settingsCollection.websiteSettings.squareLocationId;
    this.squareApplicationId = settingsCollection.websiteSettings.squareApplicationId;
    this.enableWarehousePickup = settingsCollection.accountSettings.enableWarehousePickup;
    this.bypassCvvForSavedCards = settingsCollection.cartSettings.bypassCvvForSavedCards;
    this.paymentGatewayRequiresAuthentication = settingsCollection.websiteSettings.paymentGatewayRequiresAuthentication;
    this.tokenExIFrameService.addScript(settingsCollection.websiteSettings);
    this.sessionService.getSession().then(
        (session: SessionModel) => { this.getSessionCompleted(session); },
        (error: any) => { this.getSessionFailed(error); });
}

insite.my-saved-payments.controller.ts received the following updates:

A settings collection is now loading during the initialization of this component. Upon successful completion of that load, the given TokenEx script is loaded (providing the onInit method and the method where we load the TokenEx script). For more context please view the full base code file.

$onInit(): void {
    this.getPaymentProfiles();
    this.settingsService.getSettings().then(
        (settings: core.SettingsCollection) => {
            this.getSettingsCompleted(settings);
        },
        (error: any) => {
            this.getSettingsFailed(error);
        });
    this.$scope.$on("$locationChangeStart", () => {
        this.tokenExIFrameService.removeScript();
    });
}
protected getPaymentProfilesFailed(error: any): void {
}
protected getSettingsCompleted(settingsCollection: core.SettingsCollection): void {
    this.tokenExIFrameService.addScript(settingsCollection.websiteSettings);
}

📘
Note

You can also review insite.tokenex-iframe.service.ts for more context into how we are adding and removing the script in question.

For more information on credit card processing see iFramed credit card processing for cloud.

Updated over 1 year ago

📘Note

📘
Note