1. Web SDK
Merchant Warrior API 2.0
  • API
    • Getting Started
    • Guides
      • Xero Connection
      • Xero Custom URL
      • wooCommerce PayID
      • Middleware
      • Hostaway
    • Direct API
      • getAccessToken
      • processCard
      • processAuth
      • processCapture
      • processBatch
      • retrieveBatch (CSV)
      • retrieveBatch (JSON Response)
      • retrieveBatch (JSON Notify)
      • refundCard
      • queryCard
      • processDDebit
      • processDDebitAuth
      • processVoid
      • verifyCard
      • queryDD
      • queryBIN
      • getSettlement
      • checkEnrollment
      • checkPARes
      • addBlacklistedCard
      • removeBlacklistedCard
      • queryBlacklistedCard
      • simulateNotify
      • getSurcharge
    • 3DS 2.0
      • Introduction
      • 3DS 2 Authentication Flows
      • Step 3 - 3DS Method Data
      • Step 5 - Challenge
      • Step 1 - getAccessToken
      • Step 2 - checkEnrollment
      • Step 4 - checkTDSAuth
      • Step 6 - checkPARes
      • Step 7 - processCard
      • Authorization Only processCard
    • PayLink
      • Introduction
      • Generate PayLink
    • PayID
      • Introduction
      • Create
      • Transaction
      • Get
      • Update
      • Status
      • List
      • Refund
    • PayTo
      • Introduction
      • Simulator
      • Certification
      • Actions and Statuses
      • Agreements
        • Agreements
        • Notifications
        • Create Agreement
        • Get Agreement
        • Amend Agreement
        • Amend Agreement Status
        • Recall Agreement Action
      • Payments
        • Payments
        • Notifications
        • Create Payment
        • Get Payment
        • Get Payment Status
        • Search Payments
    • Confirmation of Payee
      • Introduction
      • Sandbox Simulations
      • Validate
    • POS
      • Introduction
      • processPOS
      • refundPOS
      • voidPOS
      • deregisterPOS
    • Web SDK
      • Introduction
      • Usage
      • getAccessToken
      • Options
      • Initiate
      • Payframe Functionality
      • Middleware
      • addCard
    • Payframe
      • Introduction
      • Usage
      • Constructor
      • tdsCheck
      • Additional Functions
      • Styling
      • processCard
      • processAuth
    • Digital Wallets
      • Apple Pay Prerequisites
      • Google Pay Prerequisites
      • Web SDK
      • Manual Integration
      • processCard
      • addCard
      • getMerchantSession
      • decryptApplePayToken
    • Token Payments
      • Introduction
      • Key Management
      • addCard
      • removeCard
      • cardInfo
      • changeExpiry
      • processCard
      • processAuth
    • Batch
      • Introduction
      • Card Batches
      • Token Batches
      • Direct Debit Batches
    • Forter
      • Introduction
      • Testing
    • Payouts
      • Introduction
      • Sandbox Simulations
      • Notifications
      • Create Payouts
      • Get Payout Status
      • Resend Notifications
      • Get Payout Transaction Status
      • Get Payout Transaction Notify
    • Partner API
      • Introduction
      • addMerchant
      • updateMerchant
      • checkMerchant
    • Notifications
      • Notifications
  • Hosted Payment Page
    • processCard
  1. Web SDK

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, error) => {
      // payment complete logic here
    });
  });
Modified at 2026-07-10 05:25:06
Previous
Options
Next
Payframe Functionality
Built with