Modern receipt designer in Commerce headquarters

The modern receipt designer provides a React-based design experience for Commerce receipt formats directly from Commerce headquarters. It replaces the legacy ClickOnce designer launch experience with a browser-based designer that you can open from the Receipt formats page. The designer includes a visual canvas, template selection, reusable templates, localized field labels and preview data, custom receipt fields, validation, and preview support.

The modern designer saves structured receipt layout data for the new receipt format path. Store Commerce can use the structured receipt format path when you enable the modern receipt designer feature and the Commerce Scale Unit supports structured receipts.

Prerequisites

• Update Commerce headquarters and Commerce Scale Unit to versions that include the modern receipt designer and structured receipt endpoint.
• Update Store Commerce to a version that supports structured receipt preview and printing.
• Enable the modern receipt designer feature in Feature management before using the structured receipt path in Store Commerce.
• Configure existing receipt profiles, printers, and hardware profiles for registers where receipts are printed.

Open the modern receipt designer

To open the modern receipt designer, follow these steps:

1. In Commerce headquarters, go to Retail and Commerce > Channel setup > POS setup > POS > Receipt formats.
2. Create a receipt format, or select an existing receipt format.
3. Select Designer.
4. If the receipt format doesn't already have a modern design, select a template from the template gallery or start from a blank template.
5. Select Edit format to open the full designer canvas.

Design a receipt format

The modern designer canvas shows the receipt layout with separate receipt sections and fields. The field palette lists standard receipt fields and custom fields. Use the palette and property editor to add fields, position fields, and edit properties.

To design a receipt format, follow these steps:

1. Open the modern receipt designer from the receipt format.
2. Use the field palette to find the field to add. Standard fields and custom fields are grouped separately.
3. Drag the field to the receipt canvas.
4. Select a field on the canvas to edit its properties.
5. Update applicable properties, such as position, length, alignment, font weight, prefix, or text.
6. Resolve any validation errors that appear in the designer.
7. Select Save.

Custom fields and localized labels

In Commerce version 10.0.49, the modern receipt designer supports user-defined receipt custom fields. Custom fields appear in the field palette with their configured captions. If a translated caption is available for the current legal entity and language, the designer shows the localized caption. If a translation isn't available, the designer falls back to the field name.

Standard field labels and sample preview data are also localized in version 10.0.49. This behavior helps implementers design receipt layouts in the same language context that store users see.

Validate receipt lines

The modern designer validates line-level issues while you edit the receipt format. Validation helps prevent field placement and line-type issues before the format is used in Store Commerce.

Validation can detect problems such as:

• Fields that conflict with the line type.
• Fields that overlap in the same line.
• Line types that need to be inferred or corrected after fields are moved.

If validation errors appear, select the affected field or line, correct the placement or field selection, and save the format again.

Save a receipt format as a template

Templates let you reuse a receipt design across formats. You can save a completed design as a template and select it later when another receipt format needs the same layout pattern.

To save a receipt format as a template, follow these steps:

1. Open the receipt format in the modern receipt designer.
2. Make the required layout changes.
3. Select Save as Template.
4. Enter a template name and description.
5. Select Save as Template.

To use a saved template:

1. Create a new receipt format or open a receipt format that doesn't already have a modern design.
2. Select the template from the gallery.
3. Open the designer to make any receipt-specific changes.

You can't apply saved templates from the gallery after a receipt format already has a modern design.

Preview the receipt format

After you save a modern receipt design, the Receipt formats page shows an embedded preview. The preview helps you confirm the layout before testing the format in Store Commerce.

To preview a receipt format, follow these steps:

1. In Commerce headquarters, open the receipt format.
2. Review the embedded preview on the Receipt formats page.
3. If you need to make any changes, select Edit format.
4. Save the changes and return to the receipt format page. The preview refreshes after the save.

Use modern receipt formats in Store Commerce

When you enable the modern receipt designer feature, Store Commerce uses the structured receipt path for supported receipt scenarios. Structured receipts include a device-agnostic receipt document that Store Commerce and Retail hardware station use for preview and printing.

Supported receipt flows include:

• Post-sale receipt print and gift receipt print or email.
• Show journal receipt preview, print, print all, quick email, gift receipts, and document-based preview.
• Customer Transactions receipt preview and print.
• Cash management receipts, such as bank drop, safe drop, tender removal, starting amount, tender declaration, open drawer, void transaction, suspend transaction, and gift card inquiry receipts.

If you don't open and save an existing receipt format in the modern designer after enabling the feature, the modern structured receipt layout data doesn't exist for that format. Open and save existing receipt formats in the modern designer before using them with the modern structured receipt path.

Print and preview behavior

The structured receipt path aligns preview, print, print-all, email, and gift receipt behavior with the legacy path. Store Commerce uses receipt print behavior settings, such as Always print, Prompt user, and Do not print, when deciding which receipts to print.

If you configure the receipt with Prompt user, Store Commerce prompts at checkout and prints the selected structured receipt through the configured printer. If a receipt can't be printed because the receipt or printer configuration doesn't allow printing, Store Commerce shows the same type of availability message used by the legacy receipt path.

Close the designer with unsaved changes

If you change a receipt design and try to leave the page before saving, the designer reports the dirty state to the Commerce headquarters host. Commerce headquarters can then prompt before closing or navigating away, helping prevent accidental loss of receipt layout changes.

Learn more

• Set up and design receipt formats
• Send email receipts from Store Commerce
• Configure and manage receipt numbers