Checkout Web app

Check your order and complete payment clearly.

9 checks · 3 content groups

Checklist contents

Review progress

Information and structure

Compare information and presentation in context of use.

Keep orders easy to checkShow product, version, quantity and price before confirmation step.If there is a new fee after entering the address, immediately explain where the total amount changed.Example The total separates “Merchandise”, “Shipping”, “Discounts” and “Payables”.State the final amountEnter fees, taxes, incentives and currency before sending your payment.Any required fees need to appear before the pay button; If delivery charges depend on address, state when the total will be determined.Explain how to paySelect supported methods and enter only information that is absolutely necessary.Keep the selected method when changing addresses or applying codes; distinguish between unavailable methods and payment processing errors.Reduce repetitive input informationUse the same shipping and billing address when appropriate.Allow using the same billing address as the shipping address but do not force it; Format errors require the entered information to remain intact.

Actions and status

Try the operation, change the status and continue working.

Please review before collecting moneyUse a button with a clear name and amount, and keep track of editing information.Don't let buyers send duplicatesThe newspaper is processing and providing guidance as the results have not yet been determined.Prevent duplicate submissions and tell users whether they can close the page or have to wait; When the response is unclear, check the old application before requesting a return.Confirm the results and move onDisplay order code, status, amount or processing line when transaction fails.Indicate application code, confirmation email and next step; Separate the order confirmation from the status of money collected or goods sent.

Complete the experience

Check for details that are easy to miss when putting the design into use.

Explain how payment information is processedBeside the payment section, identify the provider or processing method, explain which data is stored, and link to the relevant policy.Only display authoritative certifications or trust marks; The padlock symbol does not take the place of clearly stating the party receiving and processing the data.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Keep orders easy to check

If there is a new fee after entering the address, immediately explain where the total amount changed.

EXAMPLES

Usage examples

Keep orders easy to check

The total separates “Merchandise”, “Shipping”, “Discounts” and “Payables”.

Checkout Web app

Information and structure

Actions and status

Complete the experience

How to review

Keep orders easy to check

Usage examples

Keep orders easy to check

Find a checklist

No checklists found