Two Clicks Payment
Two clicks feature allows you to capture the customer’s card number, expiry date, email and phone number as a TWO_CLICKS_TOKEN. For successive payments by the same customer, the TWO_CLICKS_TOKEN can be utilized to pre-fill the details. The customer just needs to fill out the cvv number to finish the payment. By default this SDK will use Midtrans token storage to save customer credential so you don't need to setup anything on your backend.
Please see the configuration on the example code to enable the two clicks mode.
To enable two clicks in the SDK, you'll need to enabled saved card function :
val creditCardOptions = CreditCard(
true, // Save Card Set to true to enable save card as two click payment
null, // TokenId
null, // Channel
null, // Bank
null, // Saved Tokens
null, // Whitelist Bins
null, // Blacklist Bins
null, // Installment
null, // Type
null, // Authentications
)
// You can set Authentication.AUTH_3DS / Authentication.AUTH_NONE
CreditCard creditCardOptions = new CreditCard();
// Set to true if you want to save card as two click payment
creditCardOptions.setSaveCard(true);
// Set Credit Card Options
transactionRequest.setCreditCard(creditCardOptions);
// Set transaction request into SDK instance
MidtransSDK.getInstance().setTransactionRequest(transactionRequest);
// You can set Authentication.AUTH_3DS / Authentication.AUTH_NONE
CC_CONFIG.paymentType = MTCreditCardPaymentTypeTwoclick;
CC_CONFIG.saveCardEnabled = YES;
One Click Payment
In addition to two clicks feature, SNAP also supports one click transaction which will also capture the card’s cvv. With this, customers can directly proceed to pay without input any information.
To enable one click in the SDK, you'll need to:
- Enable saved card
- Enable 3DS.
One click payment configuration
val creditCardOptions = CreditCard(
true, // Save Card Set to true to enable save card
null, // TokenId
Authentication.AUTH_3DS // Authentications set to 3ds,
null, // Channel
null, // Bank
null, // Saved Tokens
null, // Whitelist Bins
null, // Blacklist Bins
null, // Installment
null, // Type
)
CreditCard creditCardOptions = new CreditCard();
// Set to true if you want to save card as one click
creditCardOptions.setSaveCard(true);
// Set secure option to enable or disable 3DS secure
creditCardOptions.setAuthentication(Authentication.AUTH_3DS);
// Set Credit Card Options
transactionRequest.setCreditCard(creditCardOptions);
// Set transaction request into SDK instance
MidtransSDK.getInstance().setTransactionRequest(transactionRequest);
CC_CONFIG.paymentType = MTCreditCardPaymentTypeOneclick;
CC_CONFIG.saveCardEnabled = YES;
//1-click need 3ds enabled
CC_CONFIG.authenticationType = MTAuthenticationType3DS;
To ease card saving process, SNAP provides card token storage feature. So, merchants don’t have to store and manage credit card token by themselves. Merchants can easily integrate credit card token storage feature to SNAP by providing unique user_id
that associates with customers’ account on merchant’s system, in addition to enabling credit_card.save_card
flag.
SNAP will then decide to store credit card token as one click token based on two criteria:
- Merchant has recurring MID enabled
- Initial transaction is 3DS-enabled
Installment
Prerequisites
There are few things that needs to be checked before installment can be used.
- MID for installment must be activated (please contact us here to activate MID)
- Setup merchant server to handle checkout request. (Please see this wiki)
Enable installment & add terms
val bankTerms = mapOf("bri" to arrayListOf(3, 6, 12), "offline", arrayListOf(3, 6, 12))
val installment = Installment (
true, // Is Required Installment
bankTerms // Installment Terms
)
val creditCardOptions = CreditCard(
null, // Save Card
null, // TokenId
null, // Authentications
null, // Channel
null, // Bank
null, // Saved Tokens
null, // Whitelist Bins
null, // Blacklist Bins
installment, // Installment set as requested
null, // Type
)
Installment installment = new Installment();
Map<String, ArrayList<Integer>> bankTerms = new HashMap<>();
ArrayList<Integer> termBri = new ArrayList<>();
termBri.add(3);
termBri.add(6);
termBri.add(12);
//set bank and term
bankTerms.put("bri", termBri);
ArrayList<Integer> termOffline = new ArrayList<>();
termOffline.add(3);
termOffline.add(6);
termOffline.add(12);
//set bank and term
bankTerms.put("offline", termOffline);
installment.setTerms(bankTerms);
installment.setRequired(true);
// assume you already declare CreditCard() as creditCard
creditCard.setInstallment(installment);
// assume you already declare TransactionRequest() as transactionRequest then assign to TransactionRequest
transactionRequest.setCreditCard(creditCard)
NSDictionary *terms = @{@"offline": @[@3, @6, @12],
@"bni": @[@6, @12]
};
CC_CONFIG.predefinedInstallment = [MidtransPaymentRequestV2Installment modelWithTerms:terms isRequired:YES];
Setup the SDK
Before request token, enable installment and add your installment terms
required
--> the installment payment required.terms
-> array of available installment terms of supported bank.
Setup whitelist bins
val whiteList = arrayListOf("493496","451197","493497","493498")
val creditCardOptions = CreditCard(
null, // Save Card
null, // TokenId
null, // Authentications
null, // Channel
null, // Bank
null, // Saved Tokens
whiteList, // Whitelist Bins
null, // Blacklist Bins
null, // Installment
null, // Type
)
// assume you already declare CreditCard() as creditCard
ArrayList<String> whiteList = new ArrayList<>(Arrays.asList("493496","451197","493497","493498"));
creditCard.setWhiteListBins(whiteList);
// assume you already declare TransactionRequest() as transactionRequest then assign to TransactionRequest
transactionRequest.setCreditCard(creditCard)
NSArray *whitelistBins = @[@"493496", @"451197", @"493497", @"493498"];
[[MidtransMerchantClient shared] requestTransactionTokenWithTransactionDetails:trx
itemDetails:<item details>
customerDetails:<customer details>
customField:<custom field>
binFilter:whitelistBins
blacklistBinFilter:<blacklist bins>
transactionExpireTime:<expire time>
completion:^(MidtransTransactionTokenResponse * _Nullable token, NSError * _Nullable error)
{
if (error) {
}
else {
}
}];
Optionally whitelist_bins
can be used to accept only card numbers within the specified BIN numbers. (whitelist_bins
is required for offline
installment type).
Mobile SDK and Midtrans backend (snap) will check if the card numbers’ first n
digit numbers contain one of bins available in whitelist_bins
.
This installment object and whitelist bins need to be added at credit_card
object when the server accepts the transaction request from mobile SDK. A full example of installment data sent to Snap is like this.
BNI Point
BNI Point is special feature for BNI Bank customers. This feature allows users to redeem their point to be applied into their credit card payments. In your app side, there's no adjustment needed. To enabled this feature in mobile SDK, contact our support team. Please have a look to the following BNI Point flow to know more about this feature.
Mandiri Fiestapoin
Mandiri Fiestapoin is special feature for Mandiri Bank customers. This feature allows users to redeem their Mandiri fiestapoin to be applied into their credit card payments. In your app side, there's no adjustment needed. To enabled this feature in mobile SDK, contact our support team.
Pre Authorization
Set up
authorize transaction
val creditCardOptions = CreditCard(
null, // Save Card
null, // TokenId
null, // Authentications
null, // Channel
null, // Bank
null, // Saved Tokens
null, // Whitelist Bins
null, // Blacklist Bins
null, // Installment
CardTokenRequest.TYPE_AUTHORIZE, // Type
);
CreditCard creditCard = new CreditCard();
creditCard.setType(CardTokenRequest.TYPE_AUTHORIZE);
// Set into transaction Request
TransactionRequest transactionRequest = MidtransSDK.getInstance().getTransactionRequest();
transactionRequest.setCreditCard(creditCard);
// Set into SDK instance
MidtransSDK.getInstance().setTransactionRequest(transactionRequest());
CC_CONFIG.preauthEnabled = YES;
Pre Authorization is a feature to set the credit card transaction type into authorize
.
If the transaction type is authorize
then the merchant needs to capture the payment in MAP.
To use this feature you need to add a settings into the credit card options in transaction request.
Direct payment screen
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);
// 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 TheURL Types
section a new URL scheme. For example you can add something likemyApp
or any name you preferred. - Alternatively you can go to your
info.plist
file and paste this code, you can changemyApp
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**.
Afterwards, you need to configure it in the sdk based on your url scheme name.
//configure your url scheme to the sdk config
MidtransConfig.shared.callbackSchemeURL = @"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
NSString *token = [[NSUserDefaults standardUserDefaults] objectForKey:MIDTRANS_CORE_CURRENT_TOKEN];
[[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>
//configure your url scheme to the sdk config
MidtransConfig.shared.shopeePayCallbackURL = @"myApp://";
- 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 demo://midtrans
then Shopee app will return callback like this demo://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="demo" />
</intent-filter>
</activity>
ShopeePay Callback assigned in StartPayment Constructor (new PaymentCallback("demo://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="demo" />
</intent-filter>
</activity>
// Setup your Transaction Request here then set your ShopeePay deeplink.
// Assume you already make TransactionRequest object.
transactionRequest.setShopeepay(new Shopeepay("demo://midtrans"));
Custom Expiry
There is a feature on mobile SDK to enable custom transaction lifetime. To use this feature you need to add an ExpiryModel
object into TransactionRequest
.
Custom Expiry Configuration
private fun getFormattedTime(time: Long): String {
// Quoted "Z" to indicate UTC, no timezone offset
val df: DateFormat = SimpleDateFormat("yyyy-MM-dd HH:mm:ss Z")
df.timeZone = TimeZone.getTimeZone("Asia/Jakarta")
return df.format(Date(time))
}
...
val expiry = Expiry(
getFormattedTime(System.currentTimeMillis()), //start hour
Expiry.UNIT_HOUR, // Unit
5 // duration
)
Expiry assigned in StartPayment Constructor
// set expiry time
ExpiryModel expiryModel = new ExpiryModel();
// set start time
long timeInMili = System.currentTimeMillis();
// format the time
DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss Z");
df.setTimeZone(TimeZone.getTimeZone("Asia/Jakarta"));
// format the time as a string
String nowAsISO = df.format(new Date(time));
// set the formatted time to expiry model
expiryModel.setStartTime(Utils.getFormattedTime();
expiryModel.setDuration(1);
// set time unit
expiryModel.setUnit(ExpiryModel.UNIT_MINUTE);
//set expiry time object to transaction request
transactionRequest.setExpiry(expiryModel);
MidtransTransactionExpire *expireTime = [[MidtransTransactionExpire alloc] initWithExpireTime:nil expireDuration:1 withUnitTime:MindtransTimeUnitTypeHour];
// and then
[[MidtransMerchantClient shared] requestTransactionTokenWithTransactionDetails:trx
itemDetails:@[itm]
customerDetails:cst
customField:arrayOfCustomField
binFilter:binFilter
blacklistBinFilter:blacklistBin
transactionExpireTime:expireTime
completion:^(MidtransTransactionTokenResponse * _Nullable token, NSError * _Nullable error)
Parameter | Type / Required | Description |
---|---|---|
start_time | String(255) (optional) | Timestamp in yyyy-MM-dd HH:mm:ss Z format. If not specified, transaction time will be used as start time (when customer charge) |
duration | Integer (required for expiry) | Expiry duration |
unit | String (required for expiry) | Expiry unit. Options: day, hour, minute (plural term also accepted) |
Custom Field
Set up custom field
Custom Field assigned in StartPayment Constructor
TransactionRequest transactionRequest = MidtransSDK.getInstance().getTransactionRequest();
transactionRequest.setCustomField1(CUSTOM_FIELD_1);
transactionRequest.setCustomField2(CUSTOM_FIELD_2);
transactionRequest.setCustomField3(CUSTOM_FIELD_3);
MidtransSDK.getInstance().setTransactionRequest(transactionRequest);
NSMutableArray *arrayOfCustomField = [NSMutableArray new];
[arrayOfCustomField addObject:@{MIDTRANS_CUSTOMFIELD_1:@"custom134"}];
[arrayOfCustomField addObject:@{MIDTRANS_CUSTOMFIELD_2:@"custom3332"}];
[arrayOfCustomField addObject:@{MIDTRANS_CUSTOMFIELD_3:@"custom3333"}];
// and then
[[MidtransMerchantClient shared] requestTransactionTokenWithTransactionDetails:self.transactionDetails
itemDetails:self.itemDetails
customerDetails:self.customerDetails
customField:arrayOfCustomField
transactionExpireTime:nil
completion:^(MidtransTransactionTokenResponse * _Nullable token, NSError * _Nullable error)
{
...
}];
These 3 fields will be brought at payment so it will be available at MAP and a HTTP notification will be sent to the merchant.
Custom VA Number
Mobile SDK provides a feature that allows customized VA Number for the following payment methods
- Permata VA (Bank Transfer)
- BCA VA (Bank Transfer)
- BNI VA (Bank Transfer)
Set up Custom VA Number (Android SDK 2.xx)
//Custom VA Assigned in StartPayment constructor
BankTransferRequest (
"1234512345", // Va Number
null, // FreeText
null, // SubCompanyCode
null, // Recipient Name
)
Set up Custom VA Number (Android SDK ver 1.xx)
// ....
// Custom VA Number Permata Bank
TransactionRequest transactionRequest = MidtransSDK.getInstance().getTransactionRequest();
// custom va number for Permata Bank Transfer must be 10 digits
String PERMATA_VA_NUMBER = "1234512345";
// Set into transaction Request
transactionRequest.setPermataVa(new PermataBankTransferRequestModel(PERMATA_VA_NUMBER));
// ....
// Custom VA Number BCA Bank
TransactionRequest transactionRequest = MidtransSDK.getInstance().getTransactionRequest();
// custom va number
String BCA_VA_NUMBER = "1234512345";
// Set into transaction Request
transactionRequest.setBcaVa(new BcaBankTransferRequestModel(BCA_VA_NUMBER));
// ...
// ....
// Custom VA Number BNI Bank
TransactionRequest transactionRequest = MidtransSDK.getInstance().getTransactionRequest();
// custom va number
String BNI_VA_NUMBER = "1234512345";
// Set into transaction Request
transactionRequest.setBniVa(new BankTransferRequestModel(BNI_VA_NUMBER));
// ...
Set up Custom VA Number (iOS)
CONFIG.customBCAVANumber = @"your va string";
CONFIG.customPermataVANumber = = @"your va string";
Note
- The Custom VA number must consist of numbers.
- Custom VA Number for Permata Bank Transfer must be 10 digits
Other Bank ATM / VA Switcher
For bank transfers beside BCA, Mandiri, BNI, or Permata, Midtrans previously utilized Permata as VA processor. Recently, Midtrans adds support for BNI VA, giving the merchant flexibility to choose which one will be used for other bank transfer. The idea is when one of the processors (either BNI or Permata) is down, merchant can switches to other processor, preventing lose of the sales. In order to use this functionality, merchant should enable both BNI VA and Permata VA. The switch itself is located in Snap Preferences in MAP (Merchant Administrator Portal).
In merchant app, there's no adjustment needed. The changes will be valid for the next checkout.
Sub Company Code
Set up sub company code for BCA VA
//Custom VA Assigned in StartPayment constructor
// sub company code must be exactly 5 digits of number
val SUB_COMPANY_CODE_BCA = "12321"
BankTransferRequest (
"1234512345", // Va Number
null, // FreeText
SUB_COMPANY_CODE_BCA, // SubCompanyCode,
null // Recipient Name
)
// ....
// Transaction request
TransactionRequest transactionRequest = MidtransSDK.getInstance().getTransactionRequest();
// sub company code must be exactly 5 digits of number
String SUB_COMPANY_CODE_BCA = "12321";
// Create BcaBankTransferRequestModel object and then set the SUB_COMPANY_CODE_BCA
BcaBankTransferRequestModel bcaRequestModel = new BcaBankTransferRequestModel();
bcaRequestModel.setSubCompanyCode(SUB_COMPANY_CODE_BCA);
// Set into transaction Request
transactionRequest.setBcaVa(bcaRequestModel);
// sub company code must be exactly 5 digits of number ex:55555
CONFIG.customBCASubcompanyCode = @“55555”;
This feature allows you to pass sub company code in VA payment.
The sub company code must be exactly 5 digits of number. This feature is only available on BCA VA payment method.
Custom Recipient
Set up Custom Recipient for Permata
//Custom VA Assigned in StartPayment constructor
val PERMATA_RECIPIENT = "SUDARSONO"
BankTransferRequest (
"1234512345", // Va Number
null, // FreeText
null, // SubCompanyCode,
PERMATA_RECIPIENT // Recipient Name
)
// ....
// Custom Recipient Name for Permata Bank
TransactionRequest transactionRequest = MidtransSDK.getInstance().getTransactionRequest();
// custom recipient for Permata Bank Transfer must be 20 character at most and in uppercase
String PERMATA_RECIPIENT = "SUDARSONO";
// Create request model (you can optionally insert custom VA as method argument here)
PermataBankTransferRequestModel permataRequest = new PermataBankTransferRequestModel();
permataRequest.setRecipientName(PERMATA_RECIPIENT);
// Set into transaction Request
transactionRequest.setPermataVa(permataRequest);
Mobile SDK provides a feature that allows merchant to customize recipient name for Permata VA (Bank Transfer). The recipient name will be displayed in the ATM screen.
Note
- The custom recipient name must consist of alphanumeric characters and space. No symbol allowed.
- Custom recipient name for Permata Bank Transfer must be 20 characters at most, and in uppercase.
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
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 Status
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);
UICONFIG.hideStatusPage = YES;
You can skip payment status provided by Midtrans SDK if you want to show your own status page.
Set Default save card options to true
In credit card payment page, there is a checkbox to save card and it is not checked by default.
You can make this checkbox checked by default by using this settings.
val uiKitCustomSetting = UiKitApi.getDefaultInstance().uiKitSetting
uiKitCustomSetting.saveCardChecked = true
// Init custom settings
UIKitCustomSetting uisetting = new UIKitCustomSetting();
uiKitCustomSetting.setSaveCardChecked(true);
MidtransSDK.getInstance().setUIKitCustomSetting(uiKitCustomSetting);
CC_CONFIG.setDefaultCreditSaveCardEnabled = YES;
BIN Promo/Filter
"whitelist_bins": [
"mandiri",
"41111111"
]
"blacklist_bins": [
"mandiri",
"41111111"
]
{
"transaction_details": {
"order_id": "ORDER-ID",
"gross_amount": 10000
},
"credit_card": {
"secure": true,
"whitelist_bins": [
"bni",
"459920"
],
"blacklist_bins": [
"bri",
"410505"
]
},
"item_details": [
{
"id": "ITEM1",
"price": 10000,
"quantity": 1,
"name": "Midtrans Bear"
}
],
"customer_details": {
"first_name": "TEST",
"last_name": "MIDTRANSER",
"email": "[email protected]",
"phone": "+628123456",
"billing_address": {
"first_name": "TEST",
"last_name": "MIDTRANSER",
"email": "[email protected]",
"phone": "081 2233 44-55",
"address": "Sudirman",
"city": "Jakarta",
"postal_code": "12190",
"country_code": "IDN"
},
"shipping_address": {
"first_name": "TEST",
"last_name": "MIDTRANSER",
"email": "[email protected]",
"phone": "0 8128-75 7-9338",
"address": "Sudirman",
"city": "Jakarta",
"postal_code": "12190",
"country_code": "IDN"
}
}
}
Credit card bins can be filtered by using whitelist_bins
or blacklist_bins
or both features. To use these features, merchant server must intercept mobile SDK’s request and add list of whitelist bin into request.
Note:
- This object needs to be added into
credit_card
object. - If set of whitelisted bins intersects with set of blacklisted bins, then:
- Everything in whitelisted bins that is not mentioned in blacklisted bins will be accepted.
- Everything else will be denied
Parameter | Description |
---|---|
whitelistbins _Array (optional) | Allowed credit card BIN numbers. The bin value can be either a prefix (up to 8 digits) of card number or the name of a bank, in which case all the cards issued by that bank will be allowed. The supported bank names are bni bca mandiri cimb bri and maybank . Default: allow all cards |
blacklistbins _Array (optional) | A list of credit card BIN numbers that cannot be used for the transaction. The bin value can be either a prefix (up to 8 digits) of card number or the name of a bank, in which case all the cards issued by that bank will be denied. The supported bank names are bni bca mandiri cimb bri and maybank . Default: allow all cards |