One Time Card Payment
Learn how to do one time payment using Maya Card Payment Vault
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 Card Payment 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 #1At this point, your customer will be able to submit their credit card information for a one-time payment
- Input card details using one of our test cards.
- Click "Pay via Credit Card"
- 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
- Input card details using one of our test cards.
- Click "Pay via Credit Card"
- Customer gets redirected to the verification page.
- Input verification password that matches with the test cards.
- 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.
Useful Links
Updated 2 months ago