Evonet Drop-in Demo

Drop-in Dev Console

PROD

HKG_prod

init #0

mode: embedded

locale: en-US

session: REPLACE_WITH…order: EVT-473817

Configuration

Session auto-creates on load. Re-create after amount / currency / env changes. SDK docs

Allow save card for next purchase (Interaction)

Sends userInfo.reference and paymentMethod.recurringProcessingModel when creating session. Requires merchant capability.

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

sessionID

Session uses server credentials. Initialize runs Drop-in in this browser.

Live SDK sync

Auto-apply changes

Re-initialize Drop-in when locale, UI, or appearance options change.

Environment

e.g. HKG_prod, BKK_prod, UAT

mode

locale (SDK)

Payment UI

showSaveImage

Allow saving QR to device

Columns (two-column layout)

uiOption.Columns

Card (uiOption.card)

showCardHolderName

CVVForSavedCard

showScanCardButton

autoInvokeCardScanner

Scan options often need HTTPS and a supported mobile/browser context. Some Evonet Drop-in builds throw on init when scanning is enabled but the environment is unsupported—check the event log for errorMessage / scanHint.Terms & Conditions (uiOption.TnC)

showTnC

TnC mode

TnC url (required if showTnC)

Mandatory in docs when showTnC is true

Appearance

colorBackground

colorPrimary

colorSecondary

colorAction

colorError

colorDisabled

colorFormBackground

colorFormBorder

colorBoxStroke

colorBoxFillingOutline

colorPlaceholder

colorInverse

logoPosition

borderRadius [r1,r2,r3,r4]

Four comma-separated numbers

Typography (appearance.*.font)

button

button.fontFamily

button.fontSize

button.fontWeight

button.letterSpacing

button.lineHeight

heading

heading.fontFamily

heading.fontSize

heading.fontWeight

heading.letterSpacing

heading.lineHeight

subHeading

subHeading.fontFamily

subHeading.fontSize

subHeading.fontWeight

subHeading.letterSpacing

subHeading.lineHeight

label

label.fontFamily

label.fontSize

label.fontWeight

label.letterSpacing

label.lineHeight

labelInfo

labelInfo.fontFamily

labelInfo.fontSize

labelInfo.fontWeight

labelInfo.letterSpacing

labelInfo.lineHeight

inputField

inputField.fontFamily

inputField.fontSize

inputField.fontWeight

inputField.letterSpacing

inputField.lineHeight

paragraph

paragraph.fontFamily

paragraph.fontSize

paragraph.fontWeight

paragraph.letterSpacing

paragraph.lineHeight

placeholder

placeholder.fontFamily

placeholder.fontSize

placeholder.fontWeight

placeholder.letterSpacing

placeholder.lineHeight

Typography maps into appearance. Rendering depends on SDK build and merchant configuration.

BIN verification

isVerifyPaymentBrand

When enabled, BIN is processed and returned in SDK events. Host rules below only affect promo text.

verifyOption.maxWaitTime (seconds)

Default per docs: 10

Optional promotion copy when a card BIN matches. Does not block payment.

Condition 1

Custom card BIN

Promotion message

Shown above Drop-in when this BIN matches

Add condition

Custom card BIN

Promotion message

Order & customer

Order details

Amount

Currency

Order ID

Description

Customer

Name

Phone

Billing & shipping

Billing Country

Billing City

Billing Postal Code

Shipping Country

Shipping City

Shipping Postal Code

Drop-in preview

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…

Developer console

SDK runtime payload JSON

Waiting for init…

Payment events

// payment_success | payment_fail | payment_method_selected …

SDK / host messages

// dropin_host phases · postMessage · bin_verification …

navigator.userAgent

Detecting user agent…