Payment Setup

Just Make It Work !
I Know What I'm Doing !

Transaction Modes

Merchant Reference

Transaction Reference

Amount

Payment Methods

Authentication Methods

Supported Card Types

ThreeDSecure Challenge Indicator

Language

Transaction Mode

Merchant Reference

Transaction Reference

Amount

Payment Methods

Authentication Methods

ThreeDSecure Challenge Indicator

Client Token Id

Hosted Fields Configuration

{
  "fields": {
    "cardholderName": {
      "containerId": "hosted-cardholder-name",
      "placeholder": "Cardholder Name",
      "fieldName": "Cardholder Name"
    },
    "cardNumber": {
      "containerId": "hosted-card-number",
      "placeholder": "Card Number",
      "fieldName": "Card Number"
    },
    "expiryDateMonth": {
      "containerId": "hosted-expiry-date-month",
      "placeholder": "MM",
      "format": "MM",
      "fieldName": "Expiry Date Month",
      "type": "input"
    },
    "expiryDateYear": {
      "containerId": "hosted-expiry-date-year",
      "placeholder": "YY",
      "format": "YY",
      "fieldName": "Expiry Date Year",
      "type": "input"
    },
    "cvv": {
      "containerId": "hosted-cvv",
      "placeholder": "CVV",
      "fieldName": "Card Verification Value",
      "mask": false
    },
    "entryCardNumber": {
      "containerId": "hosted-entry-card-number",
      "placeholder": "Entry Card Number",
      "fieldName": "Entry Card Number",
      "required": false
    },
    "entryCardExpiryDateMonth": {
      "containerId": "hosted-entry-card-expiry-date-month",
      "placeholder": "MM",
      "format": "MM",
      "fieldName": "Entry Card Expiry Date Month",
      "type": "input",
      "required": false
    },
    "entryCardExpiryDateYear": {
      "containerId": "hosted-entry-card-expiry-date-year",
      "placeholder": "YY",
      "format": "YY",
      "fieldName": "Entry Card Expiry Date Year",
      "type": "input",
      "required": false
    }
  },
  "events": {
    "onFocus": "onFocus",
    "onBlur": "onBlur",
    "onInput": "onInput",
    "onCardTypeChange": "onCardTypeChange"
  },
  "styles": {
    "hostedFieldInvalid": {
      "color": "red"
    },
    "hostedFieldValid": {
      "color": "green"
    },
    "hostedFieldFocus": {
      "color": "#008dca"
    },
    "hostedField": {
      "background-color": "transparent",
      "color": "black",
      "padding": "8px 16px",
      "font-size": "14px",
      "font-family": "monospace, courier"
    }
  },
  "language": "en",
  "supportedCardTypes": ["VISA", "MASTERCARD", "AMEX"]
}

Billing Address