Merchant Warrior

Web SDK

Introduction

Our Web SDK can be used for all of your frontend implementation needs. It enables you to easily integrate the following products and features -

Payframe
- Card payments
- Token generation
- 3DS
Digital Wallets
- Apple Pay
- Google Pay

A sample jsFiddle to illustrate all of Web SDK concepts can be found here: https://jsfiddle.net/merchantwarrior/yx9362rf/

Usage

Include the SDK and Stylesheet on your page

Sandbox

<script src="https://securetest.merchantwarrior.com/sdk/merchantwarrior.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://securetest.merchantwarrior.com/sdk/merchantwarrior.css" class="mw-style">

Production

<script src="https://secure.merchantwarrior.com/sdk/merchantwarrior.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://secure.merchantwarrior.com/sdk/merchantwarrior.css" class="mw-style">

getAccessToken

The first step for any interaction with the Web SDK is to generate an accessToken. Access tokens are generated server side with your Merchant UUID, apiKey and apiPassphrase, then passed to the frontend for consumption by the Web SDK. They are single use, and expire in 10 minutes from creation time.

Documentation on using our API to generate an accessToken can be found here.

Options

The Web SDK has a number of options that can be used with your implementation. These options should be inserted into a <script> section on your page.

The options available are listed below.

Properties

Property	Description
customer	Type: Object
customer.name	Name of the customer Type: String
customer.country	Country of the customer Type: String
customer.state	State of the customer Type: String
customer.city	City of the customer Type: String
customer.address	Street address of the customer Type: String
customer.postCode	Postcode of the customer Type: String
customer.phone	Phone number of the customer Type: String
customer.email	Email of the customer Type: String
summary	Type: Object
summary.total	Type: Object
summary.total.amount	Total amount of the transaction, formatted with 2 decimal places for cents. Type: String
summary.total.label	????????? Type: String
summary.customer	Type: Object
summary.addCard	Indicates if the payment method used should be tokenised. If true, a cardID will be returned. Type: Boolean
summary.recurring	Indicates if the payment is a recurring payment. Type: Boolean
summary.style	Type: String
summary.googlePay	Type: Object
summary.googlePay.allowedAuthMethods	The GP authentication method you wish to use. Can be one or both of the following - PAN_ONLY CRYPTOGRAM_3DS Type: Array of strings
summary.googlePay.buttonHeight	Height, in pixels, of the Google Pay button. Type: String
summary.googlePay.buttonWidth	Width, in pixels, of the Google Pay button. Type: String
summary.googlePay.marginTop	Top margin, in pixels, of the Google Pay button. Type: String
summary.googlePay.marginBottom	Bottom margin, in pixels, of the Google Pay button. Type: String
summary.googlepay.allowedCardNetworks	Optional array specifying which card types are allowed. If not specified, all cards will be allowed. Possible values include - visa mc amex Type: Array of strings
summary.googlepay.threeDS	Indicates whether 3DS should be performed on the Google Pay transaction. This feature will detect if liability shift occurred, and if not, perform a separate 3DS process. Type: String
summary.applePay	Type: Object
summary.applePay.buttonHeight	Height, in pixels, of the Apple Pay button. Type: String
summary.applePay.buttonWidth	Width, in pixels, of the Apple Pay button. Type: String
summary.applePay.marginTop	Top margin, in pixels, of the Apple Pay button. Type: String
summary.applePay.marginBottom	Bottom margin, in pixels, of the Apple Pay button. Type: String
summary.applepay.allowedCardNetworks	Optional array specifying which card types are allowed. If not specified, all cards will be allowed. Possible values include - visa mc amex Type: Array of strings
wallets	An array of values indicating what wallets you wish to use. The following values are valid - googlepay applepay basic-card Type: Array of strings
payframe	Type: Object
payframe.threeDS	Indicates if you wish to enable 3DS for payments through the Payframe. Type: Boolean
payframe.submitUrl	The URL the Payframe should submit to. One of the following values should be used - Sandbox: https://base.merchantwarrior.com/payframe/ Production: https://api.merchantwarrior.com/payframe/ Type: String
payframe.styles	An object of CSS styles to apply to the Payframe. Possible options are shown here. Type: Object
payframe.tdsStyles	An object of CSS styles to apply to the 3DS iFrame. Possible options are shown here. Type: Object
options	Type: Object
options.environment	Indicates which environment to use. One of the following values - development production Type: String
options.autoProcess	Indicates if the token should be used to process the transaction as soon as it is obtained. Type: Boolean
options.middleware	URL or Javascript promise to use as your middleware. Must be specified if autoProcess is set to false. More details below. Type: String
transaction	Type: Object
transaction.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. Type: String
transaction.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. Type: String
transaction.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. Type: String
transaction.custom1	Freeform field. Returned as in the response. Type: String
transaction.custom2	Freeform field. Returned as in the response. Type: String
transaction.custom3	Freeform field. Returned as in the response. Type: String
transaction.currency	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. Type: String

Request

Copy

const summary = {
  total: {
    amount: '10.00',
    label: 'MOBILE TEST',
  },
  customer: {
    name: 'Tony Stark',
    country: 'AU',
    state: 'QLD',
    city: 'Brisbane',
    address: '345 Ann Street',
    postCode: '4000',
    phone: '61491570156',
    email: '[email protected]'
  },
  addCard: true,
  recurring: true,
  style: 'dark',
  transaction: {
    transactionProduct: "Invoice",
    transactionReferenceID: "ref1234",
    storeID: "store123",
    custom1: "one",
    custom2: "two",
    custom3: "three",
    currency: "AUD"
  },
  googlePay: {
    allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
    buttonHeight: '45px',
    buttonWidth: '100%',
    marginTop: '10px',
    marginBottom: '10px',
    threeDS: true,
  },
  applePay: {
    buttonHeight: '45px',
    buttonWidth: '100%',
    marginTop: '10px',
    marginBottom: '10px',
  },
  wallets: [
    'googlepay',
    'applepay',
    'basic-card'
  ],
  payframe: {
    threeDS: true,
    submitUrl: 'https://base.merchantwarrior.com/payframe/',
    styles: {
      fontFamily: 'Open Sans, sans-serif',
      fontSrc: ['https://fonts.googleapis.com/css?family=Open+Sans'],
    },
    tdsStyles: {
      width: "500px",
      height: "500px"
    }
  }
}

const options = {
  environment: 'development',
  autoProcess: true,
  // middleware: '/.well-known/MerchantWarrior.php', // optional
}

const summary = { total: { amount: '10.00', label: 'MOBILE TEST', }, customer: { name: 'Tony Stark', country: 'AU', state: 'QLD', city: 'Brisbane', address: '345 Ann Street', postCode: '4000', phone: '61491570156', email: '[email protected]' }, addCard: true, recurring: true, style: 'dark', transaction: { transactionProduct: "Invoice", transactionReferenceID: "ref1234", storeID: "store123", custom1: "one", custom2: "two", custom3: "three", currency: "AUD" }, googlePay: { allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"], buttonHeight: '45px', buttonWidth: '100%', marginTop: '10px', marginBottom: '10px', threeDS: true, }, applePay: { buttonHeight: '45px', buttonWidth: '100%', marginTop: '10px', marginBottom: '10px', }, wallets: [ 'googlepay', 'applepay', 'basic-card' ], payframe: { threeDS: true, submitUrl: 'https://base.merchantwarrior.com/payframe/', styles: { fontFamily: 'Open Sans, sans-serif', fontSrc: ['https://fonts.googleapis.com/css?family=Open+Sans'], }, tdsStyles: { width: "500px", height: "500px" } } } const options = { environment: 'development', autoProcess: true, // middleware: '/.well-known/MerchantWarrior.php', // optional }

No sample available

No sample available

No sample available

No sample available

No sample available

No sample available

No sample available

No sample available

No sample available

No sample available

No sample available

No sample available

Initiate

Once all options are set, you can initiate the Web SDK. The below example shows how to initiate both a Payframe and Digital Wallet buttons -

MerchantWarrior.createWithToken(token, options).then((mwarrior) => {
    // Initiate Payframe
    mwarrior.loadPayframe(method, 'cardData', summary).then((mwPayframe) => {
        payframeFunctionality(mwPayframe);
    });

    // Initiate Digital Wallet buttons
    mwarrior.paymentRequest(summary).then((element) => {
      element.mount('wallet-buttons');
    });

    mwarrior.on('payment-complete', (status, response, third) => {
      // payment complete logic here
    });
  });

Payframe Functionality

In the above example, you can see that there is a payframeFunctionality function. This function simply encompasses all Payframe functionality, as if it were to be implemented separately. The Payframe documentation can be consulted for the various options available for it, which can be found here.

Middleware

If you wish to maintain full control of when the transaction should be submitted to Merchant Warrior for processing, you will need to specify your middleware. More details can be found on our Middleware Guide.