TokenEx and custom themes for Classic CMS

3 min

Important

Classic CMS reached end-of-life in January 2025 and is no longer receiving feature updates or bug fixes. You should [migrate to Spire CMS](../../End user docs/spire-cms/get-started-with-spire-cms/migrate-from-classic-cms-to-spire-cms.mdx).

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.