Features

Direct payment screen

Direct payment screen is an SDK feature to skip the payment list, user can be directly redirected to a certain payment method. This is useful if you have a button that wants to open a specific payment method.

Start Direct Payment Screen

Payment Method assigned in StartPayment Constructor

startPaymentUiFlow(CONTEXT, PAYMENT_METHOD)

// or run the SDK by using snap token
startPaymentUiFlow(CONTEXT, PAYMENT_METHOD, SNAP_TOKEN)
  
// example : credit card payment
MidtransSDK.getInstance().startPaymentUiFlow(MainActivity.this, PaymentMethod.CREDIT_CARD);

// Initialize the MidtransUIPaymentViewController with paymentFeature consturctor
// example : directly showing Credit Card Payment Screen
let vc = MidtransUIPaymentViewController.init(token: response, andPaymentFeature: MidtransPaymentFeature.creditCard)

// Initialize the MidtransUIPaymentViewController with paymentFeature consturctor
// example : credit card payment 
MidtransUIPaymentViewController *paymentVC = [[MidtransUIPaymentViewController alloc] initWithToken:token andPaymentFeature:MidtransPaymentFeatureCreditCard]; “`

Other PAYMENT_METHOD Possible Value

//credit card
PaymentMethod.CREDIT_CARD
//bank transfer
PaymentMethod.BANK_TRANSFER    
//bank transfer BCA
PaymentMethod.BANK_TRANSFER_BCA
//bank transfer Mandiri
PaymentMethod.BANK_TRANSFER_MANDIRI
//bank transfer Permata
PaymentMethod.BANK_TRANSFER_PERMATA
//bank transfer BNI
PaymentMethod.BANK_TRANSFER_BNI
//bank transfer BRI
PaymentMethod.BANK_TRANSFER_BRI
//bank transfer other
PaymentMethod.BANK_TRANSFER_OTHER
//GO-PAY
PaymentMethod.GO_PAY
//ShopeePay
PaymentMethod.SHOPEEPAY
//KlikBCA
PaymentMethod.KLIKBCA
//BCA KlikPay
PaymentMethod.BCA_KLIKPAY
//CIMB Clicks
PaymentMethod.CIMB_CLICKS
//BRImo
PaymentMethod.EPAY_BRI
//Danamon online
PaymentMethod.DANAMON_ONLINE
// UOB Ezpay
PaymentMethod.UOB_EZPAY
// UOB Ezpay Web
PaymentMethod.UOB_EZPAY_WEB
// UOB Ezpay Application
PaymentMethod.UOB_EZPAY_APP
//Indomaret
PaymentMethod.INDOMARET
//Akulaku
PaymentMethod.AKULAKU
//Alfamart
PaymentMethod.ALFAMART
  
//Below Payment methods are currently deprecated:
//XL TUNAI
PaymentMethod.XL_TUNAI
//KIOSON
PaymentMethod.KIOSON
//GIFT CARD INDONESIA
PaymentMethod.GIFT_CARD_INDONESIA
//Indosat dompetku
PaymentMethod.INDOSAT_DOMPETKU
//Telkomsel cash
PaymentMethod.TELKOMSEL_CASH
//Mandiri e-cash / LINE Pay
PaymentMethod.MANDIRI_ECASH
//Mandiri Clickpay
PaymentMethod.MANDIRI_CLICKPAY

//credit card
PaymentMethod.CREDIT_CARD
//bank transfer
PaymentMethod.BANK_TRANSFER    
//bank transfer BCA
PaymentMethod.BANK_TRANSFER_BCA
//bank transfer Mandiri
PaymentMethod.BANK_TRANSFER_MANDIRI
//bank transfer Permata
PaymentMethod.BANK_TRANSFER_PERMATA
//bank transfer BNI
PaymentMethod.BANK_TRANSFER_BNI
//bank transfer BRI
PaymentMethod.BANK_TRANSFER_BRI
//bank transfer other
PaymentMethod.BANK_TRANSFER_OTHER
//GO-PAY
PaymentMethod.GO_PAY
//ShopeePay
PaymentMethod.SHOPEEPAY
//KlikBCA
PaymentMethod.KLIKBCA
//BCA KlikPay
PaymentMethod.BCA_KLIKPAY
//CIMB Clicks
PaymentMethod.CIMB_CLICKS
//BRImo
PaymentMethod.EPAY_BRI
//Danamon online
PaymentMethod.DANAMON_ONLINE
// UOB Ezpay
PaymentMethod.UOB_EZPAY
// UOB Ezpay Web
PaymentMethod.UOB_EZPAY_WEB
// UOB Ezpay Application
PaymentMethod.UOB_EZPAY_APP
//Indomaret
PaymentMethod.INDOMARET
//Akulaku
PaymentMethod.AKULAKU
//Alfamart
PaymentMethod.ALFAMART

//Below Payment methods are currently deprecated:
//XL TUNAI
PaymentMethod.XL_TUNAI
//KIOSON
PaymentMethod.KIOSON
//GIFT CARD INDONESIA
PaymentMethod.GIFT_CARD_INDONESIA
//Indosat dompetku
PaymentMethod.INDOSAT_DOMPETKU
//Telkomsel cash
PaymentMethod.TELKOMSEL_CASH
//Mandiri e-cash / LINE Pay
PaymentMethod.MANDIRI_ECASH
//Mandiri Clickpay
PaymentMethod.MANDIRI_CLICKPAY

typedef NS_ENUM(NSInteger, MidtransPaymentFeature) {
    MidtransPaymentFeatureNone,
    MidtransPaymentFeatureCreditCard,
    MidtransPaymentFeatureBankTransfer,///va
    MidtransPaymentFeatureBankTransferBCAVA,
    MidtransPaymentFeatureBankTransferMandiriVA,
    MidtransPaymentFeatureBankTransferBNIVA,
    MidtransPaymentFeatureBankTransferBRIVA,
    MidtransPaymentFeatureBankTransferPermataVA,
    MidtransPaymentFeatureBankTransferOtherVA,
    MidtransPaymentFeatureKlikBCA,
    MidtransPaymentFeatureIndomaret,
    MidtransPaymentFeatureAlfamart,
    MidtransPaymentFeatureCIMBClicks,
    MidtransPaymentFeatureBCAKlikPay,
    MidtransPaymentFeatureBRIEpay,
    MidtransPaymentFeatureDanamonOnline,
    MidtransPaymentFeatureAkulaku,
    MidtransPaymentFeatureGOPAY,
    MidtransPaymentFeatureShopeePay
};

Users can directly go to payment screen and skip the default payment method screen.

📘
Note

Please make sure the payment method is activated via Setting -> Snap Preferences in MAP.

For other payment methods you just need to change the parameter of payment method.

For GoPay integration in iOS please see section GoPay CONFIGURATION IOS

// -----------------------
// GO-PAY CONFIGURATION IOS
// -----------------------


<key>LSApplicationQueriesSchemes</key>
<array>
  <string>gojek</string>
</array>

We provide a method API to make direct payment for all payment methods on Android and iOS SDK.

🚧
Deprecated Payment Methods

PaymentMethod.XL_TUNAI

PaymentMethod.KIOSON

PaymentMethod.GIFT_CARD_INDONESIA

PaymentMethod.INDOSAT_DOMPETKU

PaymentMethod.TELKOMSEL_CASH

PaymentMethod.MANDIRI_ECASH

GoPay IOS Configuration

GoPay transaction is happened through the Gojek app. For IOS, In order to detect and open the Gojek app, it's required to add the LSApplicationQueriesSchemes key to your app’s Info.plist.

// Gopay ios config to detect and open gojek app

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>gojek</string>
</array>

Using Callback Deeplink

You can enable callback deeplink, which enable users to go back to the host app after completing gopay payment in Gojek app. You need to implement the deeplink callback by adding your app url schemes. There're two ways to do this, You can either:

Go to Project Settings -> Info, and add inside The URL Types section a new URL scheme. For example you can add something like myApp or any name you preferred.
Alternatively you can go to your info.plist file and paste this code, you can change myApp value to any name you preferred for your app.

/ Add url scheme to your app
// You can replace myApp to your preferred app name.

// CAUTION: Don't ever use gojek as the name in your url scheme because it will interfere with the functionality

<key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myApp</string>
            </array>
        </dict>
    </array>

❗️
Caution
Never ever use gojek as the name in your url scheme because it will interfere with the functionality**.

Make sure your callback_url in your payload request on your merchant server matches with the one that you set in the app. So, if in the example above it uses myApp as the url scheme, the payload should also be the same as shown below.

//example payload from the backend to when creatin snaptoken
//need to match the value with the one you set in the app
"gopay": {
    "enable_callback": true,
    "callback_url": "myApp://"
  }

Without callback deeplink

Alternatively if you want to check your transaction status manually, you can do it by calling this method:

// iOS without callback deeplink implementation
// checking  status manually

MidtransMerchantClient.shared().performCheckStatusTransaction(withToken: "your Snap Token") { result, error in
    if (error != nil){
        print("error")
    } else {
        if (result?.statusCode == 200){
            print("do something")
        }
    }
}
                                                                                        }

// iOS without callback deeplink implementation

[[MidtransMerchantClient shared] performCheckStatusTransactionWithToken:token completion:^(MidtransTransactionResult * _Nullable result, NSError * _Nullable error) {
    if (!error) {
        if (result.statusCode == 200) {
            //handle success
        }
    } else {
        //handle error
    }
}];

GoPay Android Configuration

If you use GoPay payment method, there are two ways to get the result of the transaction:

First, the easy one is with callback deeplink (go back to host-app)
Alternatively you can also do it without callback deeplink.

If you want to use callback deeplink to get the result from Gojek app, please set your deeplink on the TransactionRequest object that you've created, please refer to this link for deeplink implementation. If your app don't use deeplink, you can skip this step and check your transaction manually.

For example if you set your deeplink like this demo://midtrans then Gojek app will return callback like this for success demo://midtrans?order_id=xxxx&result=success and this for failure demo://midtrans?order_id=xxxx&result=failure.

📘

Please make sure the payment method is activated via Setting -> Snap Preferences in MAP.

Using deeplink only work with latest Gojek application.

For more GoPay integration please refere to this link for Android.

Using callback deeplink

Gopay Callback assigned in StartPayment Constructor (new GopayPaymentCallback(CALLBACK_URL))

// Setup your Transaction Request here then set your GO-PAY deeplink.
// Assume you already make TransactionRequest object.
transactionRequest.setGopay(new Gopay("demo://midtrans"));

ShopeePay Callback Deeplink

ShopeePay transaction is happened through the Shopee App. You must enable deeplink, which enable users to go back to the host app after completing ShopeePay payment in Shopee app.

For iOS, to enable deeplink you need to setup the url scheme in your plist file. However if you already implement it for GoPay, then you don't need to setup the url scheme again, you are already good to go. You just need to directly setup the ShopeePay callback url value on the SDK Config based on your url scheme name.

// Add url scheme to your app
// You can replace myApp to your preferred app name.
// If you already set this for GoPay in your app, then you don't need to do this again


// CAUTION: Don't ever use gojek as the name in your url scheme because it will interfere with the functionality

<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>myApp</string>
			</array>
		</dict>
	</array>

For Android, please set your deeplink on the TransactionRequest object that you've created, please refer to this link for deeplink implementation.

For example if you set your deeplink like this myApp://midtrans then Shopee app will return callback like this myApp://midtrans.

//Add intent filters for incoming links
//If you already do this for GoPay, you don't need to set this again.

<activity android:name=".EntryActivity"
	android:launchMode="singleTask">
	<intent-filter>
		<action android:name="android.intent.action.VIEW" />

		<category android:name="android.intent.category.DEFAULT" />
		<category android:name="android.intent.category.BROWSABLE" />

		<data
			android:host="midtrans"
			android:scheme="myApp" />
	</intent-filter>
</activity>

ShopeePay Callback assigned in StartPayment Constructor (new PaymentCallback("myApp://midtrans"))

//Add intent filters for incoming links
//If you already do this for GoPay, you don't need to set this again.

<activity android:name=".EntryActivity"
	android:launchMode="singleTask">
	<intent-filter>
		<action android:name="android.intent.action.VIEW" />

		<category android:name="android.intent.category.DEFAULT" />
		<category android:name="android.intent.category.BROWSABLE" />

		<data
			android:host="midtrans"
			android:scheme="myApp" />
	</intent-filter>
</activity>
        
        
// Setup your Transaction Request here then set your ShopeePay deeplink.
// Assume you already make TransactionRequest object.
transactionRequest.setShopeepay(new Shopeepay("myApp://midtrans"));

Custom Themes

Mobile SDK provide Fonts and Theme color customization.

Custom Fonts : to set your fonts to SDK you have to add the font to your project.
Custom Theme Color : By default, SDK will use color settings provided in Snap Preferences in MAP. If you want to use your own custom theme color you need to define it in SDK.

Android Custom Themes

Android Custom Fonts

To use a custom font on Android SDK, you need to put your font files to assets directory of project and then just follow the sample code.

//Android Custom Fonts & Theme Color

UiKitApi.Builder()
        ...
        .withFontFamily(AssetFontLoader.fontFamily(ASSET_FONT, CONTEXT))
        .withColorTheme(CustomColorTheme("#FFE51255", "#B61548", "#FFE51255"))
        .build()

/**
 * Android custom font
 */

MidtransSDK midtransSDK = MidtransSDK.getInstance();
midtransSDK.setDefaultText("open_sans_regular.ttf");
midtransSDK.setSemiBoldText("open_sans_semibold.ttf");
midtransSDK.setBoldText("open_sans_bold.ttf")

Notes:

(Android) open_sans_regular.ttf, open_sans_semibold.ttf, open_sans_bold.ttf are path of the custom font on the assets directory.

Android Custom Theme color

To set custom theme in this SDK you just need to provide 3 colors:

Primary: For top panels showing amount
Primary Dark: For bordered button, link button
Secondary: For text field.

Android Custom Fonts & Theme Color

UiKitApi.Builder()
        ...
        .withFontFamily(AssetFontLoader.fontFamily(ASSET_FONT, CONTEXT))
        .withColorTheme(CustomColorTheme("#FFE51255", "#B61548", "#FFE51255"))
        .build()

/**
 * Android custom theme color
 */

// Create Custom Color Theme
String examplePrimary = "#ffffff";
String examplePrimaryDark = "#ffffff";
String exampleSecondary = "#ffffff";
CustomColorTheme colorTheme = new CustomColorTheme(examplePrimary, examplePrimaryDark, exampleSecondary);

Set Theme color into SDK Builder or Initialized SDK (Android SDK ver 1.xx)

// Set Theme color into SDK Builder
SdkUIFlowBuilder.init(this, BuildConfig.CLIENT_KEY, BuildConfig.BASE_URL, this)
                    .setColorTheme(colorTheme)
                    .build();

// or
// Set Theme color into Initialized SDK
MidtransSDK midtransSDK = MidtransSDK.getInstance();
midtransSDK.setColorTheme(colorTheme)

iOS Custom Themes

We’ve created MidtransUIThemeManager to configure the theme color and font of the Midtrans payment UI.

Class MidtransUIThemeManager needs UIColor object so you need to convert your HEX or RGB to UIColor, here is a nice tool to generate UIColor code.

Note: If you didn't configure this MidtransUIThemeManager, your theme color will follow SNAP color configuration on MAP -> SNAP settings preference.

// Set Fonts & Theme color into Initialized SDK
let fontSource = MidtransUIFontSource(fontNameBold: "fontName", fontNameRegular: "fontName", fontNameLight: "fontName")
MidtransUIThemeManager.applyCustomThemeColor(UIColor.blue, themeFont: fontSource)

// Set Fonts & Theme color into Initialized SDK
MidtransUIFontSource fontSource =
[[MidtransUIFontSource alloc] initWithFontNameBold:font_name
                                   fontNameRegular:font_name
                                     fontNameLight:font_name];
[MidtransUIThemeManager applyCustomThemeColor:themeColor
                                    themeFont:fontSource];

UiKit Custom Settings

We provide Settings to handle more customizable UI in our SDK.

Skip Payment Status

Skip Payment Statu

val uiKitCustomSetting = UiKitApi.getDefaultInstance().uiKitSetting
uiKitCustomSetting.showPaymentStatus = false

// Init custom settings
UIKitCustomSetting uisetting = new UIKitCustomSetting();
uisetting.setShowPaymentStatus(false); // hide sdk payment status
MidtransSDK.getInstance().setUIKitCustomSetting(uiKitCustomSetting);

 MidtransUIConfiguration.shared().hideStatusPage = true

 [MidtransUIConfiguration.shared setHideStatusPage:true];

You can skip payment status provided by Midtrans SDK if you want to show your own status page.

Logging

Enable to show SDK log for debugging. For security purposes however, we encourage merchants to disable it on production apps.

UiKitApi.Builder()
        .withMerchantClientKey(CLIENT_KEY) // client_key is mandatory
        .withContext(CONTEXT) // context is mandatory
        .withMerchantUrl(BASE_URL) // set transaction finish callback (sdk callback)
        .enableLog(true) // enable sdk log (optional)
        .withFontFamily(ASSET_FONT)
        .withColorTheme(CustomColorTheme("#FFE51255", "#B61548", "#FFE51255"))
        .build()
setLocaleNew("en") //`en` for English and `id` for Bahasa

...


Note:
Enable during initialization. 

CONTEXT: Application/activity context
CLIENT_KEY: Your Midtrans client key 
BASE_URL: Your merchant server URL
enableLog: enable to show sdk log for debugging

MidtransNetworkLogger.shared().startLogging()

[[MidtransNetworkLogger shared] startLogging];

Features

Direct payment screen

📘
Note

🚧
Deprecated Payment Methods

GoPay IOS Configuration

Using Callback Deeplink

❗️
Caution

Without callback deeplink

GoPay Android Configuration

📘

Using callback deeplink

ShopeePay Callback Deeplink

Custom Themes

Android Custom Themes

Android Custom Fonts

Android Custom Theme color

iOS Custom Themes

UiKit Custom Settings

Skip Payment Status

Logging

Direct payment screen

📘Note

🚧Deprecated Payment Methods

GoPay IOS Configuration

Using Callback Deeplink

❗️Caution

Without callback deeplink

GoPay Android Configuration

📘

Using callback deeplink

ShopeePay Callback Deeplink

Custom Themes

Android Custom Themes

Android Custom Fonts

Android Custom Theme color

iOS Custom Themes

UiKit Custom Settings

Skip Payment Status

Logging

📘
Note

🚧
Deprecated Payment Methods

❗️
Caution