IRP Checkout Overview

The all-new, mobile-first IRP checkout flow is optimised for conversion across all device types. It has been designed from the ground up to maximise your revenues, margins and profits.

The checkout incorporates multiple features that remove the 'pain points' for customers as they complete their purchases, for example:

• Easy account creation
• Short and clean forms
• ‘Smart’ checkout features
• Auto-identification of card types
• Auto-population of phone dialling codes
• Address Finder
• Optimal mobile user experience
• Cross-selling opportunities

This topic covers the following areas:

• Checkout progression
• Configuring the checkout
• Login page
• Address details page
• Postage details page
• Payment options page
• Order summary page
• Order confirmation page

When a customer selects items to purchase and views their basket contents either on the desktop (Basket.aspx), mobile (/Mobile/MobileBasket.aspx) or trade (Trade/Basket.aspx) sites, they will see the Checkout Now button (if Click and Collect is enabled, the button will say 'Click and Collect Checkout' or 'Delivery Checkout'):

When the customer clicks the Checkout Now button, they will be able to use the IRP's own secure checkout process (assuming that the Enable Checkout Application Setting has been enabled in IRP Admin).

For new customers, there is a 'standard' progression involving six key pages after the Basket.aspx or the /Mobile/MobileBasket.aspx page:

Standard progression on desktop

1. /Secure/Login.aspx
2. /Secure/BillingAddress.aspx
3. /Secure/Postage.aspx
4. /Secure/PaymentDetails.aspx
5. /Secure/OrderSummary.aspx
6. /Secure/OrderConfirmation.aspx

Standard progression on mobile

1. /Mobile/Secure/MobileLogin.aspx
2. /Mobile/Secure/MobileBillingAddress.aspx
3. /Mobile/Secure/MobilePostage.aspx
4. /Mobile/Secure/MobilePaymentDetails.aspx
5. /Mobile/Secure/MobileOrderSummary.aspx
6. /Mobile/Secure/MobileOrderConfirmation.aspx

If a customer has already logged in and has items in their basket, when they click the Checkout Now button they will go directly to step 3 of the checkout (/Secure/Postage.aspx or /Mobile/Secure/MobilePostage.aspx).

Note: For an overview the IRP basket features, see the IRP Basket help topic.

Variations to the standard progression

The options available to the customer as they progress through the checkout differ according to the type of sale and the payment methods and Application Settings that you have configured in IRP Admin. For details about these variations, see the following help topics:

• Click and Collect
• Deliver to Store
• Finance
• Trade
• Telesale
• Local Payment Method (APM)
• Credit Card, PayPal Credit Card, Bank Transfer, Invoice payment
• Amazon Pay
• PayPal
• Klarna
• Apple Pay
• Google Pay

You can configure the checkout using Application Settings, a checkout stylesheet and Small Translations. You can also enable Live Chat in the checkout and use a specific (and recommended) Order Automatic Voucher template.

Checkout Application Settings

There are many Application Settings that impact the checkout; these are noted in the sections that follow. In particular, there are specific settings within the Checkout Process group of Application Settings that have an impact on the display and function of the checkout.

Setting	Description
Address Finder Loqate Service Key	If you have signed up with Loqate to use their Address Finder on the IRP, this is where you enter the service key provided by Loqate for their API. This will be a 16-digit code, with each set of 4 digits separated by a hyphen (XXXX-XXXX-XXXX-XXXX).
Address Finder Maximum Number Of Results	This defines the maximum number of results to show when the customer starts typing their postcode, street or address into the Address Finder. (This value applies only to the first set of results shown, not when the customer subsequently selects a specific locality from the results.) In the example below, Address Finder Maximum Number Of Results has been set to '5':
Checkout Display Style 2 Page Layout	You can configure the checkout to have a single-column layout or a double-column layout for screens that are more than 768px wide – for screens smaller than this, a single-column layout will always be used. Double column: Single column:
Checkout Shipping Method Description Character Limit	This determines the number of characters to display for shipping method descriptions in the checkout process. When the text displayed is limited by the Application Setting, an info icon will display the full text. To display the entire description, enter a value of 0 (in which case the info icon will not be displayed). The default value is 45.
Enable Address Finder	Note: To use the Address Finder, you need to sign up for an appropriate plan with Loqate (see Loqate Pricing). You are charged only when a customer selects an address from the search results to autofill the address form. Your Loqate account keeps running with minimum fuss through automatic top-ups. When enabled, the Address Finder functionality will show in checkout. Notes: 1. You can disable the Address Finder for specific countries using the Enable Address Finder setting on the ShippingCountryEdit.aspx page in IRP Admin. For more details, see the Shipping Countries help topic. 2. The Address Finder is disabled in some countries by default due to Loqate having limited data about those regions. If required, you can still enable the Address Finder for these countries using the ShippingCountryEdit.aspx. For a list of these countries, see Address Finder Countries Disabled By Default. 3. To test that the Address Finder is working, use the instructions provide by Loqate here. You can use the form shown in the 'Try it now' section to test the service.
Enable Checkout	This is the master switch for the IRP secure checkout. When this is enabled, the secure checkout will be available for customers to checkout their purchases. If disabled, the secure checkout will not be available.
Enable Checkout Phone Dialling Codes	When enabled, an additional drop-down list displays in the checkout phone number text boxes allowing customers to select a country. This country is then used to append a dialling code to the phone number. Notes: 1. You can set country dialling codes directly against shipping countries on the ShippingCountryEdit.aspx page in IRP Admin. For more details, see the Shipping Countries help topic. 2. The mobile version of the dialling codes drop-down list does not include the country flag in order to make use of the native drop-down selection on mobile devices.
Enable Credit Card Masking	When this is enabled, credit card number entry will use masking rules to automatically add spacing between groups of numbers to mimic what is displayed on an actual credit card. The card type will be detected automatically and the relevant card image will be displayed in the box. You can add masking rules for card type valid lengths on the CardTypeEdit.aspx page – see the Card Types help topic for more information). Note that card icons may not be displayed when a customer enters their card number if the card types are not conventionally named on the CardTypeEdit.aspx page. If this is the case, you will need to update the checkout stylesheet with classes for each active card type that do not have the conventional names of 'visa', 'mastercard' and so forth. Make sure that the class names are the card type name with no spaces or special characters. For more details see the Standard Controls Stylesheet help topic. Therefore card icons will be displayed only if, 1) card IINs are set up correctly for all of your card types and 2) you have a CSS class in the checkout stylesheet for the card type.
Enable Expanded Checkout Payment Methods	When enabled, all payment methods will display initially expanded, showing the payment method information on the PaymentDetails.aspx / /Mobile/Secure/MobilePaymentDetails.aspx checkout pages. When enabled: When disabled:
Enable Guest Account Mail List Subscriptions	When this is enabled, guest checkout customers are given the opportunity to be added to your mailing list (depending on how you have set up your full mailing list).
Enable Guest Checkout	Enabling this allows customers to check out as guests rather than sign up for a full customer account. When guest checkout is enabled: When guest checkout is not enabled:
Enable Guest Checkout Standard Account Creation	When this is enabled, guest checkout customers will be given the opportunity to turn their guest accounts into full customer accounts from the billing address stage of the checkout process (/Secure/BillingAddress.aspx / /Mobile/Secure/MobileBillingAddress.aspx).
Enable Purchase Of Out Of Stock Items	Enabling this will allow your customers to place orders for items that are currently displaying as 'Out Of Stock'. This will put these items on back order.
Enable Purchase Of Out Of Stock Kits	Enabling this will allow customers to place orders for kits that are currently displaying as 'Out of Stock'. This will put these kits on back order.
Log Off After Order	When this is enabled, the IRP will automatically log out a customer after they have placed an order.
Set Checkout Display Style	'Display Style 2' is the new improved IRP checkout flow. Display Style 2 – Example desktop Login page:   (See Login Page for mobile versions.) Display Style 2 has been professionally designed using best-practice UX principles and has the potential to: • Increase conversion rate • Reduce drop-out • Improve customer satisfaction
Show Additional Place Order Button At Top Of Page	(Applies only to the older style of checkout.) Enabling this setting will cause an additional Place Order button to be displayed at the top of the Order Summary page (/Secure/OrderSummary.aspx / /Mobile/Secure/MobileOrderSummary.aspx), under the Order Notes section, across all sites. Note: The additional Place Order button will not be displayed if the customer's Shipping Country requires Terms and Conditions and/or they are checking out with Amazon Pay.

You can also allow customers to save card details to their account so that it's easier for them to reuse their card while checking out. You configure this feature using the following Application Settings in the 'Saved Payment Methods' grouping on the ApplicationSettings.aspx page:

• Enable Saved Payment Methods: When enabled, customers can save a payment card on the payment details page during checkout and through the 'Saved Cards' page in the customer's My Account section. (Customers can also add new cards and delete saved cards using their 'Saved Cards' page. The last four digits of the card number, card type and expiry date are shown on the 'Saved Cards' page. There is also a check box to control the default status, with the card currently being the default. For more details, see the Customers help topic.)
• Saved Payment Methods Required Card Security Digits Per Transaction: When enabled, customers who select a previously-saved card during checkout will be required to enter their security code to proceed. If disabled, customers will not need to provide the code and they will be able to reuse the card with one click. In this case the card will be charged without the security code, provided it can be authenticated.

Note: Currently this functionality is available only when using a Global Payments payment processor.

Checkout stylesheet

There is a specific stylesheet for the checkout located under Interface & Design > Standard Controls Stylesheet in the IRP Admin left navigation menu. Select the option called Checkout Controls. You can use this to change the appearance of some aspects of the checkout.

For example, one of the areas you can style (on desktop only) is the progress bar at the top of the checkout. This reassures customers that there are only a small number of steps in the checkout process. Psychologically, this is important as it instils the expectation of a short and simple checkout experience for the customer. This also helps customers to understand how much of the checkout they have already completed and how little they have left to complete.

The IRP includes two examples of the progress bar that use the classes called .checkout-container .checkout-steps and .checkout-container .checkout-steps2 (only .checkout-container .checkout-steps is applied, so see the instructions below for editing the stylesheet):

'Checkout Steps – Editable' (.checkout-container .checkout-steps):

'Checkout Steps Alternative – Editable' (.checkout-container .checkout-steps2):

If you want to change the appearance of the progress bar, follow these steps:

1. Go to the CssStylesStandardControls.aspx page under Interface & Design > Standard Controls Stylesheet in the IRP Admin left navigation menu.
2. Select 'Checkout Controls' from the Stylesheet To Edit drop-down list.
3. Locate the section in the stylesheet that you want to change, either:
   1. 'Checkout Steps – Editable' (.checkout-container .checkout-steps)
   2. 'Checkout Steps Alternative – Editable' (.checkout-container .checkout-steps2)
4. Comment-out one of the above sections (by inserting /* at the beginning of the section and */ at the end).
5. If you comment out the 'Checkout Steps – Editable' section, make sure that you change all checkout-steps2 references to checkout-steps.

You can also style or hide specific parts of the OrderConfirmation.aspx page in checkout via CSS. When you view the OrderConfirmation.aspx page and inspect the HTML for the .order-confirmation control, you will see that each element and area has a CSS class that can individually be styled or hidden if required. To do so, simply add the appropriate classes to the 'Checkout Controls' stylesheet on the Standard Controls Stylesheet page (CssStylesStandardControls.aspx) and modify them as required.

Note: More extensive changes are discouraged beyond updating colours and fonts to tie in with your site theme.

For more information, see the Standard Controls Stylesheet help topic.

Checkout Small Translations

As with most other areas of the IRP, you can use Small Translations to modify the text and language of many elements throughout the checkout. An easy way of finding the Small Translation is to copy the text on the front end, paste it into the Quick Find search bar in IRP Admin, select 'Translations Small' as the filter and click Search. This will show you a set of results on the TranslationsSmall.aspx page.

For example, in the 'Returning customers' section of the login page (/Secure/Login.aspx / /Mobile/Secure/MobileLogin.aspx), you can translate the text snippets in this section using the following Small Translations:

• Heading ('Returning customers'): ID 2769
• 'Sign in to speed up your checkout and manage your orders': ID 2770
• 'Email address' heading: ID 2771
• 'Password' heading: ID 2772
• 'Show': ID 2751
• 'I forgot my password': ID 2774
• 'Sign in': ID 2775

For more information, see the Small Translations help topic.

Order automatic voucher template for the IRP checkout

IRP Commerce has created an 'approved' Order Automatic Voucher Template using HTML and CSS that works with the latest styles. We recommend that you use this template but you can also use your existing templates if necessary. For more details, see the How to Use the IRP Checkout Order Automatic Voucher Template help topic.

Live chat on checkout pages

You can enable Live Chat on checkout pages by enabling the Application Setting called Live Support Show in Checkout (located in the 'Live Support' grouping). When enabled, the Live Chat button will display on checkout pages across all site types. When disabled, the Live Chat button will not display unless a customer already has an open Live Chat session.

You can also enable Live Chat for specific countries by enabling the setting called Enable Live Chat on the ShippingCountryEdit.aspx page.

For more details, see the Live Chat Active Sessions help topic.

The desktop checkout page (/Secure/Login.aspx) appears as follows – note that in these examples, the following Application Settings have been set:

• Checkout Display Style 2 Page Layout: Double Column
• Enable Pay Pal Express Checkout: Enabled

The mobile version of the checkout page (/Mobile/Secure/MobileLogin.aspx) appears as follows:

The customer can use any of the following options on this page:

• Express checkout: The options available here depend on the payment types configured in IRP Admin. Some examples include the following:
  • PayPal: When the customer clicks this button they will be directed to their PayPal account login page. Note that this option will be available only if the Application Setting Enable Pay Pal Express Checkout has been enabled and if the related PayPal settings have been configured correctly. See PayPal Settings for more information.
  • Amazon Pay: When the customer clicks this button they will be directed to their Amazon Pay account login page. Note that this option will be available only if the Application Settings Enable Amazon Pay and Show Button on First Page of Checkout have been enabled and if the related Amazon Pay settings have been configured correctly. See Amazon Pay Settings for more information.
  • Apple Pay: Note that this option will be available only if the Application Setting Enable Apple Pay has been enabled. Note: You will only be able to see the Apple Pay option in checkout if you are using an appropriate Apple device with a payment card in the wallet. According to the Apple Pay website, “When you're making purchases on the web in Safari on your iPhone, iPad or Mac, you can use Apple Pay without having to create an account, enter card details or fill out lengthy forms. Millions of merchants accept Apple Pay online. And with Touch ID on MacBook Air and MacBook Pro, paying takes just a touch and is quicker, easier and more secure than ever before.” See Card Processors for more information.
  • Google Pay: Note that this option will be available only if the Application Setting Enable Google Pay has been enabled. See Card Processors for more information.
• New and guest customers: Note that the guest account option will be available only if the Enable Guest Account Application Setting has been enabled. Otherwise, this section will simply be called 'New customers' and there will be a single 'Create an account' button.
  • Create an account now: When the customer clicks this link they will be directed to the full version of the /Secure/BillingAddress.aspx page (on desktop) or the /Mobile/Secure/MobileBillingAddress.aspx page (on mobile).
  • Continue as guest: The guest checkout process simply removes the need for customers to create accounts, passwords and secret questions. Customer data will be gathered as normal. When the customer clicks the Continue as guest button they will be directed to the guest version of the /Secure/BillingAddress.aspx page (on desktop) or the /Mobile/Secure/MobileBillingAddress.aspx page (on mobile).
• Returning customers:
  Customers who already have an account can log in here by entering their registered email address and password. If necessary, customers can click the Show link in the Password box to temporarily see their password (this is on a three-second timer for security reasons). When they click the Sign in button they will be directed to the /Secure/Postage.aspx page (on desktop) or the /Mobile/Secure/MobilePostage.aspx page (on mobile).
  • If the customer does not enter a valid email address or password, they will see relevant error messages: 'A valid email is required' or 'Password is required' (configurable using Small Translations).
  • If the customer clicks the I forgot my password button, they will be directed to the /Secure/Password.aspx page (on desktop) or the /Mobile/Secure/MobilePassword.aspx page (on mobile). See the Reset password page section below for more details.

The desktop reset password page (/Secure/Password.aspx) appears as follows:

The mobile version of the reset password page (/Mobile/Secure/MobilePassword.aspx) appears as follows:

Points to note about this page include the following:

• The customer simply enters their email address in the box provided and then clicks the Reset your password button to receive a new temporary password via email.
• If the customer does not enter a valid email address, when they click the Reset your password button they will see the text Please enter your email address (configurable using Small Translations) and an error message directing them to the email address box.

Guest account

If the customer chooses to use a guest account, the desktop address details page (/Secure/BillingAddress.aspx) appears as follows – note that in these examples, the following Application Settings have been set:

• Enable Guest Checkout Standard Account Creation: Enabled
• Enable Address Finder: Enabled

The mobile version of the guest account address details page (/Mobile/Secure/MobileBillingAddress.aspx) appears as follows:

The customer fills in the fields on this page as follows:

• Email address (for your receipt): A valid email address so that they can receive system emails about their order.
• Keep me up to date with offers and promotions: The customer can check this box if they want to be added to your mailing list.
• First name: Their first name.
• Last name: Their surname.
• Phone (for delivery updates): The customer can select the appropriate international dialling code for their shipping country using the drop-down list. The phone number country code is auto-populated depending on the current customer market.
• Address Finder: The customer can enter their postcode, street or address in the Address Finder and select their delivery address from the list of options that appears (if the address contains a company name, the company name will be included in the address on the IRP). Note that you can configure the length of the list using the Address Finder Maximum Number Of Results Application Setting.
  
• Enter Address Manually: The customer can select this option if they do not want to use the Address Finder:
  • Address: Their delivery address.
  • Address line 2: (Visible when the customer clicks 'Add additional address details'.) The customer can use this field if necessary. Note: this field will not be visible if the shipping country-specific setting called 'Hide Address Line 2' has been enabled.
  • City: The city or town of their shipping address.
  • State/Province/Region: The country, region, state or region of their shipping address.
  • Country: The customer can select their shipping country using the drop-down list.
  • Postal code: The postcode of their delivery address.

Points to note about this page include the following:

• To use the Address Finder, you need to sign up for an appropriate plan with Loqate (see Loqate Pricing). You are charged only when a customer selects an address from the search results to autofill the address form. Your Loqate account keeps running with minimum fuss through automatic top-ups. The Loqate Address Finder benefits you in many ways:
  • Reduces address entry time
  • Improves website usability
  • Reduces failed deliveries
  • Increases conversion rate
  • Decreases basket drop-out
  • Decreases form abandonment
  • Improves your sales, marketing and staff-productivity efforts
  • Helps to streamline your logistics operations
  • Improves all aspects of your customer life-cycle
  • Keeps customers and partners happy wherever they live
  Key features include:
  • Real-time address look-up
  • Fixes spelling errors automatically
  • Recognises abbreviations automatically
  • Recognises inconsistent data input automatically
  • Completes missing details automatically
• Important: Sub country ISO (e.g. US states) names must match the names in the Loqate database. For countries with sub countries that display as a drop-down list of regions, Loqate will attempt to match the country ISO with their own province code. If this fails, an attempt will be made to match the region names and if this fails, the region must be selected manually. For this reason, any sub countries must have ISOs that match the Loqate province codes. For more details, see the Shipping Countries help topic.
• When the Loqate service is unavailable, the Address Finder will not display. If the Address Finder becomes unavailable while searching for addresses it shall appear disabled and a generic error message will display forcing customers to enter their address manually.
• Note that the mobile version of the dialling codes drop-down list does not include the country flag in order to make use of the native drop-down selection on mobile devices.
• For UK customers entering their postcode, the text box displays an error if the postcode is invalid or if the box is left empty. Any extra spaces are also trimmed from the end of the postcode.
• You can display regions for a country if you enable the setting called Enable Regions In Checkout on the ShippingCountryEdit.aspx page. Note that the regions won't display in the following scenarios:
  • When the shipping country has sub countries.
  • When address finder is enabled.
  For more information, see the Shipping Countries help topic.
• Once complete, the customer should click the Continue to delivery options button.
• If the customer does not complete all the fields or enters non-valid values, when they click the Continue to delivery options button they will see error messages directing them to complete or correct the fields.
• Note that if customers already have an account they can use the link at the top of the page (Already have an account? Sign in) to sign in. Clicking the link will take them to the /Secure/Login.aspx page where they can complete the 'Returning customers' section.

Full account (non-guest)

If the customer elects to Create an account now, the form that they see is identical to the guest account with the following exceptions:

• They will be able to enter a password that is a minimum of six characters in length:
  
• If the Application Setting called Enable Customer Date Of Birth Entry is enabled, they will be able to enter their date of birth.
  • You can also use the Enable Customer Date Of Birth Year Entry Application Setting (in the 'Customers' grouping.) When (enabled, customers will have to enter their year of birth as well as the day and month during mailing list/customer sign-up. When disabled, customers will only need to enter their day and month of birth. Also note that a year input will be displayed for the 'Date of Birth' setting on the CustomerEdit.aspx page in IRP Admin only if the 'Enable Customer Date Of Birth Year Entry' Application Setting is enabled.
  • In addition, if the Enable Gender Application Setting (in the 'Customers' grouping) has been enabled, they will be able to enter their gender:
    
    Note that the Enable Other Gender Input Application Setting (in the 'Customers' grouping) allows you to display a gender option called 'Other' in the checkout flow/account setup. The displayed gender values are determined from the following small translations:
    • Other
    • Prefer Not To Say
    • Female
    • Male
    The option for 'Other' will then also be displayed on the CustomerEdit.aspx and MailingListEdit.aspx in IRP Admin, as will English translations for all the gender values in the 'Gender' selection input.

The desktop postage page (/Secure/Postage.aspx) appears as follows:

The mobile version of the postage page (/Mobile/Secure/MobilePostage.aspx) appears as follows:

Points to note about this page include the following:

• The delivery options are displayed as a lowest-price ordered list.
• The customer can select the Use a different billing address option to provide a different name and address for the order in a panel that expands at the bottom of the page.
• If you have enabled the Address Finder feature, customers will be able to search by postcode, street or address and make a selection from a list of possible matches (you can configure the length of the list using the Address Finder Maximum Number Of Results Application Setting.
• If necessary, customers can click the Return to contact details link to return to the /Secure/BillingAddress.aspx / /Mobile/Secure/MobileBillingAddress.aspx page where they can modify their address details.
• To proceed, customers click the Continue to payment options button. This directs them to step 3 of the checkout (/Secure/PaymentDetails.aspx / /Mobile/Secure/MobilePaymentDetails.aspx).
• The 'i' icon takes the value of the Checkout Display setting (in the Front-End Display' section) on the ShippingMethodEdit.aspx page. For example, if you have entered:
  Next day delivery. Tracked 24h courier service. Signature upon delivery.
  Items typically delivered next working day by close of business.
  for the Checkout Display, then customers will see the following pop-up box when they click the 'i' icon:
  
  Note: It's important that you start your shipping method front-end display descriptions with how many days the delivery takes. The delivery options are ordered with the cheapest option at the top.

The desktop payment options page (/Secure/PaymentDetails.aspx) appears as follows – note that the customer may have many additional payment options available to them on this page depending on whether or not the following Application Settings have been enabled:

• Enable Amazon Pay ('Payment' grouping)
• Enable Payment By Alternative Payment Methods ('Payment' grouping)
• Enable Payment By Amazon Pay ('Payment' grouping)
• Enable Payment By Apple Pay ('Payment' grouping)
• Enable Payment By Bank Transfer ('Payment' grouping)
• Enable Payment By Cheque ('Payment' grouping)
• Enable Payment By Credit Card ('Payment' grouping)
• Enable Payment By Finance ('Payment' grouping)
• Enable Payment By Google Pay ('Payment' grouping)
• Enable Payment By Invoice ('Payment' grouping)
• Enable Payment By Klarna ('Payment' grouping)
• Enable Payment By Pay Pal Credit Card ('Payment' grouping)
• Enable Pay Pal Express Checkout ('Payments - PayPal Express Checkout' grouping)

In addition, if you enable the checkout Application Setting called Enable Expanded Checkout Payment Methods, each of the available payment options will be shown with their input fields automatically expanded.

The mobile version of the payment options page (/Mobile/Secure/MobilePaymentDetails.aspx) appears as follows:

Points to note about this page include the following:

• As described previously, you can allow customers to select saved card details while checking out. You configure this feature using the Enable Saved Payment Methods and Saved Payment Methods Required Card Security Digits Per Transaction Application Settings in the 'Saved Payment Methods' grouping on the ApplicationSettings.aspx page (currently this functionality is available only when using a Global Payments payment processor).
• You can configure the order in which payment options appear using the CountryPaymentOptionSettings.aspx page in IRP Admin. For more information, see the Country Payment Settings help topic.
• The display of card icons is dynamically generated from the available cards configured in IRP Admin. The cards are not selectable and are for reference only.
• A spacing mask is applied to some popular card types and show spaces between groups of numbers to mimic what is displayed on an actual credit card. This aids user entry and reduces card formatting input errors. You enable this feature using the Enable Credit Card Masking Application Setting. The spacing patterns are fully customisable and can be managed on the CardTypeEdit.aspx page. The only patterns that are provided by default are for Visa, Mastercard and American Express (when they are present in your database). See Card Types for more information.
   
  
  Note: Card icons may not be displayed when a customer enters their card number if the card types are not conventionally named on the CardTypeEdit.aspx page. If this is the case, you will need to update the checkout stylesheet with classes for each active card type that do not have the conventional names of 'visa', 'mastercard' and so forth. Make sure that the class names are the card type name with no spaces or special characters. For more details see the Standard Controls Stylesheet help topic. Therefore card icons will be displayed only if, 1) card IINs are set up correctly for all of your card types and 2) you have a CSS class in the checkout stylesheet for the card type.
• Emphasising trust: Right above the credit card number form field, customers can see the statement Payment is safe and secure (Small Translations 2907 and 2908). If the customer clicks the safe and secure link, they will see the following message in a pop-up box: 'Your information is encrypted and handled completely securely in accordance with PCI compliance' (Small Translation 2843).
• The security code form field includes a helpful 'i' icon that, when clicked, pops up a message explaining that the security code can be found on the back of the card.
• If necessary, customers can click the Return to delivery option button. This directs them back to the /Secure/Postage.aspx / /Mobile/Secure/MobilePostage.aspx page where they can modify their delivery details.

The desktop order summary page (/Secure/OrderSummary.aspx) appears as follows:

The mobile version of the order summary page (/Mobile/Secure/MobileOrderSummary.aspx) appears as follows:

Points to note about this page include the following:

• This is where the customer can review all the details that they have entered in the previous sections of the checkout and edit the details if necessary.
• The customer can use the Special delivery instructions section to enter notes about their order.
• On mobile and tablet displays, the I'm ready to place my order floats at the bottom of the screen so that the customer can action the payment at any time.
• When they are ready to proceed, they click the I'm ready to place my order button. (Small Translation 2875).
• The I'm ready to place my order button is disabled after it is clicked and a loading icon with a 'Processing...' message is displayed (Small Translation 3188). This prevents multiple 'Place Order' button clicks from occurring and provides visual feedback to customers that their order is being processed.

The desktop order confirmation page (/Secure/OrderConfirmation.aspx) appears as follows:

The mobile version of the order confirmation page (/Mobile/Secure/MobileOrderConfirmation.aspx) appears as follows:

Points to note about this page include the following:

• If the customer clicks the Track my order progress button, they will go to the /MyAccount/OrderDetails.aspx page where they will be able to see full details of their order.
• The customer will receive an Order Confirmation System Email
• The order will be available for processing by an IRP Admin User in the Orders section of IRP Admin.
• The Order Confirmation page is a very significant page as it presents a major cross-selling opportunity at a point where the customer is susceptible to targeted offers. Here the customer can potentially:
  • View product recommendations.
  • Be influenced by social proof, for example, Trustpilot reviews, tailored customer testimonials and so forth. This can link to a Custom Content Page.
  • Create a full account (if they are a guest).
  • Make use of an Automatic Voucher.
  • View their loyalty points.
  • Review their email subscriptions.
• You can add custom cross-selling content for each site type (desktop, mobile and trade) using the following Large Translations:
  • 129
  • 130
  • 131
  • 132
  Note that these are samples that you will need to update yourself. They contain some placeholder content for example purposes only.