Drop in - CARD

1. Interaction Process

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#e6f0ff',
    'primaryTextColor': '#333',
    'primaryBorderColor': '#5b9bd5',
    'lineColor': '#888',
    'actorMargin': 40,
    'noteBkgColor': '#0056b3',
    'noteTextColor': '#ffffff',
    'noteBorderColor': '#004a99'
  }
}}%%
sequenceDiagram
    participant User as User
    participant Page as Merchant Page
    participant Component as PayerMax
Drop-in Component
    participant MServer as Merchant Server
    participant PMServer as PayerMax Server
    participant Channel as Payment Channel
Wallet/Bank, etc.

    %% 1. Initialization Phase
    User->>Page: 1.1 Select product and place order
    Page->>MServer: 1.2 Send order information
e.g., Country, Currency, etc.
    MServer->>PMServer: 1.3 Get Drop-in initialization info
clientKey and sessionKey
    PMServer-->>MServer: 1.4 Return results
clientKey and sessionKey
    MServer-->>Page: 1.5 Return results
including clientKey and sessionKey
    Page->>Component: 1.6 Create and mount PayerMax component

    %% 2. Token Acquisition Phase
    User->>Page: 2.1 User enters payment information
    Page->>Component: 2.2 Request paymentToken
    Component->>PMServer: 2.3 Get paymentToken
    PMServer-->>Component: 2.4 Return result
including paymentToken
    Component-->>Page: Return paymentToken

    %% 3. Order Submission and Payment
    User->>Page: 3.1 Confirm payment
    Page->>Component: 3.2 Submit payment
including paymentToken
    Component->>MServer: 3.3 Submit order
including paymentToken
    MServer->>PMServer: 3.4 Create payment
Call Drop-in checkout API
    PMServer->>Channel: 3.5 Payment request
    PMServer-->>MServer: 3.6 Return result
    MServer-->>Component: 3.7 Return result
    Component-->>Page: 3.8 Return result

    %% 4. Obtain Payment Result (Logic Box)
    rect rgb(235, 245, 255)
        Note over MServer, PMServer: Obtain Payment Result
        
        Note over MServer, PMServer: Via Payment Result Notification
        PMServer->>MServer: 4.1 Asynchronous notification of payment result
        MServer->>MServer: 4.2 Update payment status
        MServer-->>PMServer: 4.3 Return response

        Note over MServer, PMServer: Via Payment Order Query
        MServer->>PMServer: 6.1 Query payment transaction
        PMServer-->>MServer: 6.2 Transaction details, including payment result
        MServer->>MServer: 6.3 Update payment status
    end

2. API Introduction

2.1 Interface List

Related Interaction Sequence	Call Direction	API Type	API PATH
3.1 Obtain hosted component initialization information	`Merchant` -> `PayerMax`	`Backend API`	/applyDropinSession
3.3 Create payment, call hosted component order creation API	`Merchant` -> `PayerMax`	`Backend API`	/orderAndPay
3.4.1 Asynchronous notification of payment results	`PayerMax` -> `Merchant`	`Backend API`	/collectResultNotifyUrl
3.4.2 Query payment transaction	`Merchant` -> `PayerMax`	`Backend API`	/orderQuery

2.2 Environmental Information

Test environment request address：https:// pay-gate-uat.payermax.com/aggregate-pay/api/gateway/ <Interface PATH>
Integrated Environment：https:// pay-gate.payermax.com/aggregate-pay/api/gateway/ <Interface PATH>

2.3 Request header

"headers": {
"Accept": "application/json",
"sign": "Please refer to the signing rules: https://docs-v2.payermax.com/doc-center/developer/config-settings.html", // Required
"Content-Type": "application/json"
}

3.Start Integration

3.1 Getting Drop in Initialization Information

The merchant server through the /applyDropinSession API interface, initiates an HTTP POST request to obtain the client token clientKey and the session token sessionKey required for the initialization of the drop in.

/applyDropinSession API Example of an interface request:

json

{
    "requestTime": "2024-11-20T01:56:36.753-02:00",
    "keyVersion": "1",
    "data": {
            "country":"US",
            "currency": "USD",
            "totalAmount": "19.99",
            "componentList": ["CARD","APPLEPAY"],
            "userId": "1447410849000200"
    },
    "appId": "381ded7c863c439a9e29b4519867965a",
    "version": "1.1",
    "merchantNo": ""
}

/applyDropinSession API Example of an interface response:

json

{
    "msg": "",
    "code": "APPLY_SUCCESS",
    "data": {
            "sessionKey": "964bffa7c9eb4951bd5ba11a2691e5ed",
            "notSupportedComponent": [],
            "clientKey": "8eef820ecbd443b7a608c2e0863750eb"
    }
}

3.2 Render the Drop in

Introduce the CDN package on the relevant HTML page.

html

<script src="https://cdn.payermax.com/dropin/js/pmdropin.min.js"></script>

Embed a card button display area on the merchant page using a div tag.

html

<div class="frame-card">  
    <!-- 表单内容 -->
</div>

Initialize PayerMax Frames。

// Initializing card components
const card = PMdropin.create('card', {
  clientKey: "Client Public Key", // obtained in step 1.1 data.clientKey
  sessionKey: "Session Token", // obtained in step 1.1 data.sessionKey
  sandbox: false, // The default is false, which means that the production environment
  hideSaveCard: false, //Whether to hide the save card information option, the default is false show
  hideCardBrands: false, //Whether to hide the logo of the card brand in the upper left corner, the default is false show
});
// Example of mounting
card.mount('.frame-card'); // Mounts to the first dom element it matches.
// Timing of component loading completion
card.on('ready', () => {
    // Remove customized loading              
})

Listen to form filling status and set payment button dynamically (optional). By listening to the events of the form, you can monitor the legitimacy of the information filled in by the user in real time, so as to dynamically set whether the Payment button can be clicked or not.

card.on('form-check', (res) => {
  // res.isFormValid is the form status. The value is false/true
  // true means the form passes the validation and can be paid, false means the validation doesn't pass and can't be paid, and the pay button can't be clicked.
  console.log('[dropin][form-check]:', res)
})

The user clicks the payment button, and the merchant submits the payment to the PayerMax server.

// The user clicks the payment button to submit the payment
function goPay(){
    card.emit('setDisabled', true) // Freeze the form after clicking the payment button to prevent duplicate submissions during the payment process
    card.emit('canMakePayment')
      .then(res => {
        if (res.code === 'APPLY_SUCCESS') {
          const paymentToken = res.data.paymentToken // Payment token, used by the payment API
          // Initiate the payment API
          // The merchant requests their own backend interface to place an order
          // The merchant constructs the request parameters using "params" on their own, and needs to include the paymentToken
            _postapi('orderAndPay',params).then(res =>{
              const code = (res || {}).code
              // The merchant returns the payment result to the frontend
              if (code == 'APPLY_SUCCESS') {  
                  if(res.threeDSUrl){ 
                // Complete 3DS using the pop-up window within the PayerMax component; alternatively, open the threeDSUrl in a new browser tab to complete 3DS
                    handle3DS(threeDSUrl)
                }
                // Payment successful, display the payment result
              }  else {
                  // Payment failed, display the failure result
              }
        }
          card.emit('setDisabled', false) // Unfreeze the form after the payment API is completed
        }
      })
      .catch(err => {
        card.emit('setDisabled', false) // Unfreeze the form if an exception occurs
      })
}

// After orderAndPay, if the returned URL (which is the threeDSUrl) is obtained, use the handle3DS method to trigger the pop-up window
function handle3DS(threeDSUrl) {
  card.create3DSPopup({
    url: threeDSUrl,
    // If width/height are not passed, they will be automatically calculated based on the device and viewport; they can also be explicitly passed as '80%', '400px', etc.
  })
  .then(res => {
    if (res.code === '3DS_PROCESSED') {
      // The 3DS process is completed, continue with the payment flow.
      console.log('3DS process completed', res.data);
      // At this point, the merchant needs to maintain the existing logic, and the merchant side should actively query the payment result to proceed with subsequent merchant-side interactions.
      proceedPayment(res.data);
    }
  })
  .catch(err => {
    if (err.code === 'USER_CANCEL') {
      // The merchant may choose not to handle this, but should allow the user to click the payment button again
      showMessage('You have closed the authentication window');
    } else {
      showMessage('An exception occurred during authentication, please try again');
    }
  });
}

3.3 Create Payment

Merchant client: the user clicks to initiate a payment, checks if the payment is available, and gets the paymentToken.

card.emit('setDisabled', true) // Freeze the form after clicking the payment button to prevent double submission of the payment process
card.emit('canMakePayment')
  .then(res => {
    if (res.code === 'APPLY_SUCCESS') {
      const paymentToken = res.data.paymentToken // Payment token, payment interface usage
      // Initiates the payment interface 
      // The merchant itself requests the backend interface to place the order
      // The merchant itself constructs the request parameters with params, which need to be accompanied by a paymentToken.
        _postapi('orderAndPay',params).then(res =>{
          const code = (res || {}).code
          //Merchants return payment results to the front end
          if (code == 'APPLY_SUCCESS') {     
            //Payment success, show payment result 
          } else {
            //Payment failure, show payment result
          }
    }
      card.emit('setDisabled', false) // Unfreeze form after payment interface completion
    }
  })
  .catch(err => {
    card.emit('setDisabled', false) // Unfreeze form after an exception occurs
  })

Merchant server: calls the /orderAndPay API interface to initiate the HTTP POST request and create the payment.

Note:

In card payment, 3DS authentication process may be triggered. Please refer to Card Payment - Drop In Integration - Complete 3DS Authentication.
After the payment is created, the merchant can specify the payment shutdown time in seconds for a single payment via the interface entry expireTime, the value of which must be greater than 1800 (30 minutes) and less than 86400 (24 hours). If the value passed in is less than 1800, the system will reset to the minimum value of 30min; if the value passed in is less than 86400, the system will reset to the maximum value of 86400. If the merchant doesn't specify it, the specific shutdown time will be different according to the payment method used.

/orderAndPay API Example of an interface request:

curl --request POST \
  --url 'https://pay-gate-uat.payermax.com/aggregate-pay/api/gateway/orderAndPay' \
  --header 'Accept: application/json' \
  --header 'Content-Type: application/json' \
  --header 'sign: FPFVT3o227JrFRbqu19boZCpVVTF9KznxyRawUmxpfXilHV/0yK46haPhAjNu1hPUMy7Vw/ILXhfzffNm4Fj0apWknlTY9OJxnSoQxS9BTFtc61tn5yV1q69x/kkBl82/qwg+XTJ4fOzy7Mar3VaC1E2PlDA6RkkKBUyNE6RYgsdB+Su7an4+4HVTNAnoe74WyvBgxTLMNg28igBTdqxaO3w/UBY6ObVp7vkqkQGdL1Y+HgmMYaAVwrM3+ALWGId0sJ+YqTY4WJ+0xCRGhaSnybiIjZsQEYyID68WNUfuavDLDsEhaMm/HfQvf5p0R1Ltovp3wwJnEbQcjY458iX5A==' \
  --data '{
    "requestTime": "2025-05-28T03:52:42.591-02:00",
    "keyVersion": "1",
    "appId": "tested7c863c439a9e29b4519867965a",
    "version": "1.4",
    "merchantNo": "TEST10116880289",
    "data": {
        "integrate": "Direct_Payment", # In Drop In mode, specify Direct_Payment
        "totalAmount": 39.99,
        "country": "SA",
        "expireTime": "3600",
        "paymentDetail": {
            # When payment is made, it is fetched via the canMakePayment event response of the JS SDK's emit interface, non-null
            "paymentToken": "TEST12637c2c2d942239d9a2661c4ad14f9", 
            "buyerInfo": {
                "clientIp": "176.16.34.144",
                "userAgent": "Chrome"
            },
            # When paid, fetched via the response of the JS SDK's create interface, non-null
            "sessionKey": "test29632c3643768e3b65ef6a31c9ce" # Non-null in Drop In mode
        },
        "frontCallbackUrl": "https://front.your.com/pay/index.html",
        "subject": "River Game HK Limited",
        "outTradeNo": "ov1_da78b1f3c2f9443b966347fc89305fc9",
        "notifyUrl": "https://notify.your.com/pay/paymentWebHookPayerMaxServlet",
        "currency": "SAR",
        "userId": "1822613953000446",
        "terminalType": "WEB"
    }
}'

/orderAndPay API Example of an interface response:

json

{
    "msg": "Success.",
    "code": "APPLY_SUCCESS",
    "data": {
        "outTradeNo": "test_da78b1f3c2f9443b966347fc89305fc9",
        "tradeToken": "T2024052805951921811176",
        "status": "SUCCESS"
    }
}

3.4 Get Payment Results

Create Payment/orderAndPay API The data.status of the interface response is not a payment end-state and therefore should not be used by merchants to update payment results directly.

3.4.1 Adoption of notification of payment results

See 链接要更新Get Payment Result Integration - Adoption of Payment Result Notification.

3.4.2 Inquiry via Payment Orders

See 链接要更新Get Payment Result Integration - Inquiry via payment order.

4.Card Payment Frontend API

4.1 API

Use PMdropin.API.

API	Description	Details
create	Instantiate a built-in component	refer to 链接要更新 create
mount	Mount instantiated component to `div` tag	refer to 链接要更新mount
on	Listen events	refer to 链接要更新on
emit	Trigger events	refer to 链接要更新emit

4.1.1 create

Used to initialize components, please use PMdropin.create(ComponentName, Options).

ComponentName Explanation

ComponentName	Field Type	Description
Card	String	Card Compoment

Options Explanation

Options	Required Or Not	Field Type	Default Value
clientKey	Y	String	-
sessionKey	Y	String	-
sandbox	N	Boolean	`false`
language	N	String	`en`
theme	N	String	`light`
customLocalization	N	Object	-
customTheme	N	Object	-
grayscale	N	String	`'0'`
isRtl	N	Boolean	`false`
hideSaveCard	N	Boolean	`false`
hideCardBrands	N	Boolean	`false`
hideCardHolderName	N	Boolean	`false`
saveCardChecked	N	Boolean	`true`
ignoreUserCheckedCache	N	Boolean	`false`
hideRecommendAccount	N	Boolean	`false`
openTermsInCurrentPage	N	Boolean	`false`
termsPopupConfig	N	Object	-
>>showMask	N	Boolean	`true`
>>closeOnClickMask	N	Boolean	`true`

4.1.2 mount

Used to mount initialization component instances, please use PMdropin.mount(Tag).

Tag Explanation

Tag	Description
id	The value of the id element that needs to be mounted, such as `PMdropin.mount('#card-frame')`
class	The value of the class element that needs to be mounted, such as `PMdropin.mount('.card-frame')`

4.1.3 on

Used to listen to component built-in response events, please use PMdropin.on(Event, CallbackFunction).

Event Explanation

Tag	Description	Returned Value
ready	Triggered when the component completes loading	`null`
form-check	Monitor card component verification status real-time	refer to Event Response
load	Triggered when the component completes loading	Object - type：Component type card/applepay/googlepay - code：Response code SUCCESS indicates that the loading is successful, and the rest of the enumerations indicate that the loading failed - msg：response message

Example：

PMdropin.on('form-check', function(event) {
  if (event.isFormValid) {
    // Form verification passed
  }
});

4.1.4 create3DSPopup

Used to open the 3DS authentication page in a pop-up window within the component.

Language Setting Note: The SDK automatically retrieves the language from the instance configuration; there is no need to pass it separately in create3DSPopup.

Input Parameter Description:

Parameter	Type	Required	Default Value	Description
url	string	Yes	-	3DS authentication page URL (obtained from the `orderAndPay` API)
showMask	boolean	No	true	Whether to display the background mask
width	string	No	Responsive calculation	Width of the pop-up. If not passed, it will be automatically calculated based on the device/viewport.
height	string	No	Responsive calculation	Height of the pop-up. If not passed, it will be automatically calculated based on the device/viewport.

Returns:

CODE	Description	Handling Recommendation
`3DS_PROCESSED`	3DS process processed	Continue with the subsequent payment flow, and query the final authentication result via the API.
`USER_CANCEL`	User closed the pop-up	Inform the user that it has been closed, allowing them to retry.
`INVALID_PARAMS`	Invalid input parameters	Check the input parameters based on `err.msg` (e.g., whether the url is required and non-empty, whether the type is correct, etc.), fix them, and retry.

4.1.5 emit

Used to call component built-in methods, please use PMdropin.emit(Event, Params).

Event	Params	Description
canMakePayment	-	Get card identification
switchLanguage	string	Switch language
switchTheme	string	Switch theme
addLocalization	Object	Add customized language
addTheme	Object	Add customized theme
setDisabled	Boolean	Set component availability status
setRtl	Boolean	Set component layout from right to left
setGrayscale	string	Set component page grayscale

1.emit.canMakePayment

Check whether the current component status meets the conditions for initiating payment, and return the card identification if the verification passes.

// Example
PMdropin.emit('canMakePayment')
  .then(function(response) {
    // Verification successful
    if (response.code === 'APPLY_SUCCESS') {
      // Get paymentToken 
      var paymentToken = response.data.paymentToken
      // Go for subsequent payment operations
    }
  })
  .catch(function(error) {
    // Catching internal errors
    console.log(error);
  })

canMakePayment Response：

// Successful API example
{
  code: 'APPLY_SUCCESS',
  data: {
    // Card indentification
    paymentToken: 'xxx'
  },
  msg: ''
}

// Failed API example
{
  code: 'FORM_INVALID',
  msg: 'Invalid params: cvv'
}

CODE码	Description
APPLY_SUCCESS	Successfully obtain `paymentToken`
FORM_INVALID	Form validation failed
UNKNOWN_ISSUE	Exception information

2. emit.switchLanguage

You can quickly set localization parameters from our preset language list. For example, language: 'zh'. The supported preset languages are as follows:

Language	Language Code
English	en `Default`
Chinese	zh

Initialize with a preset language:

PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  language: 'zh',
  ...
});

Dynamically switch language:

PMdropin.emit('switchLanguage', 'zh')

3. emit.addLocalization

When the preset languages cannot meet your localization requirements, you can customize the language fields via customLocalization.

Initialization Example:

PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  customLocalization: {
    // Example for adding Chinese
    'zh': {
      loading: '加载中',
      loadingFailed: '加载失败',
      refresh: '刷新',
      confirm: '确定',
      cancel: '取消',
      removeCard: '移除卡',
      removeCardTip: '确定移除当前选中卡吗?',
      addNewCard: '使用新卡',
      useSavedCard: '使用已存卡',
      cardnum: '银行卡号',
      cardnumHint: 'XXXX XXXX XXXX XXXX',
      cardnumErrTip: '卡号不正确',
      cardbinErrTip: {
        // {cardOrg} is a variable field, do not translate
        CARD_NOT_SUPPORT: '不支持{cardOrg}，请检查卡号或者更换其他卡重试',
        // {cardType} is a variable field, do not translate
        CARD_INVALID: '不支持{cardType}的卡类型',
        CARD_NO_INVALID: '请确认卡号输入是否正确',
      },
      expdate: '过期日期',
      expdateHint: '月/年',
      expdateErrTip: '过期日期不正确',
      cvv: 'CVV/CVC',
      cvvHint: '123',
      cvvErrTip: 'CVV/CVC 格式不正确',
      name: '持卡人姓名',
      nameHint: 'XX XX',
      nameErrTip: '姓名格式不正确',
      saveCardInfoTip: '为下次支付保存信息',
      // The following are newly added multilingual fields
      // Extra collection elements for local cards
      buyerEmail: '邮箱',
      buyerEmailHint: '',
      buyerEmailErrTip: '格式错误，请复核',
      buyerFullName: '姓名',
      buyerFullNameHint: '',
      buyerFullNameErrTip: '格式错误，请复核',
      buyerFirstName: '名',
      buyerFirstNameHint: '',
      buyerFirstNameErrTip: '格式错误，请复核',
      buyerLastName: '姓',
      buyerLastNameHint: '',
      buyerLastNameErrTip: '格式错误，请复核',
      // Peru Document(ID)
      dni: 'DNI',
      dniHint: '',
      dniErrTip: '格式错误，请复核',
      // Argentina Document(ID)
      dni_cuit: 'DNI/CUIT',
      dni_cuitHint: '',
      dni_cuitErrTip: '格式错误，请复核',
      // South Africa Document(ID)
      idCard: 'ID',
      idCardHint: '',
      idCardErrTip: '格式错误，请复核',
      // Colombia Document(ID)
      cc: 'CC',
      ccHint: '',
      ccErrTip: '格式错误，请复核',
      // Mexico Document(ID)
      curp: 'CURP',
      curpHint: '',
      curpErrTip: '格式错误，请复核',
      // Brazil Document(ID)
      cpf: 'CPF',
      cpfHint: '',
      cpfErrTip: '格式错误，请复核',
      // Chile/Paraguay/Uruguay Document(ID)
      ci: 'CI',
      ciHint: '',
      ciErrTip: '格式错误，请复核',
      buyerPhoneNo: '手机号码',
      buyerPhoneNoHint: '',
      buyerPhoneNoErrTip: '格式错误，请复核',
      buyerPhoneNoRegion: '手机区号',
      buyerPhoneNoRegionHint: '',
      buyerPhoneNoRegionErrTip: '格式错误，请复核',
    }
  },
  ...
});

Dynamically add language:

PMdropin.emit('addLocalization', {
  'zh': {
    // Parameters as shown above
  }
});

4. emit.switchTheme

Use our theme functionality to help build a style combination that better matches your own website.

Use Preset Themes

We provide two preset theme colors. You can customize the theme using the theme parameter. The supported preset themes are as follows:

Theme Name	Theme Code
White	light `Default`
Black	dark

Initialization Example:

PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  theme: 'dark'
});

Or dynamically switch theme:

PMdropin.emit('switchTheme', 'dark');

5. emit.addTheme

For custom themes, you can modify styles by passing a custom theme package. The example is as follows:

PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  theme: 'red',
  customTheme: [
    {
      // Theme name [Required]
      name: 'red', 
      // Style used to fill the background [Optional]
      base: 'light',
      style: `:root {
          /* --- common --- */
          --bg-primary: #ffffff;
          --color-primary: #3782ff;
          --border-color-primary: #eaeaea;
          --border-color-hover-primary: #dcdcdc;
          --font-size-primary: 13px;
          --border-radius-primary: 6px;
        
          /* --- frame --- */
          --padding-frame: 16px;
          --bg-color-frame: var(--bg-primary);
          --bg-color-mask: rgba(255, 255, 255, 0.8);
        
          /* --- text --- */
          --color-text-primary: #333333;
          --color-text-secondary: #666666;
          --color-text-tip: #c8c8c8;
          --color-text-error: #e64949;
        
          /* --- button --- */
          /* plain button */
          --bg-color-btn-plain: var(--bg-primary);
          --border-color-btn-plain: var(--border-color-primary);
          --border-color-hover-btn-plain: var(--border-color-hover-primary);
          --font-size-btn-plain: var(--font-size-primary);
          --border-radius-btn-plain: var(--border-radius-primary);
        
          /* text button */
          --color-btn: var(--color-primary);
          --color-active-btn: #2c68cc;
          --font-size-btn-text: var(--font-size-primary);
        
          /* --- input --- */
          --bg-color-input: var(--bg-primary);
          --border-color-input: var(--border-color-primary);
          --border-color-hover-input: var(--border-color-hover-primary);
          --border-color-focus-input: var(--color-primary);
          --shadow-color-focus-input: rgba(55, 130, 255, 0.2);
          --label-color-input: var(--color-text-primary);
          --label-color-focus-input: var(--color-primary);
          --action-color-input: var(--border-color-input);
          --action-color-hover-input: var(--border-color-hover-input);
          --action-color-active-input: #bbbbbb;
          --color-placeholder-input: #dcdcdc;
          --color-input: var(--color-text-primary);
          --font-size-input: 12px;
          --font-size-input-label: var(--font-size-input);
          --font-size-input-tip: var(--font-size-input);
          --height-input: 36px;
          --size-checkbox: 16px;
          --border-radius-input: var(--border-radius-primary);
          --border-radius-checkbox: calc(var(--border-radius-input)/2);
        
          /* --- item --- */
          --bg-color-item: var(--bg-primary);
          --bg-color-selected-item: #f5f9ff;
          --border-color-item: var(--border-color-primary);
          --border-color-hover-item: var(--border-color-hover-primary);
          --border-color-selected-item: var(--color-primary);
          --font-size-item: 15px;
          --height-item: 36px;
          --height-item-btn: var(--height-item);
          --height-selected-item: 48px;
          --border-radius-item: var(--border-radius-primary);
        
          /* --- others --- */
          --divider-color: #f4f4f4;
        }`
    }
  ]
});

Or dynamically add theme:

PMdropin.emit('addTheme', [
  {
    name: 'red', 
    base: 'light',
    style: ''
  }
]);

6.emit.setDisabled

Set component availability status
Type: Boolean
Default: false

// Uneditable status
PMdropin.emit('setDisabled', true)

// Editable status
PMdropin.emit('setDisabled', false)

7.emit.setRtl

Set component layout from right to left
Type: Boolean
Default: false

// Right to left Layout
PMdropin.emit('setRtl', true)

// Left to right layout
PMdropin.emit('setRtl', false)

8 emit.setGrayscale

Set component page grayscale
Type: String
Default: 0

// Set 0 - 1 grayscale value
PMdropin.emit('setGrayscale', '1')

Integration Modes Details

Acquiring Basic Products

CARD

GOOGLEPAY

APPLEPAY

Subscription and Auto Debit

PayerMax Manage Subscription Plans

Merchants Manage Subscription Plans

Non-Periodic Auto Debit

Drop In

Tokenization

Auth-Capture

ChargeBack

Risk Control

Troubleshooting

Payment Method Classification

Payment Method Details

Asia Pacific

Central Asia

Middle East and Africa

Europe

North America and Latin America

Global

Drop in - CARD ​

1. Interaction Process ​

2. API Introduction ​

2.1 Interface List ​

2.2 Environmental Information ​

2.3 Request header ​

3.Start Integration ​

3.1 Getting Drop in Initialization Information ​

3.2 Render the Drop in ​

3.3 Create Payment ​

3.4 Get Payment Results ​

3.4.1 Adoption of notification of payment results ​

3.4.2 Inquiry via Payment Orders ​

4.Card Payment Frontend API ​

4.1 API ​

4.1.1 create ​

4.1.2 mount ​

4.1.3 on ​

4.1.4 create3DSPopup ​

4.1.5 emit ​

1.emit.canMakePayment ​

2. emit.switchLanguage ​

3. emit.addLocalization ​

4. emit.switchTheme ​

5. emit.addTheme ​

6.emit.setDisabled ​

7.emit.setRtl ​

8 emit.setGrayscale ​

Drop in - CARD

1. Interaction Process

2. API Introduction

2.1 Interface List

2.2 Environmental Information

2.3 Request header

3.Start Integration

3.1 Getting Drop in Initialization Information

3.2 Render the Drop in

3.3 Create Payment

3.4 Get Payment Results

3.4.1 Adoption of notification of payment results

3.4.2 Inquiry via Payment Orders

4.Card Payment Frontend API

4.1 API

4.1.1 create

4.1.2 mount

4.1.3 on

4.1.4 create3DSPopup

4.1.5 emit

1.emit.canMakePayment

2. emit.switchLanguage

3. emit.addLocalization

4. emit.switchTheme

5. emit.addTheme

6.emit.setDisabled

7.emit.setRtl

8 emit.setGrayscale