@mmpay/browser 1.3.0 → 1.3.1

package/README.md

@@ -13,7 +13,7 @@ Embed the following `<script>` tag into the `<head>` or before the closing `</bo
 **Implementation**
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/dist/mmpay-sdk.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@mmpay/browser@latest/dist/mmpay-sdk.js"></script>
 ```
 
 ---
@@ -62,7 +62,7 @@ Payment status is pushed over a WebSocket, so the success screen appears about a
 
 While the shopper has an order that is not paid, cancelled or expired, `showPaymentModal()` does not create another one. It shows the unfinished order again, also after a page reload or when called with a different `orderId`, and the `created` event carries the `orderId` of the order that is actually on screen. A new order is created once the previous one is finished or the shopper stops it.
 
-A manual test page is in `test/index.html` (run `npm run build` first). It has a built-in mock API, so it works without a server.
+You can try this in the demo playground, see [Run the demo](#run-the-demo).
 
 If your site sends a Content-Security-Policy header, allow:
 
@@ -77,6 +77,26 @@ The modal renders inside a shadow root and no longer uses inline event handlers
 
 ---
 
+## Run the demo
+
+The repo includes a playground at `test/index.html`. In it you can pick the theme, card style, button colour and language, see the matching code for HTML, React or Vue with a Copy button, and run a real payment test against the built SDK.
+
+```bash
+npm install
+npm run build   # builds ./dist/mmpay-sdk.js, which the demo loads
+npm run serve   # serves the repo at http://localhost:5173
+```
+
+Open **http://localhost:5173/test/**, then:
+
+1. **Real test:** enter your `pk_test_` publishable key under *Connection* and press **▶ Run test**. Sandbox keys work from `http://localhost`. Live `pk_live_` keys only work on an HTTPS origin in your whitelist, so use a test key here. The log shows each HTTP call and WebSocket message, so you can see the status arrive in real time.
+2. **No server:** tick *Mock API*. Requests stay in the page, and the *Paid / Failed / Expired / Cancelled* buttons set the order status.
+3. **Spam test (5×)** calls `showPaymentModal()` five times with new order IDs. Only one order should be created. **Reload** checks that an unfinished order reopens on its own.
+
+After changing anything in `src/`, run `npm run build` again and reload the page. Open the demo through `npm run serve`, not by double-clicking the file: from `file://` the WebSocket is refused and the SDK falls back to polling.
+
+---
+
 ## 3: 🚀 Making Payments
 
 ##### Approach 1 [Browser Site Order Creation] `showPaymentModal()`
@@ -280,7 +300,6 @@ export class MMPayService {
             return;
         }
         this.mmpay = new MMPaySDK('pk_test_123', {
-            baseUrl:  'https://xxx.myanmyanpay.com', // Sign up with us and ask our tea
             merchantName: 'Test Shop',
             design: {
                 mode: 'light-translucent', // dark | dark-translucent | light | light-translucent
@@ -344,7 +363,6 @@ export const useMMPay = () => {
     }
 
     mmpayRef.current = new MMPaySDK('pk_test_123', {
-        baseUrl: 'https://xxx.myanmyanpay.com',
         merchantName: 'Test Shop',
         design: {
             mode: 'dark-translucent', // dark | dark-translucent | light | light-translucent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmpay/browser",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "JavaScript SDK for integrating the MMQR Merchant and Redirect payment gateway",
   "keywords": [
     "MMQR"