- Introduction
- Usage
- Constructor
-
processCard
The processCard method is used to perform a purchase transaction using a payframeToken and payframeKey that is generated by a MW Payframe that uses the getPayframeToken method
-
processAuth
The processAuth method is used to perform a pre-authorization request using a payframeToken and payframeKey that is generated by a MW Payframe that uses the getPayframeToken method
-
tdsCheck
The tdsCheck object is used to perform a 3DS check on a payframeToken and payframeKey generated by an MW Payframe
- Additional Functions
- Styling
MW Payframe is a hostable payment iframe that enables merchants to use Merchant Warrior's payment software on their own websites. MW Payframe has two primary functions, generating a Payframe Token for use with a processCard or processAuth transaction, or adding a card to the MW Vault. Sample files can be downloaded here.
Sample Payframe using getPayframeToken with accessToken - https://jsfiddle.net/merchantwarrior/n7zfhb8k/2/
Sample Payframe using addCard with accessToken - https://jsfiddle.net/merchantwarrior/0s7qn8fu/
Firstly, include a reference to payframe.js on your page.
Production: https://secure.merchantwarrior.com/payframe/payframe.js
Sandbox: https://securetest.merchantwarrior.com/payframe/payframe.js
Instantiate the payframe and set mwCallback (which is the callback function that runs after the payframe has completed its action), before deploying the payframe. After the customer has entered their card details, call the submitPayframe function. The submitPayframe function will perform the action set by the method parameter, getPayframeToken by default. After the payframe has successfully completed the chosen action (addCard or getPayframeToken), it will call mwCallback. The results of the action will be returned as parameters to the mwCallback function.
getPayframeToken will return the token status, the payframeToken, and the payframeKey, in that order; addCard will return the cardID. The returned values will also be set as properties of the payframe. The payframeToken and payframeKey can be submitted with a processCard or processAuth request. A cardID can be submitted with a processCard or processAuth request. If the payframe's validation fails or there was an error processing the payframe's action, the response code and message for the error will be set as properties of the payframe.
Required Parameters
| Parameter | Description |
|---|---|
| merchantUUID | The value of this parameter is provided to you by Merchant Warrior. |
| apiKey | The value of this parameter is provided to you by Merchant Warrior. |
| payframeDivID | This is the id of the div you wish the payframe to appear in. |
| payframeSrc | This is the Merchant Warrior url that the payframe will be loaded from. |
| submitUrl | This parameter is used to set the target environment (Production, Camp). |
Optional Parameters
| Parameter | Description |
|---|---|
| style | This parameter is used to set custom styling for the payframe. |
| acceptedCardTypes | This parameter is a comma delimited list of card types that will be accepted (visa,mastercard,amex,diners,discover,jcb). If not set only Visa and Mastercard will be accepted. |
| method | This parameter is used to set the action to be performed by the payframe (addCard, getPayframeToken). By default, or if not set, the payframe will return a Payframe Token for use with a Process Card transaction. |
//Include payframe.js
<script src='https://secure.merchantwarrior.com/payframe/payframe.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
//Set constructor parameters
var merchantUUID = 'YOUR_MERCHANT_UUID';
var apiKey = 'YOUR_API_KEY';
var src = 'https://secure.merchantwarrior.com/payframe/';
var submitUrl = 'https://api.merchantwarrior.com/payframe/';
var style = {
backgroundColor: '#ffbfec',
textColor: '#f963cd',
border: '3px solid #f963cd',
fontFamily: 'Arial',
errorTextColor: 'red',
errorBorderColor: 'red',
fontSize: '18px',
width: '400px',
cardTypeDisplay: 'right',
padding: '5px',
fieldHeight: '60px',
};
var acceptedCardTypes = "Visa, Diners Club, Mastercard";
//Instantiate the payframe
//If not set, the method parameter defaults to getPayframeToken
var mwPayframe = new payframe(merchantUUID, apiKey,'cardData', src, submitUrl, style, acceptedCardTypes);
//Set mwCallback
mwPayframe.mwCallback = function(tokenStatus, payframeToken, payframeKey){
if(tokenStatus == 'HAS_TOKEN') {
document.getElementById('payframeToken').value = payframeToken;
document.getElementById('payframeKey').value = payframeKey;
//Set other fields, then submit form to server for processCard transaction
var formData = $("#paymentForm").serialize();
var formUrl = '/submitServer.php';
$.ajax({
type: 'POST',
url: formUrl,
data: formData,
success: function(data, status, xml) {
//Parse the response from the processCard
var xmlDoc = $.parseXML(data);
var responseCode = xmlDoc.getElementsByTagName("responseCode")[0].childNodes[0].nodeValue;
var responseMessage = xmlDoc.getElementsByTagName("responseMessage")[0].childNodes[0].nodeValue;
if(responseCode == 0 && responseMessage == 'Transaction approved') {
//Reset payframe to process another transaction
mwPayframe.reset();
} else if(responseMessage == 'Transaction declined') {
console.log('Transaction Declined - Please enter a different card');
mwPayframe.reset();
}
}
});
} else {
console.log('Failed to get payframeToken');
if(mwPayframe.responseCode == -2 || mwPayframe.responseCode == -3){
console.log('Validation failed - ' + mwPayframe.responseMessage);
}
}
};
//Set any additional functions
mwPayframe.loading = function() {
//Please put any loading animations here
};
mwPayframe.loaded = function() {
//Please stop any loading animation here
};
//Depoy the payframe
mwPayframe.deploy();
//When the client has entered their card details, call submitPayframe, which will perform the action set by the method parameter
function submitForm(){
mwPayframe.submitPayframe();
return false;
};
//Sample addCard Implementation
var method = 'addCard';
//If acceptedCardTypes isn't set, it will default to only Visa and Mastercard
//If style isn't set, it will use default styling
var mwPayframe = new payframe('YOUR_MERCHANT_UUID', 'YOUR_API_KEY','cardData','https://secure.merchantwarrior.com/payframe/',
'https://api.merchantwarrior.com/payframe/', method);
mwPayframe.mwCallback = function(){
if(mwPayframe.cardID) {
document.getElementById('cardID').value = mwPayframe.cardID;
//Store the cardID, or use it for a processCard transaction
} else {
console.log('Failed to get cardID');
}
};
mwPayframe.deploy();
function submitForm(){
mwPayframe.submitPayframe();
return false;
};
</script>No sample availableNo sample availableNo sample availableNo sample availableNo sample availableNo sample availableNo sample available
These paramaters are practically identical to the Direct API processCard method. The major point of difference is that the card data fields are removed, and in their place the payframeToken and payframeKey parameters have been added.
Required Paramaters
| Parameter | Description |
|---|---|
| method | This field is case sensitive. |
| merchantUUID | The value of this parameter is provided to you by Merchant Warrior. |
| apiKey | The value of this parameter is provided to you by Merchant Warrior. |
| transactionAmount | The amount must be formatted to have two decimal places. Any amounts without two decimal places or amounts less than one cent will be rejected. |
| transactionCurrency | One of the following: AUD, CAD, EUR, GBP, JPY, NZD, SGD, USD. This is provider dependant. Please check with MW before attempting to process transactions in any currency other than AUD. This field is case insensitive. |
| transactionProduct | A product (or sale) id or description. We recommend using an order/product id. This field's primary purpose is to help the transaction be identifiable for reporting and accounting purposes. |
| customerName | This field can only contain alphanumeric characters, as well as the full stop, comma, aposprophe, ampersand, space and hyphen characters. |
| customerCountry | Two letter ISO 3166-1 alpha-2 country code. |
| customerState | Freeform field, keep consistent for your records and reporting. |
| customerCity | Freeform field, keep consistent for your records and reporting. |
| customerAddress | Freeform field. |
| customerPostCode | This can also accomodate ZIP/Post codes for international transactions. |
| payframeToken | A unique alphanumeric string returned by an MW Payframe that uses the getPayframeToken method. |
| payframeKey | A unique alphanumeric string returned by an MW Payframe that uses the getPayframeToken method. |
| hash | The verification hash is a combination of the MD5 of your API Passphrase, and specific parameters sent in the transaction. See Hash Generation for information on how to construct the hash correctly. |
Optional Paramaters
| Parameter | Description |
|---|---|
| transactionReferenceID | This is a merchant's unique reference ID for a transaction sent to Merchant Warrior. The main purpose of this ID is to verify the transaction via the queryCard method in the event a valid response is not received. |
| threeDSToken | This parameter is used to indicate if a transaction has been authenticated. Its value is returned by tdsCheck object. |
| customerPhone | Anything other than +,-, space and 0-9 will be stripped. |
| customerEmail | Sending this optional parameter is highly recommended. |
| customerIP | Any valid IPv4 or IPv6 address is accepted. Sending this optional parameter is highly recommended. |
| storeID | The value of this field is the merchant's store name. Please note that you need to contact Merchant Warrior to enable the storeID feature before you can use this parameter. |
| addCard | This value is a boolean to denote whether the paymentCardNumber associated with the payframeToken should automatically be added to the Merchant Warrior Vault after processing the transaction. |
| custom1 | Freeform field. Returned as |
| custom2 | Freeform field. Returned as |
| custom3 | Freeform field. Returned as |
curl -X POST \
-d method="processCard" \
-d merchantUUID="5265f8eed6a19" \
-d apiKey="ksmnwxab" \
-d transactionAmount="1.00" \
-d transactionCurrency="AUD" \
-d transactionProduct="Test Product" \
-d customerName="Test Customer" \
-d customerCountry="AU" \
-d customerState="QLD" \
-d customerCity="Brisbane" \
-d customerAddress="123 Test Street" \
-d customerPostCode="4000" \
-d customerPhone="61731665489" \
-d customerEmail="[email protected]" \
-d customerIP="1.1.1.1" \
-d payframeToken="KMJI24557546102398" \
-d payframeKey="b941071d7be8d11f4c8e6c038968bc0d" \
-d hash="b55552ff426d7e3d4885465d27ea0062" https://api.merchantwarrior.com/payframe/require 'net/http'
require 'uri'
uri = URI.parse("https://api.merchantwarrior.com/payframe/")
request = Net::HTTP::Post.new(uri)
request.set_form_data(
'method' => 'processCard',
'merchantUUID' => '5265f8eed6a19',
'apiKey' => 'ksmnwxab',
'transactionAmount' => '1.00',
'transactionCurrency' => 'AUD',
'transactionProduct' => 'Test Product',
'customerName' => 'Test Customer',
'customerCountry' => 'AU',
'customerState' => 'QLD',
'customerCity' => 'Brisbane',
'customerAddress' => '123 Test Street',
'customerPostCode' => '4000',
'customerPhone' => '61731665489',
'customerEmail' => '[email protected]',
'customerIP' => '1.1.1.1',
'payframeToken' => 'KMJI24557546102398',
'payframeKey' => 'b941071d7be8d11f4c8e6c038968bc0d',
'hash' => 'b55552ff426d7e3d4885465d27ea0062'
)
response = Net::HTTP.start(uri.hostname, uri.port, use_ssl: uri.scheme == "https") do |http|
http.request(request)
end
puts response.body
import requests
data = {
'method' : 'processCard',
'merchantUUID' : '5265f8eed6a19',
'apiKey' : 'ksmnwxab',
'transactionAmount' : '1.00',
'transactionCurrency' : 'AUD',
'transactionProduct' : 'Test Product',
'customerName' : 'Test Customer',
'customerCountry' : 'AU',
'customerState' : 'QLD',
'customerCity' : 'Brisbane',
'customerAddress' : '123 Test Street',
'customerPostCode' : '4000',
'customerPhone' : '61731665489',
'customerEmail' : '[email protected]',
'customerIP' : '1.1.1.1',
'payframeToken' : 'KMJI24557546102398',
'payframeKey' : 'b941071d7be8d11f4c8e6c038968bc0d',
'hash' : 'b55552ff426d7e3d4885465d27ea0062'
}
r = requests.post('https://api.merchantwarrior.com/payframe/', data = data)
print(r.text)
<?php
// Setup the POST url
define('MW_API_ENDPOINT', 'https://api.merchantwarrior.com/payframe/');
// Setup POST data
$postData = array (
'method' => 'processCard',
'merchantUUID' => '5265f8eed6a19',
'apiKey' => 'ksmnwxab',
'transactionAmount' => '1.00',
'transactionCurrency' => 'AUD',
'transactionProduct' => 'Test Product',
'customerName' => 'Test Customer',
'customerCountry' => 'AU',
'customerState' => 'QLD',
'customerCity' => 'Brisbane',
'customerAddress' => '123 Test Street',
'customerPostCode' => '4000',
'customerPhone' => '61731665489',
'customerEmail' => '[email protected]',
'customerIP' => '1.1.1.1',
'payframeToken' => 'KMJI24557546102398',
'payframeKey' => 'b941071d7be8d11f4c8e6c038968bc0d',
'hash' => 'b55552ff426d7e3d4885465d27ea0062'
);
// Setup CURL defaults
$curl = curl_init();
// Setup CURL params for this request
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_URL, MW_API_ENDPOINT);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($postData, '', '&'));
// Run CURL
$response = curl_exec($curl);
$error = curl_error($curl);
// Check for CURL errors
if (isset($error) && strlen($error)) {
throw new Exception("CURL Error: {$error}");
}
// Parse the XML
$xml = simplexml_load_string($response);
// Convert the result from a SimpleXMLObject into an array
$xml = (array)$xml;
// Validate the response - the only successful code is 0
$status = ((int)$xml['responseCode'] === 0) ? true : false;
// Make the response a little more useable
$result = array (
'status' => $status,
'transactionID' => (isset($xml['transactionID']) ? $xml['transactionID'] : null),
'responseData' => $xml
);
exit(var_dump($result));
?>
using System;
using System.Collections.Generic;
using System.Linq;
public class Program {
public static void Main(string[] args) {
using(var client = new System.Net.WebClient()) {
byte[] response = client.UploadValues("https://api.merchantwarrior.com/payframe/",
new System.Collections.Specialized.NameValueCollection() {
{ "method", "processCard" },
{ "merchantUUID", "578dd399d2373" },
{ "apiKey", "dyqxkzse" },
{ "transactionAmount", "1.00" },
{ "transactionCurrency", "AUD" },
{ "transactionProduct", "Test Product" },
{ "customerName", "Test Customer" },
{ "customerCountry", "AU" },
{ "customerState", "QLD" },
{ "customerCity", "Brisbane" },
{ "customerAddress", "123 Test Street" },
{ "customerPostCode", "4000" },
{ "customerPhone", "61731665489" },
{ "customerEmail", "[email protected]" },
{ "customerIP", "1.1.1.1" },
{ "payframeToken", "KMJI24557546102398" },
{ "payframeKey", "b941071d7be8d11f4c8e6c038968bc0d" },
{ "hash", "d0fb5716a2b85c743ed802bd5bd7284b" },
});
String result = System.Text.Encoding.Default.GetString(response);
Console.WriteLine(result);
}
}
}
Imports System
Imports System.Collections.Generic
Imports System.Linq
Public Module Program
Public Sub Main(args As String())
Using client = New System.Net.WebClient()
Dim response As Byte() = client.UploadValues(
"https://api.merchantwarrior.com/payframe/",
New System.Collections.Specialized.NameValueCollection() From { _
{"method", "processCard"}, _
{"merchantUUID", "578dd399d2373"}, _
{"apiKey", "dyqxkzse"}, _
{"transactionAmount", "1.00"}, _
{"transactionCurrency", "AUD"}, _
{"transactionProduct", "Test Product"}, _
{"customerName", "Test Customer"}, _
{"customerCountry", "AU"}, _
{"customerState", "QLD"}, _
{"customerCity", "Brisbane"}, _
{"customerAddress", "123 Test Street"}, _
{"customerPostCode", "4000"}, _
{"customerPhone", "61731665489"}, _
{"customerEmail", "[email protected]"}, _
{"customerIP", "1.1.1.1"}, _
{"payframeToken", "KMJI24557546102398"}, _
{"payframeKey", "b941071d7be8d11f4c8e6c038968bc0d"}, _
{"hash", "d0fb5716a2b85c743ed802bd5bd7284b"} _
})
Dim result As [String] = System.Text.Encoding.[Default].GetString(response)
Console.WriteLine(result)
End Using
End Sub
End Module
import java.io.*;
import java.net.*;
import java.util.*;
public class Program{
public static void main(String[] args) {
try{
URL url = new URL("https://api.merchantwarrior.com/payframe/");
Map<String, String> params = new LinkedHashMap<>();
params.put("method", "processCard");
params.put("merchantUUID", "5265f8eed6a19");
params.put("apiKey", "ksmnwxab");
params.put("transactionAmount", "1.00");
params.put("transactionCurrency", "AUD");
params.put("transactionProduct", "TestProduct");
params.put("customerName", "TestCustomer");
params.put("customerCountry", "AU");
params.put("customerState", "QLD");
params.put("customerCity", "Brisbane");
params.put("customerAddress", "TestStreet");
params.put("customerPostCode", "4000");
params.put("customerPhone", "61731665489");
params.put("customerEmail", "[email protected]");
params.put("customerIP", "1.1.1.1");
params.put("payframeToken", "KMJI24557546102398");
params.put("payframeKey", "b941071d7be8d11f4c8e6c038968bc0d");
params.put("hash", "b55552ff426d7e3d4885465d27ea0062");
StringBuilder postData = new StringBuilder();
for (Map.Entry<String, String> param : params.entrySet()) {
if (postData.length() != 0)
postData.append('&');
postData.append(param.getKey());
postData.append('=');
postData.append(param.getValue());
}
HttpURLConnection conn = (HttpURLConnection)url.openConnection();
conn.setRequestMethod("POST");
conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
conn.setDoOutput(true);
OutputStreamWriter writer = new OutputStreamWriter(conn.getOutputStream());
writer.write(postData.toString());
writer.flush();
BufferedReader reader = new BufferedReader(
new InputStreamReader(conn.getInputStream()));
String line;
StringBuilder sb = new StringBuilder();
while((line = reader.readLine()) != null){
sb.append(line);
}
System.out.println(sb.toString());
writer.close();
reader.close();
}
catch(Exception ex){
ex.printStackTrace();
}
}
}
<?xml version="1.0"?>
<mwResponse>
<custom1/>
<cardExpiryYear>21</cardExpiryYear>
<custom2/>
<custom3/>
<responseMessage>Transaction approved</responseMessage>
<transactionReferenceID>12345</transactionReferenceID>
<cardType>mc</cardType>
<responseCode>0</responseCode>
<authCode>731357421</authCode>
<transactionAmount>1.00</transactionAmount>
<authResponseCode>08</authResponseCode>
<transactionID>1336-20be3569-b600-11e6-b9c3-005056b209e0</transactionID>
<receiptNo>731357421</receiptNo>
<cardExpiryMonth>05</cardExpiryMonth>
<customHash>65b172551b7d3a0706c0ce5330c98470</customHash>
<authSettledDate>2016-11-29</authSettledDate>
<paymentCardNumber>512345XXXXXX2346</paymentCardNumber>
<authMessage>Honour with identification</authMessage>
</mwResponse>
{
"custom1": [],
"cardExpiryYear": "21",
"custom2": [],
"custom3": [],
"responseMessage": "Transaction approved",
"transactionReferenceID": "12345",
"cardType": "mc",
"responseCode": "0",
"authCode": "731357421",
"transactionAmount": "1.00",
"authResponseCode": "08",
"transactionID": "1336-20be3569-b600-11e6-b9c3-005056b209e0",
"receiptNo": "731357421",
"cardExpiryMonth": "05",
"customHash": "65b172551b7d3a0706c0ce5330c98470",
"authSettledDate": "2016-11-29",
"paymentCardNumber": "512345XXXXXX2346",
"authMessage": "Honour with identification"
}
These paramaters are practically identical to the Direct API processAuth method. The major point of difference is that the card data fields are removed, and in their place the payframeToken and payframeKey parameters have been added.
Required Parameters
| Parameter | Description |
|---|---|
| method | This field is case sensitive. |
| merchantUUID | The value of this parameter is provided to you by Merchant Warrior. |
| apiKey | The value of this parameter is provided to you by Merchant Warrior. |
| transactionAmount | The amount must be formatted to have two decimal places. Any amounts without two decimal places or amounts less than one cent will be rejected. |
| transactionCurrency | One of the following: AUD, CAD, EUR, GBP, JPY, NZD, SGD, USD. This is provider dependant. Please check with MW before attempting to process transactions in any currency other than AUD. This field is case insensitive. |
| transactionProduct | A product (or sale) id or description. We recommend using an order/product id. This field's primary purpose is to help the transaction be identifiable for reporting and accounting purposes. |
| customerName | This field can only contain alphanumeric characters, as well as the full stop, comma, aposprophe, ampersand, space and hyphen characters. |
| customerCountry | Two letter ISO 3166-1 alpha-2 country code. |
| customerState | Freeform field, keep consistent for your records and reporting. |
| customerCity | Freeform field, keep consistent for your records and reporting. |
| customerAddress | Freeform field. |
| customerPostCode | This can also accomodate ZIP/Post codes for international transactions. |
| payframeToken | A unique alphanumeric string returned by an MW Payframe that uses the getPayframeToken method. |
| payframeKey | A unique alphanumeric string returned by an MW Payframe that uses the getPayframeToken method. |
| hash | The verification hash is a combination of the MD5 of your API Passphrase, and specific parameters sent in the transaction. See Hash Generation for information on how to construct the hash correctly. |
Optional Parameters
| Parameter | Description |
|---|---|
| transactionReferenceID | This is a merchant's unique reference ID for a transaction sent to Merchant Warrior. The main purpose of this ID is to verify the transaction via the queryCard method in the event a valid response is not received. |
| customerPhone | Anything other than +,-, space and 0-9 will be stripped. |
| customerEmail | Sending this optional parameter is highly recommended. |
| customerIP | Any valid IPv4 or IPv6 address is accepted. Sending this optional parameter is highly recommended. |
| storeID | The value of this field is the merchant's store name. Please note that you need to contact Merchant Warrior to enable the storeID feature before you can use this parameter. |
| addCard | This value is a boolean to denote whether the paymentCardNumber associated with the payframeToken should automatically be added to the Merchant Warrior Vault after processing the transaction. |
| custom1 | Freeform field. Returned as |
| custom2 | Freeform field. Returned as |
| custom3 | Freeform field. Returned as |
curl -X POST \
-d method="processAuth" \
-d merchantUUID="5265f8eed6a19" \
-d apiKey="ksmnwxab" \
-d transactionAmount="1.00" \
-d transactionCurrency="AUD" \
-d transactionProduct="Test Product" \
-d customerName="Test Customer" \
-d customerCountry="AU" \
-d customerState="QLD" \
-d customerCity="Brisbane" \
-d customerAddress="123 Test Street" \
-d customerPostCode="4000" \
-d customerPhone="61731665489" \
-d customerEmail="[email protected]" \
-d customerIP="1.1.1.1" \
-d payframeToken="KMJI24557546102398" \
-d payframeKey="b941071d7be8d11f4c8e6c038968bc0d" \
-d hash="b55552ff426d7e3d4885465d27ea0062" https://api.merchantwarrior.com/payframe/
require 'net/http'
require 'uri'
uri = URI.parse("https://api.merchantwarrior.com/payframe/")
request = Net::HTTP::Post.new(uri)
request.set_form_data(
'method' => 'processAuth',
'merchantUUID' => '5265f8eed6a19',
'apiKey' => 'ksmnwxab',
'transactionAmount' => '1.00',
'transactionCurrency' => 'AUD',
'transactionProduct' => 'Test Product',
'customerName' => 'Test Customer',
'customerCountry' => 'AU',
'customerState' => 'QLD',
'customerCity' => 'Brisbane',
'customerAddress' => '123 Test Street',
'customerPostCode' => '4000',
'customerPhone' => '61731665489',
'customerEmail' => '[email protected]',
'customerIP' => '1.1.1.1',
'payframeToken' => 'KMJI24557546102398',
'payframeKey' => 'b941071d7be8d11f4c8e6c038968bc0d',
'hash' => 'b55552ff426d7e3d4885465d27ea0062'
)
response = Net::HTTP.start(uri.hostname, uri.port, use_ssl: uri.scheme == "https") do |http|
http.request(request)
end
puts response.body
import requests
data = {
'method' : 'processAuth',
'merchantUUID' : '5265f8eed6a19',
'apiKey' : 'ksmnwxab',
'transactionAmount' : '1.00',
'transactionCurrency' : 'AUD',
'transactionProduct' : 'Test Product',
'customerName' : 'Test Customer',
'customerCountry' : 'AU',
'customerState' : 'QLD',
'customerCity' : 'Brisbane',
'customerAddress' : '123 Test Street',
'customerPostCode' : '4000',
'customerPhone' : '61731665489',
'customerEmail' : '[email protected]',
'customerIP' : '1.1.1.1',
'payframeToken' : 'KMJI24557546102398',
'payframeKey' : 'b941071d7be8d11f4c8e6c038968bc0d',
'hash' : 'b55552ff426d7e3d4885465d27ea0062'
}
r = requests.post('https://api.merchantwarrior.com/payframe/', data = data)
print(r.text)
<?php
// Setup the POST url
define('MW_API_ENDPOINT', 'https://api.merchantwarrior.com/payframe/');
// Setup POST data
$postData = array (
'method' => 'processAuth',
'merchantUUID' => '5265f8eed6a19',
'apiKey' => 'ksmnwxab',
'transactionAmount' => '1.00',
'transactionCurrency' => 'AUD',
'transactionProduct' => 'Test Product',
'customerName' => 'Test Customer',
'customerCountry' => 'AU',
'customerState' => 'QLD',
'customerCity' => 'Brisbane',
'customerAddress' => '123 Test Street',
'customerPostCode' => '4000',
'customerPhone' => '61731665489',
'customerEmail' => '[email protected]',
'customerIP' => '1.1.1.1',
'payframeToken' => 'KMJI24557546102398',
'payframeKey' => 'b941071d7be8d11f4c8e6c038968bc0d',
'hash' => 'b55552ff426d7e3d4885465d27ea0062'
);
// Setup CURL defaults
$curl = curl_init();
// Setup CURL params for this request
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_URL, MW_API_ENDPOINT);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($postData, '', '&'));
// Run CURL
$response = curl_exec($curl);
$error = curl_error($curl);
// Check for CURL errors
if (isset($error) && strlen($error)) {
throw new Exception("CURL Error: {$error}");
}
// Parse the XML
$xml = simplexml_load_string($response);
// Convert the result from a SimpleXMLObject into an array
$xml = (array)$xml;
// Validate the response - the only successful code is 0
$status = ((int)$xml['responseCode'] === 0) ? true : false;
// Make the response a little more useable
$result = array (
'status' => $status,
'transactionID' => (isset($xml['transactionID']) ? $xml['transactionID'] : null),
'responseData' => $xml
);
exit(var_dump($result));
?>
using System;
using System.Collections.Generic;
using System.Linq;
public class Program {
public static void Main(string[] args) {
using(var client = new System.Net.WebClient()) {
byte[] response = client.UploadValues("https://api.merchantwarrior.com/payframe/",
new System.Collections.Specialized.NameValueCollection() {
{ "method", "processAuth" },
{ "merchantUUID", "578dd399d2373" },
{ "apiKey", "dyqxkzse" },
{ "transactionAmount", "1.00" },
{ "transactionCurrency", "AUD" },
{ "transactionProduct", "Test Product" },
{ "customerName", "Test Customer" },
{ "customerCountry", "AU" },
{ "customerState", "QLD" },
{ "customerCity", "Brisbane" },
{ "customerAddress", "123 Test Street" },
{ "customerPostCode", "4000" },
{ "customerPhone", "61731665489" },
{ "customerEmail", "[email protected]" },
{ "customerIP", "1.1.1.1" },
{ "payframeToken", "KMJI24557546102398" },
{ "payframeKey", "b941071d7be8d11f4c8e6c038968bc0d" },
{ "hash", "d0fb5716a2b85c743ed802bd5bd7284b" },
});
String result = System.Text.Encoding.Default.GetString(response);
Console.WriteLine(result);
}
}
}
Imports System
Imports System.Collections.Generic
Imports System.Linq
Public Module Program
Public Sub Main(args As String())
Using client = New System.Net.WebClient()
Dim response As Byte() = client.UploadValues(
"https://api.merchantwarrior.com/payframe/",
New System.Collections.Specialized.NameValueCollection() From { _
{"method", "processAuth"}, _
{"merchantUUID", "578dd399d2373"}, _
{"apiKey", "dyqxkzse"}, _
{"transactionAmount", "1.00"}, _
{"transactionCurrency", "AUD"}, _
{"transactionProduct", "Test Product"}, _
{"customerName", "Test Customer"}, _
{"customerCountry", "AU"}, _
{"customerState", "QLD"}, _
{"customerCity", "Brisbane"}, _
{"customerAddress", "123 Test Street"}, _
{"customerPostCode", "4000"}, _
{"customerPhone", "61731665489"}, _
{"customerEmail", "[email protected]"}, _
{"customerIP", "1.1.1.1"}, _
{"payframeToken", "KMJI24557546102398"}, _
{"payframeKey", "b941071d7be8d11f4c8e6c038968bc0d"}, _
{"hash", "d0fb5716a2b85c743ed802bd5bd7284b"} _
})
Dim result As [String] = System.Text.Encoding.[Default].GetString(response)
Console.WriteLine(result)
End Using
End Sub
End Module
import java.io.*;
import java.net.*;
import java.util.*;
public class Program{
public static void main(String[] args) {
try{
URL url = new URL("https://api.merchantwarrior.com/payframe/");
Map<String, String> params = new LinkedHashMap<>();
params.put("method", "processAuth");
params.put("merchantUUID", "5265f8eed6a19");
params.put("apiKey", "ksmnwxab");
params.put("transactionAmount", "1.00");
params.put("transactionCurrency", "AUD");
params.put("transactionProduct", "TestProduct");
params.put("customerName", "TestCustomer");
params.put("customerCountry", "AU");
params.put("customerState", "QLD");
params.put("customerCity", "Brisbane");
params.put("customerAddress", "TestStreet");
params.put("customerPostCode", "4000");
params.put("customerPhone", "61731665489");
params.put("customerEmail", "[email protected]");
params.put("customerIP", "1.1.1.1");
params.put("payframeToken", "KMJI24557546102398");
params.put("payframeKey", "b941071d7be8d11f4c8e6c038968bc0d");
params.put("hash", "b55552ff426d7e3d4885465d27ea0062");
StringBuilder postData = new StringBuilder();
for (Map.Entry<String, String> param : params.entrySet()) {
if (postData.length() != 0)
postData.append('&');
postData.append(param.getKey());
postData.append('=');
postData.append(param.getValue());
}
HttpURLConnection conn = (HttpURLConnection)url.openConnection();
conn.setRequestMethod("POST");
conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
conn.setDoOutput(true);
OutputStreamWriter writer = new OutputStreamWriter(conn.getOutputStream());
writer.write(postData.toString());
writer.flush();
BufferedReader reader = new BufferedReader(
new InputStreamReader(conn.getInputStream()));
String line;
StringBuilder sb = new StringBuilder();
while((line = reader.readLine()) != null){
sb.append(line);
}
System.out.println(sb.toString());
writer.close();
reader.close();
}
catch(Exception ex){
ex.printStackTrace();
}
}
}
<?xml version="1.0"?>
<mwResponse>
<custom1/>
<cardExpiryYear>21</cardExpiryYear>
<custom2/>
<custom3/>
<responseMessage>Transaction approved</responseMessage>
<transactionReferenceID>12345</transactionReferenceID>
<cardType>mc</cardType>
<responseCode>0</responseCode>
<authCode>731357421</authCode>
<transactionAmount>1.00</transactionAmount>
<authResponseCode>08</authResponseCode>
<transactionID>1336-20be3569-b600-11e6-b9c3-005056b209e0</transactionID>
<receiptNo>731357421</receiptNo>
<cardExpiryMonth>05</cardExpiryMonth>
<customHash>65b172551b7d3a0706c0ce5330c98470</customHash>
<authSettledDate>2016-11-29</authSettledDate>
<paymentCardNumber>512345XXXXXX2346</paymentCardNumber>
<authMessage>Honour with identification</authMessage>
</mwResponse>
{
"custom1": [],
"cardExpiryYear": "21",
"custom2": [],
"custom3": [],
"responseMessage": "Transaction approved",
"transactionReferenceID": "12345",
"cardType": "mc",
"responseCode": "0",
"authCode": "731357421",
"transactionAmount": "1.00",
"authResponseCode": "08",
"transactionID": "1336-20be3569-b600-11e6-b9c3-005056b209e0",
"receiptNo": "731357421",
"cardExpiryMonth": "05",
"customHash": "65b172551b7d3a0706c0ce5330c98470",
"authSettledDate": "2016-11-29",
"paymentCardNumber": "512345XXXXXX2346",
"authMessage": "Honour with identification"
}
Instantiate the tdsCheck object and set mwCallback (which is the callback function that will run after the 3DS check has completed). After the payframeToken and payframeKey are returned from the MW Payframe, call the checkTDS function. The tdsCheck object will communicate with the customer's bank and may perform a two-factor verification on the customer's card. In the event that the customer's bank opts for a two-factor verification, the verification window will be displayed in the tdsDivID that was configured in the tdsCheck object.
If the chosen div already contains an MW Payframe window, the tdsCheck object will close the MW Payframe window and replace it with the verification window. To show the MW Payframe again, you need to close the verification window with the destroy function below, then re-deploy the payframe.
After the 3DS verification has completed, the tdsCheck object will call mwCallback and return a boolean (indicating whether the 3DS verification resulted in a liability shift or not) and a threeDSToken. These values will also be set as properties of the tdsCheck object (liabilityShifted and mwTDSToken, respectively). The threeDSToken can be submitted with a processCard or processAuth request and should be submitted if you want 3DS protection for a transaction.
tdsCheck Properties
| Property | Description |
|---|---|
| liabilityShifted | A boolean that identifies if the customer authentication has completed and whether liability has shifted to the issuer. Example: true |
| mwTDSToken | This property is used to indicate if a transaction has been authenticated. Example: 8e86aef68037e8849980 |
| mwTDSMessage | This property contains the status of the 3DS verification check. Example: 3DS Successful |
| mwTDSEnrolled | This property is used to indicate if the customer's card is enrolled in 3DS. Example: Y |
Style Parameters
This is a list of the parameters that can be sent with the style option in the tdsCheck object constructor. The tdsCheck object will use the default values listed if a parameter is not set.
| Parameter | Default | Description |
|---|---|---|
| width | 500px | The width of the 3DS verification window Example: width: '800px' |
| height | 500px | The height of the 3DS verification window Example: height: '350px' |
The tdsCheck object also has some a href="#additional-functions">additional functions that can assist with your implementation.
checkTDS Parameters
| Parameter | Description |
|---|---|
| payframeToken | A unique alphanumeric string returned by an MW Payframe that uses the getPayframeToken method. |
| payframeKey | A unique alphanumeric string returned by an MW Payframe that uses the getPayframeToken method. |
| transactionAmount | The amount must be formatted to have two decimal places. Any amounts without two decimal places or amounts less than one cent will be rejected. |
| transactionCurrency | One of the following: AUD, CAD, EUR, GBP, JPY, NZD, SGD, USD. This is provider dependant. Please check with MW before attempting to process transactions in any currency other than AUD. This field is case insensitive. |
| transactionProduct | A product (or sale) id or description. We recommend using an order/product id. This field's primary purpose is to help the transaction be identifiable for reporting and accounting purposes. |
Constructor Parameters
| Parameter | Description |
|---|---|
| merchantUUID | The value of this parameter is provided to you by Merchant Warrior. |
| apiKey | The value of this parameter is provided to you by Merchant Warrior. |
| tdsDivID | This is the id of the div you wish the 3DS verification window to appear in. |
| submitUrl | This parameter is used to set the target environment (Production, Camp). |
| style | This parameter is used to set style options for the 3DS verification window. |
<script src='https://secure.merchantwarrior.com/payframe/payframe.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
var merchantUUID = 'YOUR_MERCHANT_UUID';
var apiKey = 'YOUR_API_KEY';
var src = 'https://secure.merchantwarrior.com/payframe/';
var submitUrl = 'production';
var mwPayframe = new payframe(merchantUUID, apiKey,'cardData', src, submitUrl);
mwPayframe.mwCallback = function(tokenStatus, payframeToken, payframeKey){
if(tokenStatus == 'HAS_TOKEN' && payframeToken && payframeKey) {
//If you want the tdsCheck to use the same loading or loaded functions as the mwPayframe, call link() on the tdsCheck object
tdsCheck.link(mwPayframe);
//When you have the payframeToken and payframeKey, call checkTDS,
//passing in the payframeToken, payframeKey, transactionAmount, transactionCurrency, and transactionProduct
var transAmount = document.getElementById('transAmount').value;
var transCurrency = document.getElementById('transCurrency').value;
tdsCheck.checkTDS(mwPayframe.payframeToken, mwPayframe.payframeKey, transAmount, transCurrency, 'Test Txn');
}
};
mwPayframe.loading = function() {
console.log('payframe or tdsCheck loading');
};
mwPayframe.deploy();
//When the client has entered their card details, call submitPayframe,
//which will perform the action set by the method parameter, getPayframeToken by default
function submitForm(){
mwPayframe.submitPayframe();
return false;
};
//Set tdsStyle properties
var tdsStyle = {
width: '500px',
}
//Instantiate tdsCheck object
var tdsCheck = new tdsCheck(merchantUUID, apiKey, 'cardData', submitUrl, tdsStyle);
//Set mwCallback
tdsCheck.mwCallback = function(liabilityShifted, tdsToken) {
if(liabilityShifted) {
alert('tds token: ' + tdsToken);
//If the bank has taken liability for the transaction,
//submit the tdsToken with a processCard or processAuth transaction
} else {
//If liability wasn't shifted, close the 3DS verification window and re-deploy the payframe for the customer to enter a different card
tdsCheck.destroy();
mwPayframe.deploy();
}
}
//Set any additional functions
tdsCheck.loaded = function() {
console.log('tds loaded');
}
</script>
No sample availableNo sample availableNo sample availableNo sample availableNo sample availableNo sample availableNo sample available
The MWPayframe and tdsCheck object also have some additional functions that can assist with your implementation.
MWPayframe
| Function | Description |
|---|---|
| mwCardTypeUpdated | This is a callback function that is called whenever the card number field is updated. It returns the cardType, cardBin, and whether the card is valid (in that order) as parameters of the function. |
| reset | This function is used to reset the payframe in order to process a second transaction. After processing your first transaction, you won't be able to submit the payframe again unless it is reset. |
| refresh | This function is used to refresh the styling of the payframe. If the payframe loads incorrectly or incompletely, you can use this function to reapply the styling. |
| loading | This is a callback function that is called when the payframe begins loading, after being deployed. You can use this to trigger a loading animation or effect if you wish. |
| loaded | This is a callback function that is called when the payframe has finished loading. You can use this to disable any loading animations you may have started. |
| disable | This function is used to disable the payframe object to stop it listening to messages from the payframe iframe. Use this function before instantiating a new payframe, so that messages will be sent to the new payframe instead of the old payframe. |
tdsCheck
| Function | Description |
|---|---|
| destroy | This function is used to close the 3DS verification window after verification has completed |
| loading | This is a callback function that is called when the 3DS verification window begins loading. You can use this to trigger a loading animation or effect if you wish. |
| loaded | This is a callback function that is called when the 3DS verification window has finished loading. You can use this to disable any loading animations you may have started. |
| link | This function is used to link the tdsCheck to an already-created mwPayframe. If you have written loading and loaded functions for the mwPayframe, this function will make the tdsCheck use the same functions, so you don't have to write them again. |
This is a full list of the parameters that can be sent with the style parameter in the payframe's constructor. If a parameter isn't sent, the payframe will use the default value listed.
| Parameter | Default | Description |
|---|---|---|
| width | 500px | The width of the payframe Example: width: '800px' |
| height | Depends on formLayout | The height of the payframe Example: height: '350px' |
| formLayout | 0 | The layout to use for the payframe elements. Example images of both of the layouts are shown below Example: formLayout: '1' Options: '0', '1' |
| fieldHeight | 40px | The height of the payframe elements Example: fieldHeight: '60px' |
| border | 1px solid #e6ebf1 | The border of the payframe elements Example: border: '2px dashed red' |
| borderBottom | border Parameter | The bottom border of the payframe elements Example: borderBottom: '4px dotted blue' |
| borderColor | border Parameter | The border color of the payframe elements Example: borderColor: '#b13af2' |
| borderLeft | border Parameter | The left border of the payframe elements Example: borderLeft: '4px dotted blue' |
| borderRadius | 4px | The radius of the payframe element borders Example: borderRadius: '0px 30%' |
| borderRight | border Parameter | The right border of the payframe elements Example: borderRight: '4px dotted blue' |
| borderTop | border Parameter | The top border of the payframe elements Example: borderTop: '4px dotted blue' |
| textColor | #32325d | The text color of the payframe elements Example: textColor: 'green' |
| backgroundColor | White | The background color of the payframe elements Example: backgroundColor: 'yellow' |
| direction | ltr(Left to Right) | The direction of the payframe element text Example: direction: 'rlt' |
| font | 18px Helvetica Neue | The font of the payframe elements Example: font: '20px Times New Roman' |
| fontFamily | font Parameter | The font family of the payframe elements Example: fontFamily: 'Arial' |
| fontSize | font Parameter | The font size of the payframe elements Example: fontSize: '20px' |
| fontSizeAdjust | font Parameter | The font size adjust of the payframe elements Example: fontSizeAdjust: '0.58' |
| fontStretch | font Parameter | The font stretch of the payframe elements Example: fontStretch: 'condensed' |
| fontStyle | font Parameter | The font style of the payframe elements Example: fontStyle: 'italic' |
| fontSrc | none | An array of custom fonts to import. Accepts either a google font url, or a font-face style object pointing to a hosted font file Example: fontSrc: ['https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700', {'url':'https://test.com/testFont.woff','format':'woff', 'fontFamily': 'testFont', 'fontStyle: 'normal', 'fontWeight': '400'}] |
| fontVariant | normal | The font variant of the payframe elements Example: fontVariant: 'small-caps' |
| fontVariantAlternates | normal | The font alternate variant of the payframe elements Example: fontVariantAlternates: 'historical-forms' |
| fontVariantCaps | normal | The font caps variant of the payframe elements Example: fontVariantCaps: 'all-small-caps' |
| fontVariantEastAsian | normal | The font East Asian variant of the payframe elements Example: fontVariantEastAsian: 'ruby' |
| fontVariantLigatures | normal | The font ligatures variant of the payframe elements Example: fontVariantLigatures: 'common-ligatures' |
| fontVariantNumeric | normal | The font numeric variant of the payframe elements Example: fontVariantNumeric: 'slashed-zero' |
| fontWeight | normal | The font weight of the payframe elements Example: fontWeight: 'bold' |
| letterSpacing | normal | The letter spacing of the payframe elements Example: letterSpacing: '2px' |
| lineHeight | normal | The line height of the payframe elements Example: lineHeight: '80%' |
| margin | 3px | The margin of the payframe elements Example: margin: '10px 12px' |
| marginBottom | margin Parameter | The bottom margin of the payframe elements Example: marginBottom: '8px' |
| marginLeft | margin Parameter | The left margin of the payframe elements Example: marginLeft: '8px' |
| marginRight | margin Parameter | The right margin of the payframe elements Example: marginRight: '8px' |
| marginTop | margin Parameter | The top margin of the payframe elements Example: marginTop: '8px' |
| opacity | 1 | The opacity of the payframe elements Example: opacity: '0.8' |
| outline | none | The outline of the payframe elements Example: outline: '2px dashed pink' |
| outlineColor | outline Parameter | The outline color of the payframe elements Example: outlineColor: 'green' |
| outlineStyle | outline Parameter | The outline style of the payframe elements Example: outlineStyle: 'solid' |
| outlineWidth | outline Parameter | The outline width of the payframe elements Example: outlineWidth: '4px' |
| padding | 10px 12px | The padding of the payframe elements Example: padding: '15px' |
| paddingBottom | padding Parameter | The bottom padding of the payframe elements Example: paddingBottom: '12px' |
| paddingLeft | padding Parameter | The left padding of the payframe elements Example: paddingLeft: '12px' |
| paddingRight | padding Parameter | The right padding of the payframe elements Example: paddingRight: '12px' |
| paddingTop | padding Parameter | The top padding of the payframe elements Example: paddingTop: '12px' |
| textShadow | none | The text shadow of the payframe elements Example: textShadow: '2px 2px gray' |
| transition | none | The transition of the payframe elements Example: transition: 'width 2s' |
| mozAppearance | none | The appearance of the payframe elements on Firefox Example: mozAppearance: 'button' |
| mozOsxFontSmoothing | auto | The font smoothing of the payframe elements in Firefox on Mac OS Example: mozOsxFontSmoothing: 'grayscale' |
| mozTapHighlightColor | black | The tap highlight color of the payframe elements on Firefox Example: mozTapHighlightColor: 'red' |
| webkitAppearance | none | The appearance of the payframe elements on WebKit- and Blink-based browsers Example: webkitAppearance: 'button' |
| webkitFontSmoothing | auto | The font smoothing of the payframe elements in WebKit- and Blink-based browsers Example: webkitFontSmoothing: 'antialiased' |
| webkitTapHighlightColor | black | The tap highlight color of the payframe elements on WebKit-and Blink-based browsers Example: webkitTapHighlightColor: 'red' |
| cardImageAlignment | left | The placement of the card image in relation to the card number field Example: cardImageAlignment: 'right' Options: 'left', 'right', 'none' |
| cardIconAlignment | middle | The alignment of the card image Example: cardIconAlignment: 'left' Options: 'left', 'middle', 'right' |
| cardImageSize | half | The size of the card image in the card number field Example: cardImageSize: 'full' Options: 'half', 'full' |
| cardImageAnimation | enabled | The animation of the card image in the card number field upon successful validation Example: cardImageAnimation: 'disabled' Options: 'enabled', 'disabled' |
| fieldAutoTabbing | enabled | Whether to automatically tab to the next field upon field completion Example: fieldAutoTabbing: 'disabled' Options: 'enabled', 'disabled' |
| cardIconSet | 1 | The cardIconSet to use for the cardImages. Chosen icon set will also be used for the accepted card type icons below Example: cardIconSet: '2' Options: '1', '2' |
| cardTypeDisplay | middle | The display alignment of the accepted card type images Example: cardTypeDisplay: 'left' Options: 'left', 'middle', 'right', 'none' |
| cardTypeWidth | 20px | The width of the accepted card type images Example: cardTypeWidth: '40px' |
| errorDisplayMode | label | The display mode of the field validation errors Example: errorDisplayMode: 'popup' Options: 'label', 'popup' |
| payframeHeightScaling | static | The scaling mode of the payframe's height Example: payframeHeightScaling: 'dynamic' Options: 'static', 'dynamic' |
| fieldValidStyle | none | A subset of styling options for the fields when valid Example: fieldValidStyle: {'color': 'green', 'borderColor': 'green'} Options: A full list of secondary styling options is below. |
| fieldErrorStyle | none | A subset of styling options for the fields when invalid Example: fieldErrorStyle: {'color': 'red', 'borderColor': 'red'} Options: A full list of secondary styling options is below. |
| fieldFocusStyle | none | A subset of styling options for the fields when focused Example: fieldFocusStyle: {'color': 'black', 'borderColor': 'blue'} Options: A full list of secondary styling options is below. |
| placeholderText | none | A list of custom labels to replace the default placeholder text. Alternatively, set a field to 'none' for no placeholder text Example: placeholderText: {'name': 'Bob Smith', 'number': '1234567891011121', 'expiry': 'none', 'cvv': '123'} |
| placeholderStyle | none | A subset of styling options for the field placeholder text Example: placeholderStyle: {'color': 'darkgrey', 'fontSize': '15px'} Options: A full list of secondary styling options is below. |
| placeholderValidStyle | display:none | A subset of styling options for the field placeholder text when field is valid. Defaults to hidden Example: placeholderValidStyle: {'color': 'green', 'top': '0', 'fontSize': '10px} Options: A full list of secondary styling options is below. |
| placeholderErrorStyle | display:none | A subset of styling options for the field placeholder text when field has input and is invalid. Defaults to hidden Example: placeholderErrorStyle: {'color': 'red', 'top': '0', 'fontSize': '10px} Options: A full list of secondary styling options is below. |
| placeholderFocusStyle | display:none | A subset of styling options for the field placeholder text when field is focused. Defaults to hidden Example: placeholderFocusStyle: {'color': 'blue', 'top': '0', 'fontSize': '10px} Options: A full list of secondary styling options is below. |
| customErrorMessages | none | A list of custom messages to replace the default validation errors Example: customErrorMessages: {'name': {'required':'Name Missing'}, 'number': {'required':'Number Missing','checkLuhn':'Invalid card number'}} Options: A full list of replaceable validation messages is below. |
| errorLabelStyle | none | A subset of styling options for the error labels Example: errorLabelStyle: {'color': 'red', 'fontFamily': 'sans-serif', 'fontSize': '12px'} Options: A full list of secondary styling options is below. |
| fieldLabelText | none | A list of custom labels to replace the default field label text, if set. Alternatively, set a field to 'none' for no field label Example: fieldLabelText: {'name': 'Card Name', 'number': 'Card Number', 'expiry': 'none', 'cvv': 'none'} |
| fieldLabelStyle | display:none | A subset of styling options for the field labels. Defaults to hidden Example: fieldLabelStyle: {'color': 'black', 'fontSize': '16px} Options: A full list of secondary styling options is below. |
Form Layouts
This is an example of how the different form layouts look with the getPayframeToken and addCard implementations. The examples below are all using the default styling.
| Index | getPayframeToken | addCard |
|---|---|---|
| 0 |  |
 |
| 1 |  |
 |
Card Icon Sets
| Index | Icons |
|---|---|
| 1 |       |
| 2 |        |
Customizable Validation Errors
This is a full list of validation errors that can be overwritten with custom messages.
| Validation Rule | Fields | Description |
|---|---|---|
| required | name, number, expiry, cvv | Checks that field is present |
| minLength | name, number, cvv | Checks minumum length of field |
| maxLength | name, number, cvv | Checks maximum length of field |
| containsCardNumber | name | Checks that the name field doesn't contain a PAN |
| validCard | number | Checks that card number passes luhn check |
| checkAcceptedCardType | number | Checks that card number type is one of the approved types |
| validDate | expiry | Checks that expiry is a valid date |
| currentDate | expiry | Checks that card hasn't expired |
Secondary Stying Options
This is a full list of secondary styling options that can be set for particular fields or field states. For some field states, setting a font family or size that is different from the field's default can cause alignment issues on formLayout 0.
| Parameter | Applicable Groupings | Description |
|---|---|---|
| backgroundColor | fieldValid, fieldError, fieldFocus, errorLabel | The background color of the elements |
| border | errorLabel | The border of the elements |
| borderColor | fieldValid, fieldError, fieldFocus | The border color of the elements |
| borderRadius | fieldValid, fieldError, fieldFocus, errorLabel | The border radius of the elements |
| color | all | The text color of the elements |
| cursor | placeholder, placeholderValid, placeholderError, placeholderFocus | The cursor style when over the elements |
| display | placeholderValid, placeholderError, placeholderFocus, fieldLabel | The display of the elements. Accepts 'none' or 'block' |
| font | all | The font of the elements |
| fontFamily | all | The font family of the elements |
| fontSize | all | The font size of the elements |
| fontWeight | fieldLabel, errorLabel, placeholder | The font weight of the elements |
| left | placeholder, placeholderValid, placeholderError, placeholderFocus | The left edge of the elements |
| lineHeight | errorLabel, fieldLabel | The line height of the elements |
| margin | fieldLabel | The margin of the elements. Can also be set via marginBottom, marginLeft, marginRight, and marginTop |
| padding | errorLabel | The padding of the elements. Can also be set via paddingBottom, paddingLeft, paddingRight, and paddingTop |
| top | placeholder, placeholderValid, placeholderError, placeholderFocus | The top edge of the elements |
| transition | placeholder | The transition of the elements |