Making a card payment Flows

Indicates the money will be collected and the transaction results.

13 checks · 3 content groups

Checklist contents

Review progress

Step by step in flow

Track status, feedback, and next actions every step of the way.

Shows supported methodsPresent payment options clearly and keep the selected method easily identifiable.

Try interacting

Collect necessary payment informationGroup fields logically and use clear labels and formatting instructions to reduce entry errors.

Try interacting

Please check before confirming paymentShows the amount, currency, and last action so users understand the payment.

Try interacting

Payment notification is being processedPrevent repetitive actions and let users know to wait for results instead of leaving the page halfway.

Try interacting

Confirm successful transactionIndicates payment has been completed with necessary reconciliation information.

Try interacting

Instructions after paymentProvides a view of the order, receipt, or part of the service just purchased for the user to continue.

Try interacting

Start the task

Compare information and presentation in context of use.

Indicate how payment is supportedLet's choose the method and keep the fees or important conditions clear.When you don't know if the transaction was successful, check the status instead of pushing the user to return it immediately.Example “Checking payment results. No need to resubmit request.”Confirm funds before entering or sendingDisplay the total, unit of money and arising amount at the decision point.Use the appropriate payment fieldsLabels, aids in formatting, and explains the data needed for the selected method.Instructions for repair before collecting moneyRaise formatting errors, expiration dates, or missing fields without revealing sensitive information.

Feedback and results

Try the operation, change the status and continue working.

Feedback processingPrevent duplicate submissions and provide further guidance if additional verification is needed.Keep transaction errors with handling instructionsDistinguish failure from unknown outcome; for changing methods or checking status.Confirm and proceed to the next stepState the status, amount, transaction code or order and how to receive the bill or start using it.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Indicate how payment is supported

When you don't know if the transaction was successful, check the status instead of pushing the user to return it immediately.

EXAMPLES

Usage examples

Indicate how payment is supported

“Checking payment results. No need to resubmit request.”

Making a card payment Flows

Step by step in flow

Start the task

Feedback and results

How to review

Indicate how payment is supported

Usage examples

Indicate how payment is supported

Find a checklist

No checklists found