PortfolioAbout This Article
When a customer opens their my page, the system queries the POS for point balance behind the scenes. This process completes within seconds, allowing customers to check their points without waiting. This article explains the mechanism in detail.
Flow Overview
Step-by-Step Flow
Customer accesses my page after login
Server validates session token
Get Shopify customer ID from token
Extract numeric part (member number) from Shopify customer ID
Search POS customer info with member number
Get current point balance from POS
Show retrieved points on my page
Step Details
Steps 1-2: Access and Authentication
Access my page (sends Cookie: sessionToken)
Token validation (expiration check, signature verification)
Result: Auth OK -> Display my page / Auth NG -> Redirect to login screen
Steps 3-4: Customer ID Processing
gid://shopify/Customer/8840734670934
8840734670934
This number is used to match as POS member number
Steps 5-6: POS Query
Customer search request (Member #: 8840734670934)
Customer data search
| Response Item | Value |
|---|---|
| Point balance | 1250 |
| Expiration | 2025/12 |
| Member rank | Gold |
Step 7: Display on Screen
| POS Response | After Conversion (Display) | Conversion Content |
|---|---|---|
| point_balance: 1250 | 1,250 | Add thousand separators |
| point_expiry: 2025-12-31 | December 31, 2025 | Local date format |
| member_rank: gold | Gold Member | Label conversion |
Error Handling
Possible Errors and Responses
| Error | Cause | Display to User | Internal Response |
|---|---|---|---|
| Auth error | Token expired | Guide to login screen | Prompt re-login |
| Customer not registered | Not synced to POS | Show 'Not registered at store' | Check sync process |
| POS connection error | POS system failure | 'Temporarily unavailable' | Retry, notify admin |
| Timeout | POS response delay | 'Please try again' | Log timeout |
Fallback Display on Error
Example screen display on error
Show customer name while displaying error only for point section.
| Display Element | Content |
|---|---|
| Customer name | Mr. Taro Yamada (normal display) |
| Point balance | 'Currently unavailable' |
| Action | 'Reload' button |
| Note | '*Can also verify at store' |
Point: Even on error, other functions work and retry option is presented
Performance Optimization
Processing Time Breakdown
| Processing Step | Duration |
|---|---|
| My page access | 0ms |
| Auth token verification | ~50ms |
| Customer ID extraction | ~10ms |
| POS API call | 500-800ms |
| Data formatting/display | ~50ms |
| Total | ~600ms-900ms |
Bottleneck: POS API call takes most time, improvement requires POS-side response
Loading UX Optimization
Security Considerations
Mechanism to Prevent Showing Others' Points
Receive auth token (Customer A's) and target (Customer A's points)
Token's customer ID = Request's customer ID -> OK if match
Match -> Return points / Mismatch -> 403 error, deny access
Benefits of This Mechanism
Customer Experience
- Check latest points just by opening page
- Wait time under 1 second for comfort
- Appropriate feedback even on errors
System Perspective
- Proper separation of authentication and authorization
- Errors don't affect other functions
- Performance visibility and improvement possible