Generate and Pay with Maya QR

Generate a QR code

Why Generate & Pay with Maya QR?

Generating a Maya QR code for your customer will enable them to pay using their Maya e-wallet application. By accepting payments with Maya QR, your business will:

  • Simplify payments by letting your customers just #ScanToPay
  • Easily accept cashless payments from customers using any QR Ph participating bank or e-wallet app
  • Transact with confidence knowing Maya QR Ph is supervised by the Bangko Sentral ng Pilipinas

Ready to learn how your business can generate and accept payments using Maya QR? Follow these 4 steps:

Step 1 Setup Maya Business Manager

First, set up your Maya Business Manager account.

Step 2 Redirect your customer to Maya QR page

Add a pay with Maya button to your website to call Maya's dynamic QR page on the server side.

<html>
  <head>
    <title>Wear Vamos</title>
  </head>
  <body>
    <form action="/pay-with-maya" method="POST">
      <button type="submit">Pay with Maya</button>
    </form>
  </body>
</html>

The Maya's dynamic QR page will need the following input to generate the QR page url.

One of the important fields when creating the QR Code page is the redirectUrl in which you will pass the following:

  • success - URL of the page where your customers will be redirected after a successful payment.
  • failure - URL of the page where your customers will be redirected to when the payment fails.
  • cancel - URL of the page where your customer will be redirected when they cancel a payment.
FieldDescription
totalAmount (object) (required)An object that contains the value and currency
requestReferenceNumber (string) (required)The merchant's reference number for the transaction. It is strongly advised that the merchant provide unique value for this property for each transaction.
redirectUrl (object)An object that contains where Maya will redirect to after a successful payment. The fields supported are success, failure, cancel.
metadata (object)Used to provide additional data to the transaction such as payment faciliator information.
Optional: Initiating a payment as a Payment Facilitator

You need to provide the Payment Facilitator information in the metadata object.
Check out this guide for more details.

Metadata Object

  • subMerchantRequestReferenceNumber - Reference number of the sub-merchant for the related transaction
  • pf - For a payment facilitator, this provides details regarding the sub-merchant.
    • smi - Sub-merchant ID
    • smn - Sub-merchant name
    • mci - Sub-merchant city location
    • mpc - ISO 4217 Numeric currency code
    • mco - ISO 3166 Alpha-3 country code
    • mst - Sub-merchant abbreviated state location (required if country is USA)
    • mcc - ISO 18245 merchant category code
    • postal code - Sub-merchant postal code
    • contactNo - Contact number without spaces, dashes, or parentheses
    • state - Sub-merchant state location in full text
    • addressLine1 - Sub-merchant street address

After successfully creating the Maya QR Code page, redirect your customer to the URL of the QR Code page.

const express = require('express');
const app = express();

const fetch = require('node-fetch');

app.post('/pay-with-maya', async (req, res) => {
  const url = 'https://pg-sandbox.paymaya.com/payby/v2/paymaya/payments';
    const options = {
    method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: `Basic ${btoa('PUBLIC_KEY')}`
    },
    body: req.body
    };

    fetch(url, options)
    .then(res => res.json())
    .then(json => {
        res.redirect(303, json.redirectUrl);
    })
    .catch(err => console.error('error:' + err));
});

app.listen(8080, () => console.log(`Listening on port ${8080}!`));

📘

Quick test #1

At this point you will now be able to generate a QR code page.

  1. Click "Pay with Maya" button
  2. You get redirected to QR code page.
Sample Maya QR code pageSample Maya QR code page

Sample Maya QR code page

Step 3 Success Page

Every successful payment should show a success page in order for the customer to verify that the payment went through.

You need to host this success page in your website.

<html>
  <head><title>Payment is successful</title></head>
  <body>
    <h1>Thank your for your order!</h1>
    <p>
      <a link="/track-order">Tracker your order here</a>.
    </p>
  </body>
</html>

📘

Quick Test #2

To test out your success page

  1. Click "Pay with Maya" button
  2. You get redirected to QR code page.
  3. Click "Maya" button on the QR code page instead of scanning the QR code
  4. You will have to use a test Maya account Sandbox Credentials and Cards
  5. On successful payment, Maya Checkout will redirect to your success page.

Scan QR code

You can only do an actual scanning of QR code when you are on production.

Step 4 Managing real-time payment information.

The redirection after a successful payment does not guarantee that the payment information will be updated. Your application should manage payment information updates by implementing webhooks.


Did this page help you?