1. Story and practice background

Service planners and designers noticed a pattern that customers who reached the payment method selection window would hesitate for a while and then withdraw their purchase. When I turned on the screen and looked at it, there was only a 'Total amount of 50,000 won' and a 'Pay' button in black letters on a white background. In the user's eyes, it felt like a fraudulent phishing site as there was no mechanism to determine whether this payment window was running a secure encryption protocol (SSL), whether the price including VAT and payment fees was transparent, and whether refunds or subscription cancellations were possible within 7 days.

2. Learning objectives

• You can deploy three types of reliability devices (password badge, refund information, etc.) that provide persuasion to customers to complete the payment.
• You can create a receipt layout that transparently lists the final actual payment amount, commission, basic usage fee, and launch event deduction details.
• Through UX auditing by an AI assistant, you can eliminate psychological barriers to purchase and build a final UI code with increased reliability.

3. Download practice basic code

Copy or download the JavaScript/JSON skeleton source below and enter the local practice path (day9_payment_ui.html) and save it.

html


  
  


  

    
Apply for payment service
    
Subscription amount: 50,000 won
    Make payment
  

  

4. Codex AI Prompt Card

Copy and paste the prompt below into the AI question and answer window of Codex Client and receive guidance.

Please review the usability and reliability of the provided `day9_payment_ui.html` payment UI layout. Find a place where users may feel anxious due to information opacity, and derive a final CSS/HTML structure supplemented with 1) separate display of price details and discount receipts, 2) placement of 24-hour secure payment security phrase, and 3) simple cancellation/refund link prescription.