Checkout Integration

Hecto Financial's Checkout is a standard payment UI that provides integrated support for various payment methods including credit card, bank transfer, virtual account, and mobile payment.

Integration Methods

There are two ways to invoke the Checkout.

Method	Description
JavaScript SDK	Invoke the Checkout using the `SettlePG.js` SDK
HTML Form Submit	Invoke the Checkout by constructing an HTML Form directly

Both methods invoke the same Checkout and use the same parameters.

Method Characteristics

JavaScript SDK

// Load SDK script
<script src="https://tbnpg.settlebank.co.kr/resources/js/v1/SettlePG_v1.2.js"></script>

// Invoke payment
SETTLE_PG.pay({
    env: "https://tbnpg.settlebank.co.kr",
    ui: { type: "popup", width: 430, height: 660 },
    mchtId: "nxca_jt_il",
    method: "card",
    // ... payment method-specific parameters
}, callback);

Characteristics:

Easily invoke the Checkout via a JavaScript function call
Supports various UI types: popup, self, blank, etc.
Form creation and submission are handled automatically by the SDK

HTML Form Submit

<form method="POST" action="https://tbnpg.settlebank.co.kr/card/main.do" target="_blank">
    <input type="hidden" name="mchtId" value="nxca_jt_il" />
    <input type="hidden" name="method" value="card" />
    <!-- ... payment method-specific parameters -->
</form>

Characteristics:

Invoke the Checkout by constructing an HTML Form directly
Integration possible without SDK dependency
Action URL must be specified directly per payment method

Checkout UI Types

Type	Description	SDK	Form
`popup`	Display Checkout in a popup window	O	O
`iframe`	Display as a layer within the current page	O	-
`self`	Navigate to the Checkout in the current window	O	O
`blank`	Display Checkout in a new window	O	O

Avoid iframe method

The iframe method is not recommended due to issues such as local network access restrictions and browser compatibility problems. Use the popup, self, or blank method instead.

Payment Flow

Customer

Merchant

Checkout

Hecto Financial

1Payment Request

Payment Request

2Invoke Checkout

Invoke Checkout

3Display Checkout

Display Checkout

4Enter Payment Information

Enter Payment Information

5Authentication/Approval Request

Authentication/Approval Request

6Return Result

Return Result

7Webhook (notiUrl)

Webhook (notiUrl)

On payment success: Redirected to nextUrl with the result, and a webhook is sent to notiUrl.

On payment failure/cancellation: Redirected to cancUrl.

NOTE

notiUrl is required

Because nextUrl is delivered through the browser, it may be missed due to network errors. Actual order processing must be performed at notiUrl (Server-to-Server).

For more details, refer to the Result Notification URL Guide.

Integration Preparation

The following backend processing is required before invoking the Checkout.

Server-Side Processing

Both the SDK and HTML Form methods require the same server-side processing:

Transaction Amount Encryption: Encrypt using AES-256
Request Signature: Generate pktHash using SHA-256

NOTE

Encryption and Hash Generation Rules

Refer to the Before You Begin document for AES-256 encryption rules, SHA-256 hash generation order, and sandbox key information. Before You Begin — Encryption and Request Signature (pktHash)

Security Notice

Encryption keys and hash keys must only be used on the server. They must not be exposed to the client.

Next Steps

Choose an Integration Method

JavaScript SDK

Checkout integration using the SDK

HTML Form Submit

Integration using an HTML Form directly

Need technical support?

Code Samples

HectoFinancial GitHub