FPX
Follow this guide to add FPX to your checkout.
- FPX - Fpx
Payment method availability:
- FPX since mSDK version 7.3.0
iOS
Android
Ready-to-Use UI
When you use our ready-to-use UI, everything works out-of-box. Just set FPX payment brands and shopper result url in the Checkout Settings class and you are done. Proceed with the presenting checkout as for standard transaction.
OPPCheckoutSettings *checkoutSettings = [[OPPCheckoutSettings alloc] init];
// Set FPX payment methods
checkoutSettings.paymentBrands = @[@"FPX"];
// Set shopper result URL
checkoutSettings.shopperResultURL = @"com.companyname.appname.payments://result";
let checkoutSettings = OPPCheckoutSettings()
// Set FPX payment methodsw
checkoutSettings.paymentBrands = ["FPX"]
// Set shopper result URL
checkoutSettings.shopperResultURL = "com.companyname.appname.payments://result"
When you use our ready-to-use UI, everything works out-of-box. Just set FPX payment brands and shopper result url in the Checkout Settings class and you are done. Proceed with the presenting checkout as for standard transaction.
Set<String> paymentBrands = new HashSet<>();
paymentBrands.add("FPX");
CheckoutSettings checkoutSettings = new CheckoutSettings(
checkoutId,
paymentBrands,
providerMode
);
val paymentBrands = hashSetOf("FPX")
val checkoutSettings = CheckoutSettings(
checkoutId,
paymentBrands,
providerMode
)
SDK & Your Own UI
When you use your own UI, you will have to call an API from OPPPaymentProvider to get the list of banks supported by FPX. Use this list to render bank list on your own UI.
// getFPXBanks method returns dictionary where the key is the bank display name and the value is the bank name.
// ex: @{@"XYZ bank": @"xyz_bank"}
NSDictionary *banks = [OPPPaymentProvider getFPXBanks];
// getFPXBanks method returns dictionary where the key is the bank display name and the value is the bank name.
// ex: ["XYZ bank": "xyz_bank"]
let banks = OPPPaymentProvider.getFPXBanks()
1. Get supported bank list for FPX
When you use your own UI, you will have to call an API from OPPPaymentProvider to get the list of banks supported by FPX. Use this list to render bank list on your own UI.
// getFPXBanks method returns a Map where the key is the bank display name and the value is the bank name.
// ex: banks.get("XYZ bank") returns "xyz_bank"
Map<String, String> banks = FPXBanksUtils.getFPXBanks();
// getFPXBanks method returns a Map where the key is the bank display name and the value is the bank name.
// ex: banks["XYZ bank"] returns "xyz_bank"
val banks: Map<String, String> = FPXBanksUtils.getFPXBanks()
Create payment parameter object for FPX using below given API.
NSError *error = nil;
OPPBankAccountPaymentParams *paymentParams = [OPPBankAccountPaymentParams fpxPaymentParamsWithCheckoutID:chekoutID
bankName:bankName
error:&error];
do {
let paymentParams = try OPPBankAccountPaymentParams.fpxPaymentParams(checkoutID: checkoutID,
bankName: bankName)
} catch (let error) {
// handle error
}
2. Send transaction with payment parameters
Create a payment parameter object, initialize a transaction object, and submit the transaction for FPX.
PaymentParams paymentParams;
// use this method to create payment parameters for FPX
// ex: String bankName = banks.getValue("XYX Bank");
paymentParams = BankAccountPaymentParams.createFPXPaymentParams(checkoutId, bankName);
// set shopper result URL
paymentParams.setShopperResultUrl("companyname://result");
Transaction transaction = new Transaction(paymentParams);
paymentProvider.submitTransaction(transaction);
// use this method to create payment parameters for FPX
//ex: val bankName = banks.getValue("XYX Bank")
val paymentParams = BankAccountPaymentParams.createFPXPaymentParams(checkoutId, bankName)
// set shopper result URL
paymentParams.shopperResultUrl = "companyname://result"
val transaction = Transaction(paymentParams)
paymentProvider.submitTransaction(transaction)
Create transaction object and submit transaction.
OPPTransaction *transaction = [OPPTransaction transactionWithPaymentParams:paymentParams];
[self.provider submitTransaction:transaction completionHandler:^(OPPTransaction * _Nonnull transaction, NSError * _Nullable error) {
if (error) {
// Handle the error.
} else {
// Use the following params to complete FPX transaction.
NSString *redirectUrl = transaction.redirectURL;
}
}];
let transaction = OPPTransaction(paymentParams: paymentParams)
provider.submitTransaction(transaction) { (transaction, error) in
if (error != nil) {
// Handle the error.
} else {
// Use the following params to complete FPX transaction.
let redirectUrl = transaction.redirectURL;
}
}
3. Implement ITransactionListener
Now, let the class implement the ITransactionListener
interface. Implement the following ITransactionListener
methods:
Open redirect url and handle the final redirect
You can open this redirect url in your webView present in fragment/activity.
@Override
public void transactionCompleted(Transaction transaction) {
if ("FPX".equals(transaction.getPaymentParams().getPaymentBrand())) {
// open this redirectUrl in webview , which should be present in fragment/activity of in app
String redirectUrl = transaction.getRedirectUrl();
} else {
// code for other brands
}
}
@Override
public void transactionFailed(@NonNull Transaction transaction, @NonNull PaymentError error) {
// show error message
}
override fun transactionCompleted(transaction: Transaction) {
if ("FPX" == transaction.paymentParams.paymentBrand) {
// open this redirectUrl in webview , which should be present in fragment/activity of in app
val redirectUrl = transaction.getRedirectUrl
} else {
// code for other brands
}
}
override fun transactionFailed(transaction: Transaction, error: PaymentError) {
// show error message
}
4. Request payment status
Once shopper complete/verify the payment. After this the shopper is redirected back to the app and the status of the payment can be queried.