Welcome to the elite way of handling payments. This guide walks you through the Drop-in SDK and API—a lightweight, high-performance integration that handles the heavy lifting of security and UI while you focus on building your business.

The core steps and data flow of the integration process are shown in the following figure. You can flexibly participate in the modules according to your actual needs.

🛠 Phase 1: Setting the Stage (Client-side)

👍

Goal: Drop a secure payment frame into your site with zero CSS stress.

1. SDK Integration

Include our lightweight JavaScript engine via CDN. It is recommended to use our provided index.min.js as a fallback in case the CDN fails to load.

Latest version:
https://cdn.jsdelivr.net/npm/cil-dropin-components@latest/dist/index.min.js

2. Define the "Landing Zone"

Place a simple container in your HTML. This is where the Drop-in UI will elegantly materialize.

<div id="dropInApp"></div>

Back to Top 🚀

⚡ Phase 2: Igniting the Engine (Server-side & Initialization)

👍

Goal: Secure a handshake between your server and ours.

3. Fetch the "Golden Ticket" (SessionID)

Before initializing the DropInSDK, you must first obtain the sessionID from interaction API. By Calling interaction API, you can decide the transaction expiry time, transaction type, user's data to collect.

📘

Note

Transaction authentication of the interaction interface is completed through the SignKey (in the Authorization request header) and KeyID in the request header.

• Security First: Authenticate using your SignKey and KeyID in the headers.
• The Payload: Define the amount, currency, and transaction type.
• The Result: Your server receives a unique sessionID—pass this to your frontend to unlock the payment vault.

📘

Note

If you would enable one-click payment or subscription payment, userInfo.reference is the unique key to identify the customer

💡If you aim to enabling one-click payment

1. The below parameter is mandatory for creating subscription payment

2. Saved card button will be automatically displayed for customer to select.

💡If you aim to create a subscription payment

1. The below parameter is mandatory for creating subscription payment

2. Save the Token

• After payment is completed, store the token from either payment response API or payment webhooks.
• Store the token.value in your system and bind it with userInfo.reference.

Example

{
  "userInfo": {
    "reference": "your_user_reference"
  },
  "paymentMethod": {
    "recurringProcessingModel": "Subscription"
  }
}

4. DropIn SDK Initialization

Initialize the DropInSDK using the sessionID obtained from the previous step and other necessary parameters to render the payment interface and process user delivery:

Here is the minimum mandatory value to initialize the SDK. Let's check from SDK reference to get more optional and default setting.

Example

const sdk = new DropInSDK({
  id: '#dropApp', 
  type: 'payment', 
  sessionID: 'your-session-id', 
  locale: 'en-US', 
  mode: 'embedded', 
  environment: 'UAT', 
  appearance: {
    colorBackground: '#fff' 
  },
  payment_completed: handlePaymentCompleted,
  payment_failed: handlePaymentFailed,
  payment_not_preformed: handlePaymentNotPreformed,
  payment_cancelled: handlePaymentCancelled
});

Back to Top 🚀

📡 Phase 3: Mastering the Lifecycle (Handling Results)

👍

Goal: Close the loop and keep your order status in sync.

There are 3 ways to reflects the latest status of order, Eveonet will send SDK events and Webhooks or you can call Get Payment Status API to check the latest update. While SDK events can is an instant browser-side notification used to update your UI immediately; and webhooks are server-to-server messages to update the final transaction status, which can be retry to ensure your database stays in sync even if the customer goes offline. Both are important and necessary tools for catching-up the order situation.

5. Handling Payment Callbacks

Process the payment callback returned by the DropInSDK, record key data (such as merchantTransID), update the UI, and trigger subsequent operations.

✅ payment_completed: Success! Store the merchantTransID immediately—you’ll need it for future refunds or status lookups.

❌ Other Error Handling: Use the returned message to show friendly, actionable tips to your users if a payment fails.

For the full specification of SDK event, please refer to SDK Event Reference.

6. Handling Payment Webhooks:

Set the webhook endpoint from step 4 to receive asynchronous notifications from Evonet. Notifications typically contain the following fields:

For parameters, please refer to API Explorer interaction Notification.

📘

Note

After receiving a notification, the plain text "SUCCESS" must be returned to indicate successful receipt. If no response is received, the system will periodically resend asynchronous notifications at the specified frequency (15/15/30/180/1800/1800/1800/1800/3600 seconds) until a "SUCCESS" message is received or the maximum number of notifications is reached.

Beyond the basics, you have full control over the transaction lifecycle by calling our APIs.

7. Check order status APIs

1. Get Payment Details - to check the latest status.

Using GET /payment/{merchantTransID} to query a payment status, merchantTransID is obtained from payment.merchantTransInfo.merchantTransID

8. Manage order status APIs

1. Capture Payment - to authorize a card payment

For authorized transactions, this API can be used to carry out capture POST /payment/{merchantTransID}/capture

2. Refund Payment - to request refund

For transaction that is captured, use POST /payment/{merchantTransID}/refund to carry out partial or full refund of the transaction.

Back to Top 🚀

📡 Extra Phase: Mastering the Lifecycle (Handling Results)

👍

Goal: Merchant submit subsequence order for customers

9. Submitting Subsequent subscription (MIT Transaction)

If you are providing subscription-based payment scenario,

• Initial Setup: Set recurringProcessingModel: "Subscription" when requesting your sessionID.
• Tokenization: Once the first payment clears, we give you a Token. Map this to your User ID in your database.

While these actions done in Step 3 - Fetch the Session ID, here is how to merchant side initiating the subsequence transaction (MIT)

#Subsequent subscription (MIT Transaction)

• Frictionless Renewal: For future charges, just call our Payment Method API using that Token. No card entry required—just pure, automated revenue.
• The request parameters must include (see the Appendix Payment Method API interface for details):
  JSON

  {
    "paymentMethod": {
      "token": {
        "value": "Previously saved token value"
      },
      "recurringProcessingModel": "Subscription"
    }
  }

• Order Tracking：Use merchantTransID to track the order ID of the subsequent payments.
• Capture transactions：
  • Set captureAfterHours to 0 for immediate capture
  • If this field is not provided, the merchant must later call the POST /capture API to perform manual capture.

Ready to launch?

👉 Check out the API Explorer to simulate your first transaction!

Back to Top 🚀