Blnk Store Demo

A simple e-commerce application demonstrating the Blnk Finance Card Payment System.

Features

• Card Account Creation: Create a Blnk Ledger, Identity, and Card Balance.
• Shop: Browse products and checkout using your Blnk Card.
• Authorization: Creates "inflight" transactions on the Blnk Ledger.
• Merchant Dashboard: View pending orders and Settle (Commit) or Reject (Void) them.

Prerequisites

1. A running instance of Blnk Core.
   • Docker: docker run -p 5001:5001 blnkfinance/blnk
2. Node.js installed.

Setup

1. Install dependencies:

   npm install

2. Configure Environment: Create a .env.local file in the root directory:

   BLNK_API_KEY=your_api_key_here
   BLNK_CORE_URL=http://localhost:5001

   (If running locally without auth, you can leave API Key empty)

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 with your browser.

How to Use

1. Create Account: Enter your name and email. This calls the Blnk API to create your Ledger, Identity, and Card Balance. It also funds your card with $10,000 via a deposit from @World.
2. Shop: Add items to cart and click "Pay". This creates an Inflight Transaction (Authorization).
3. Merchant View: Click "Merchant View" in the navbar. You will see the pending transaction.
4. Settle: Click "Accept" to commit the transaction (money moves permanently) or "Reject" to void it (hold is released).

Tech Stack

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• Blnk TypeScript SDK

Monitoring Backend Activity

Why you won't see API calls in Browser Network Tab

Next.js Server Actions run on the server, not in the browser. This means:

• API calls to Blnk Core happen server-side
• They won't appear in the browser's Network tab
• This is by design for security (API keys stay on server)

How to Monitor

1. Terminal Logs (Recommended):

   • Watch your terminal where npm run dev is running
   • You'll see detailed logs with emojis showing:
     • ✅ Successful operations
     • ❌ Errors with full details
     • 📝 Transaction IDs and references
     • 💰 Amounts and descriptions

2. Direct API Check (Quick verification):

   • Open in browser: https://your-blnk-core-url/ledgers
   • Or: /balances, /transactions, /identities
   • You'll see JSON responses showing your data

3. Postman (For detailed testing):

   • Create requests to test endpoints directly
   • See full request/response details

Troubleshooting

"Authorization failed" or "Invalid JSON" errors

1. Check your terminal - Detailed error logs will show the actual API response
2. Verify Blnk Core is running - Check if you can access /ledgers in browser
3. Check balance - Ensure the card has sufficient funds
4. Check destination format - Should be @WorldUSD or @World-USD depending on your Core version