Credit Card Payment using Maya Vault

Learn how to accept credit card payments using Maya Vault

📘

What is Maya Vault?

Maya Business Vault allows your application to securely accept credit card information through tokenization for current and future transactions.

To set up your business to accept Credit Card payments with Maya Vault, follow these steps:

Step 1 Setup Maya Business Manager

First, set up your Maya Business Manager account.

Step 2 Create a form that will accept credit card details

Maya Vault will tokenize the card details without needing you to save it on your database.

️Is your platform PCI-DSS certified?

Do not store any card information (i.e. name, card number, expiry dates, cvv/cvc) on your application unless your platform is PCI-DSS certified.

<html>
  <head>
    <title>Pay via Credit Card</title>
  </head>
  <body>
    <form action="/pay-via-credit-card" method="POST">
      <input class="cn" placeholder="Card number">
      <input class="date" placeholder="MM / YY">
      <input class="cvc" placeholder="CVC" type="password">
      <button type="submit">Pay via Credit Card</button>
    </form>
  </body>
</html>

Tokenizing the card details

Once the customer has submitted their card information, your server-side application should send this data to Create Payment Token to obtain a paymentTokenId to be used for the rest of process.

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

async app.post('/pay-via-credit-card', async (req, res) => {
    const createPaymentTokenUrl = 'https://pg-sandbox.paymaya.com/payments/v1/payment-tokens';
    const options = {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Basic ${btoa('SECRET_KEY')}`
    },
        method: 'POST',
        body: req.body
    };

    const paymentTokenId = await fetch(url, options)
    .then(res => res.json())
    .then(json => {
        return json.paymentTokenId
    })
    .catch(err => console.error('error:' + err));
});

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

Step 3 Execute the one-time card payment

Once you have obtained the paymentTokenId, your application should pass your customer's checkout details.

Field

Description

totalAmount (object)

An object that contains the value and currency

requiredReferenceNumber (string)

The reference number that will be generated from the merchant's side. It is recommended to use unique id generator such as UUID

redirectUrl (object)

An object that contains where Maya will redirect to after a successful payment. The fields supported are success, failure, cancel.

buyer (object)

Contains the buyer details. This is optional by default and will use the Basic Buyer format. However this is required for merchants who are Kount-enabled.

Review the Kount Buyer fields for the required fields if you are Kount enabled

items (array)

An array of the objects. Each object contains the information that a customer will pay for.

metadata (object)

Optional. Used to provide additional data to the transaction such as payment faciliator information. Contact your account manager to know more about and if you are required to fill-in the object

authorizationType (string)

Optional. Used for Manual Capture. The accepted values are: NORMAL, FINAL, PREAUTHORIZATION

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

One of the important fields when creating the Checkout 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.

After successfully executing the one-time payment, redirect your customer to the URL of the verification page. This page will vary on the issuing bank.

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

async app.post('/pay-via-credit-card', async (req, res) => {
    const createPaymentTokenUrl = 'https://pg-sandbox.paymaya.com/payments/v1/payment-tokens';
    const createPaymentTokenOptions = {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Basic ${btoa('SECRET_KEY')}`
    },
        method: 'POST',
        body: req.body
    };

    const paymentTokenId = await fetch(createPaymentTokenUrl, createPaymentTokenOptions)
    .then(res => res.json())
    .then(json => {
        return json.paymentTokenId
    })
    .catch(err => console.error('error:' + err));
  
  const createPaymentUrl = 'https://pg-sandbox.paymaya.com/payments/v1/payments';
    const createPaymentTokenOptions = {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Basic ${btoa('SECRET_KEY')}`
    },
        method: 'POST',
        body: customerPurchaseDataWithPaymentTokenId
    };

    fetch(createPaymentUrl, createPaymentTokenOptions)
    .then(res => res.json())
    .then(json => {
        res.redirect(303, json.verificationUrl)
    })
    .catch(err => console.error('error:' + err));
  
});

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

📘

Quick Test #1

At this point, your customer will be able to submit their credit card information for a one-time payment

  1. Input card details using one of our test cards
  2. Click "Pay via Credit Card"
  3. Customer gets redirected to the verification page.

Step 4 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

  1. Input card details using one of our test cards
  2. Click "Pay via Credit Card"
  3. Customer gets redirected to the verification page.
  4. Input verification password that matches with the test card.
    5)You are redirected to the success page.

Step 5 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?