SDK Parameter Reference
Here is the SDK parameters required during the integration step 4, SDK initialization. The parameters can be set in level of transaction. Each transaction can have different SDK values so that to appear in different effects.
SDK basic construction
These are the mandatory field to identify and build up a SDK.
| Field | Type | M/O | Description |
|---|---|---|---|
| type | String | M | Fixed value: payment |
| sessionID | String | M | A unique 16-character UUID to initialize SDK for a drop-in order, created in interaction API |
| environment | String | M | Set the environment for requests, e.g., HKG_prod, BKK_prod, TYO_prod, UAT |
| mode | String | M | fullPage, embedded, bottomUp |
Language Setting
This section is to control the language displayed on drop-in user can see.
| Field | Type | M/O | Description |
|---|---|---|---|
| locale | String | O | Language for Drop-in display. Supported languages: English: en-USChinese: zh-CNTraditional Chinese: zh-TWJapanese: ja-JPKorean: ko-KRThai: th-THDefault value : English |
Payment Workflow Setting
This section is to control the the payment steps that user will experienced. Merchant can decide the presence and format of the features of (1) card details input, (2) Terms & Conditions and (3) QR code payment.
| Field | Type | M/O | Description |
|---|---|---|---|
| uiOption | Object | O | |
| Object | O | Customize card payment section setting |
| boolean | O | To indicate if user is required to input card holder name when choosing card payment |
| boolean | O | To indicate if user is required to input CVV when choosing saved card to proceed payment |
| boolean | O | To indicate if there is button to allow user scan the card to input the card details Default value: false |
| boolean | O | To indicate if user is allowed to scan the card to input the card details Default value: false |
| Object | O | Customize TnC section setting |
| boolean | O | To indicate if TnC is displayed. Value: trueor falseDefault value: false |
| boolean | O | Value for how user accepting TnC.checkbox: User to tick a checkbox to accept TnCclick2accept: User click payment button to default accepting TnCDefault value: click2accept |
| String | C | Mandatory field whenshowTnC is true.The url of TnC merchant request to display |
| boolean | O | To indicate if user is allowed to save the QR code in device Default value: false |
Card BIN Validation Set-up
This section is to control if card BIN information is required to return to merchant. Details of card bin validation features can be referred to Card BIN Verification.
| Field | Type | M/O | Description |
|---|---|---|---|
| verifyOption | object | O | |
| isVerifyPaymentBrand | boolean | O | To indicate card BIN is required to processed and returned in SDK event. Default value: false |
| maxWaitTime | string | O | Maximum waiting time for merchant to respond the Card BIN validation event in second unit. Default value: 10 |
Layout/UI Control
This section is to control the the styling and layout design of the drop-in. Merchant can control the (1) color, (2) fonts and (3) spacing of the page. To Illustrate how the below values effects on the drop-in page and check the possible values ,please refer to Drop-in Customization Reference.
| Field | Type | M/O | Description |
|---|---|---|---|
| appearance | Object | O | |
| String | O | Checkbox or clickable button color, hex code (e.g., #5E48FC) |
| String | O | Drop-in background color, hex code |
| String | O | Border/line color, hex code |
| String | O | Disabled button color, hex code |
| String | O | Error border and text color, hex code |
| String | O | Input background color, hex code |
| String | O | Input border color, hex code |
| String | O | Button text color, hex code |
| String | O | Input border when selected, hex code |
| String | O | Input placeholder color, hex code |
| String | O | Primary font color, hex code |
| String | O | Secondary font color, hex code |
| Object | O | Button font style |
| Object | O | Heading font style |
| Object | O | Subheading font style |
| Object | O | Popup heading font style |
| Object | O | Label font style |
| Object | O | Label info font style |
| Object | O | Popup label font style |
| Object | O | Input field font style |
| Object | O | Input field info font style |
| Object | O | Input field popup font style |
| Object | O | Paragraph font style |
| Object | O | Input placeholder font style |
| Array | O | Page corner radius [radius1, radius2, radius3, radius4] |
| String | O | Merchant logo position: left, middle, right. Default: left |
| Columns | boolean | O | To indicate if the page displays in 2 column Default value: false(Single Columns) |
SDK Initialization Example
{
"id": "#dropApp",
"type":"payment",
"sessionID": "c8b7907686e4498d9af24222ea3b37f3",
"locale": "en-US",
"mode": "fullPage",
"environment": "UAT",
"uiOption": {
"showSaveImage": false,
"card": {
"showCardHolderName": true,
"CVVForSavedCard": true,
"showScanCardButton": false
},
"TnC": {
"showTnC": true,
"mode": "click2accept",
"url": ""
},
"verifyOption": {
"isVerifyPaymentBrand": true
},
"appearance": {
"colorBackground": "#fff"
},
"Columns": true
}