Evonet Drop-in Demo

Drop-in Builder

Configure Evonet Drop-in SDK options with a guided interface, preview the result instantly, and copy JSON in one click.

Order Info

Amount

Currency

Locale

Used for session and Drop-in locale.

Description

Allow save card for next purchase (Interaction)

Sends userInfo.reference and paymentMethod.recurringProcessingModel on POST interaction. Requires merchant capability; after changing this, use Refresh Session ID.

Include paymentMethod.recurringProcessingModel

Turn this off to send only userInfo.reference and omit the paymentMethod object.

User reference (userInfo.reference)

Enable the option above to send this field.

Recurring model

Current Session ID: REPLACE_WITH_REAL_SESSION_ID

Payment UI

Show Save Image

Allow saving QR code to device (not card storage).

Columns Layout

Show Card Holder Name

CVV For Saved Card

Show Scan Card Button

Auto Invoke Card Scanner

Show Terms and Conditions

TnC Mode

TnC URL

Theme

Background

Primary

Secondary

Action

Error

Disabled

Form Background

Form Border

Box Stroke

Box Filling Outline

Auto refresh

Preview is disabled because sessionID is missing or placeholder.

Demo only — do not complete real payments. This site uses live production credentials for integration testing. Any payment you complete is a real charge and cannot be refunded through this demo.

Loading Evonet Drop-in SDK in the browser…

UI Config JSON (UI Options + Appearance only)

UI options + appearance JSON

{
  "uiOption": {
    "showSaveImage": false,
    "Columns": false,
    "card": {
      "showCardHolderName": true,
      "CVVForSavedCard": true
    },
    "TnC": {
      "showTnC": false,
      "mode": "click2accept",
      "url": ""
    }
  },
  "appearance": {
    "colorBackground": "#ffffff",
    "colorAction": "#111827"
  }
}

SDK runtime payload JSON

{
  "id": "#your-dropin-container",
  "type": "payment",
  "sessionID": "REPLACE_WITH_REAL_SESSION_ID",
  "locale": "en-US",
  "mode": "embedded",
  "environment": "HKG_prod",
  "isVerifyPaymentBrand": true,
  "verifyOption": {
    "isVerifyPaymentBrand": true,
    "maxWaitTime": "10"
  },
  "uiOption": {
    "showSaveImage": false,
    "Columns": false,
    "card": {
      "showCardHolderName": true,
      "CVVForSavedCard": true
    },
    "TnC": {
      "showTnC": false,
      "mode": "click2accept",
      "url": ""
    }
  },
  "appearance": {
    "colorBackground": "#ffffff",
    "colorAction": "#111827"
  },
  "_note": "Callbacks (payment_method_select, payment_method_selected, payment_completed, payment_failed, payment_not_preformed, payment_cancelled) should be attached in your integration code."
}