mmpay-browser-sdk

v1.2.5

Published

15 days ago

JavaScript SDK for integrating the MMQR Merchant and Redirect payment gateway

0High
0Medium
0Low

nawingngan

MMQR

MyanMyanPay Browser Plugin Or No-code SDK

💳 Introduction

Welcome to the MyanMyanPay Browser Plugin No Code SDK! This library provides a secure and seamless way to integrate QR Code and Bank Redirect payments into any e-commerce checkout flow. Developed using TypeScript, the SDK offers a clean, type-safe interface and handles complex tasks like API communication, UI rendering, and asynchronous payment status polling automatically.

1. Code Implementation

Step 1: 🛠️ Plugin or SDK Installation

The MyanMyanPay SDK is distributed as a single JavaScript file, ready for direct inclusion. Embed the following <script> tag into the <head> or before the closing </body> tag of your checkout page.

<script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/dist/mmpay-sdk.js"></script>

Step 2: 🚀 Initialize Your App

The MMPaySDK class provides two distinct methods to suit different integration needs.

Example Implementation

const MMPayApp = new MMPaySDK('pk_live_YOUR_KEY', {
    merchantName:  'Your Shop Name',
    design: {
        mode: 'dark', // dark | dark-translucent | light | light-translucent
        color: '#DE3163' // #color code
    }
});

Step 3: 🚀 Making Payments

Approach 1 [Backend Site Order Creation]

`pay()` (Recommended: UI + Polling)

This function is a simple way where an MMQR Reference No and QR to be created at backend with secret key securely, and putting the order ID in our plugin to make POP UP appear in your browser.

Method Signature

pay(orderId: string, onComplete: Function ): Promise<void>

[Establishing Source of Truth] via Backend

Do this at your backend server, it is important to create a source of truth in this manner.

npm install mmpay-node-sdk --save

Backend Integration

import { MMPaySDK } from 'mmpay-node-sdk';

const MMPay = new MMPaySDK({
  appId: "MMxxxxxxx",
  publishableKey: "pk_live_abcxxxxx",
  secretKey: "sk_live_abcxxxxx",
  apiBaseUrl: "https://xxxxxx"
})

const { qr, orderId } = await MMPay.pay({ amount, orderId });
// get your order Id to your browser

Browser Plugin Implementation

const MMPayApp = new MMPaySDK('pk_live_YOUR_KEY', {
    merchantName:  'Your Shop Name',
    design: {
        mode: 'dark', // dark | dark-translucent | light | light-translucent
        color: '#DE3163' // #color code
    }
});

MMPayApp.pay('Order-ID-111111', (result) => {
    if (result.success) {
        console.log('Success: ' + result.orderId + ' : Transaction : ' + result.transactionId);
    }
})

Approach 2 [Browser Site Order Creation]

`showPaymentModal()`

This function is a simple way where an MMQR Reference No and QR to be created on the browser site, but you must verify the source of truth in our webhooks to avoid payload manipulation.

Method Signature

showPaymentModal({orderId: string, amount: number}, onComplete: Function ): Promise<void>

Browser Plugin Implementation

const MMPayApp = new MMPaySDK('pk_live_YOUR_KEY', {
    merchantName:  'Your Shop Name',
    design: {
        mode: 'dark', // dark | dark-translucent | light | light-translucent
        color: '#DE3163' // #color code
    }
});

MMPayApp.showPaymentModal({
    orderId: 'Order-ID-111111',
    amount: 2800
}, (result) => {
    if (result.success) {
        console.log('Success: ' + result.orderId + ' : Transaction : ' + result.transactionId);
    }
})

Verifying Source of Truth

Do this at your backend to verify source of truth. If there are any payload manipulation that does not match your amount, the order can be 'CANCELLED' instanly via our api.

// Example of callback handling in the backend
import { MMPaySDK } from 'mmpay-node-sdk';

const MMPay = new MMPaySDK({
  appId: "MMxxxxxxx",
  publishableKey: "pk_live_abcxxxxx",
  secretKey: "sk_live_abcxxxxx",
  apiBaseUrl: "https://xxxxxx"
})

MMPay
  .onTxCreate((tx) => {
    const { amount } = await DB.getOrderId(tx.orderId) // get your source of truth from your database
    if (tx.amount !== amount ) {
      await MMPay.cancel(tx.orderId) // cancel order
    }
  })
  .onTxSuccess((tx) => console.log('Success:', tx.orderId))
  .onTxFail((tx) => console.log('Failed:', tx.orderId))
  .onTxRefund((tx) => console.log('Refunded:', tx.orderId))
  .onTxCancel((tx) => console.log('Cancelled:', tx.orderId))
  .onTxExpire((tx) => console.log('Expired:', tx.orderId))
  .onHeartbeat((tx) => console.log('Heartbeat:', tx.orderId))
  .on('error', (err) => console.error(err));

// Listening Callback
app.post('/webhooks/mmpay-callback', async (req: Request, res: Response) => {
  const payload = JSON.stringify(req.body);
  const nonce = req.headers['x-mmpay-nonce'] as string;
  const signature = req.headers['x-mmpay-signature'] as string;
  await MMPaySandbox.listen(payload, nonce, signature);
  res.json({ received: true }); // please respond with 200 status
});

All Support Events

MMPayApp.pay('Order-ID-111111', (result) => {
    if (result.success) {
        console.log('Success: ' + result.orderId + ' : Transaction : ' + result.transactionId);
    }
    if (result.created) {
        console.log('Created: ' + result.orderId);
    }
    if (result.cancelled) {
        console.log('Cancelled: ' + result.orderId);
    }
    if (result.expired) {
        console.log('Expoired: ' + result.orderId);
    }
})

2. Error Codes

| Code | Description | | :--- | :--- | | R000 | Internal Server Error ( Talk to our support immediately fot this ) | | R001 | Wrong publishable Key | | R002 | Key Not Live Yet | | R003 | Origin Whitelist Not Allowed | | R004 | Origin Requires SSL | | 429 | Ratelimit hit only 1000 request / minute allowed |

3. Angular Framework Implementation

Example Implementation

import {Injectable} from '@angular/core';

interface ModalResponse {
    success: boolean,
    created: boolean,
    cancelled: boolean,
    expired: boolean,
    orderId: string;
    transactionRefId: string;
}

@Injectable({
  providedIn: 'root'
})
export class MMPayService {
    mmpay: any;
    constructor() {
        const MMPaySDK = (window as any).MMPaySDK;
        if (!MMPaySDK) {
            console.error('SDK not loaded attached to window');
            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
                color: '#9CA6EB' // #color code
            }
        });
    }
    /**
     * @param {number} amount
     * @param {string} orderId
     * @param {string} callbackUrl
     * @param {string} customMessage
     */
    pay(orderId: string ) {
        this.mmpay.pay(orderId, (result: ModalResponse) => {
            if (result.success) {
                console.log('Success: ' + result.orderId + ' : Transaction : ' + result.transactionId);
            }
            if (result.created) {
                console.log('Created: ' + result.orderId);
            }
            if (result.cancelled) {
                console.log('Cancelled: ' + result.orderId);
            }
            if (result.expired) {
                console.log('Expoired: ' + result.orderId);
            }
        });
    }
}

4. React Framework Implementation

Example Implementation

import React, { useEffect, useRef } from 'react';

interface ModalResponse {
    success: boolean,
    created: boolean,
    cancelled: boolean,
    expired: boolean,
    orderId: string;
    transactionRefId: string;
}

export const useMMPay = () => {
  const mmpayRef = useRef(null);

  useEffect(() => {
    const MMPaySDK = window.MMPaySDK;

    if (!MMPaySDK) {
        console.error('SDK not loaded attached to window');
        return;
    }

    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
            color: '#E1A284' // #color code
        }
    });
  }, []);

  const pay = (orderId: string) => {
    if (!mmpayRef.current) return;

    mmpayRef.current.pay(orderId, (result: ModalResponse) => {
        if (result.success) {
            console.log('Success: ' + result.orderId + ' : Transaction : ' + result.transactionId);
            // Redirect Somewhere
        }
        if (result.created) {
            console.log('Created: ' + result.orderId);
        }
        if (result.cancelled) {
            console.log('Cancelled: ' + result.orderId);
        }
        if (result.expired) {
            console.log('Expoired: ' + result.orderId);
        }
    });
  };

  return { pay };
};

export const Checkout = () => {
    const { pay } = useMMPay();

    const handlePayment = () => {
        pay(`ORD-${Date.now()}`);
    };

    return (
        <button onClick={handlePayment}>
            Pay with MyanMyanPay
        </button>
    );
};

5. Vue Framework Implementation

Example Implementation


<script setup>
import { onMounted, ref } from 'vue';

interface ModalResponse {
    success: boolean,
    created: boolean,
    cancelled: boolean,
    expired: boolean,
    orderId: string;
    transactionRefId: string;
}

const mmpay = ref(null);

onMounted(() => {
    const MMPaySDK = window.MMPaySDK;

    if (!MMPaySDK) {
        console.error('SDK not loaded attached to window');
        return;
    }

    mmpay.value = new MMPaySDK('pk_test_123', {
        baseUrl: 'https://xxx.myanmyanpay.com',
        merchantName: 'Test Shop',
        design: {
            mode: 'light', // dark | dark-translucent | light | light-translucent
            color: '#BF40BF' // #color code
        }
    });
});

const pay = ( orderId: string ) => {
    if (!mmpay.value) return;

    mmpay.value.pay(orderId, (result: ModalResponse) => {
        if (result.success) {
            console.log('Success: ' + result.orderId + ' : Transaction : ' + result.transactionId);
            // Redirect Somewhere
        }
        if (result.created) {
            console.log('Created: ' + result.orderId);
        }
        if (result.cancelled) {
            console.log('Cancelled: ' + result.orderId);
        }
        if (result.expired) {
            console.log('Expoired: ' + result.orderId);
        }
    });
};

const handlePayment = () => {
    pay(`ORD-${Date.now()}`);
};
</script>

<template>
    <button @click="handlePayment">
        Pay with MyanMyanPay
    </button>
</template>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

MyanMyanPay Browser Plugin Or No-code SDK

💳 Introduction

1. Code Implementation

Step 1: 🛠️ Plugin or SDK Installation

Step 2: 🚀 Initialize Your App

Example Implementation

Step 3: 🚀 Making Payments

Approach 1 [Backend Site Order Creation]

pay() (Recommended: UI + Polling)

Method Signature

[Establishing Source of Truth] via Backend

Backend Integration

Browser Plugin Implementation

Approach 2 [Browser Site Order Creation]

showPaymentModal()

Method Signature

Browser Plugin Implementation

Verifying Source of Truth

All Support Events

2. Error Codes

3. Angular Framework Implementation

Example Implementation

4. React Framework Implementation

Example Implementation

5. Vue Framework Implementation

Example Implementation

`pay()` (Recommended: UI + Polling)

`showPaymentModal()`