MSDK + Your Custom UI

This guide describes how to use Mobile SDK (MSDK) and your custom UI. We assume that you already went through base MSDK integration guide and can submit payments. If yes, proceed with the following instructions to enhance payments with the 3D Secure 2 verification.

NOTE: First of all, proper configuration in the Administration Portal should be done to enable 3DS 2 for the specific card brands.

iOSAndroid

Requirements

Xcode 12 and iOS 14 SDK
iOS 10.0+ deployment target
Android 5.0 (API Level 21) or higher

Implement challenge callback

You need to implement ThreeDSWorkflowListener with onThreeDSChallengeRequired method for displaying challenge screen and onThreeDSConfigRequired method used for providing additional 3DS Service configuration.

Create listener:

ThreeDSWorkflowListener threeDSWorkflowListener = new ThreeDSWorkflowListener() {
    @Override
    public Activity onThreeDSChallengeRequired() {
        // provide your Activity
        return activity;
    }

    @Override
    public OppThreeDSConfig onThreeDSConfigRequired() {
        // provide your OppThreeDSConfig
        return threeDSConfig;
    }
};

val threeDSWorkflowListener: ThreeDSWorkflowListener = object : ThreeDSWorkflowListener {
    override fun onThreeDSChallengeRequired(): Activity {
        // provide your Activity
        return activity
    }

    override fun onThreeDSConfigRequired(): OppThreeDSConfig {
        // provide your OppThreeDSConfig
        return threeDSConfig
    }
}

Set listener to the provider:

paymentProvider.setThreeDSWorkflowListener(threeDSWorkflowListener);

paymentProvider!!.setThreeDSWorkflowListener(threeDSWorkflowListener)

Conform to a protocol:

@interface MyCardViewController() <ThreeDSWorkflowListener>
    @property (nonatomic) OPPPaymentProvider *paymentProvider;
    //...
@end

class MyCardViewController: ThreeDSWorkflowListener {
    var provider: OPPPaymentProvider?
    ///
}

Assign Payment Provider delegate:

self.paymentProvider.threeDSEventListener = self;

self.provider?.threeDSEventListener = self

Implement protocol methods:

//OPPThreeDSEventListener protocol methods
- (void)onThreeDSConfigRequiredWithCompletion:(void (^)(OPPThreeDSConfig * _Nonnull))completion {
    OPPThreeDSConfig *config = [[OPPThreeDSConfig alloc] init];
    //return config
    completion(config);
}

- (void)onThreeDSChallengeRequiredWithCompletion:(void (^)(UINavigationController * _Nonnull))completion {
    //return Navigation Controller
    completion(self.navController);
}

//OPPThreeDSEventListener protocol methods
    func onThreeDSChallengeRequired(completion: @escaping (UINavigationController) -> Void) {
        completion(self.navigationController!)
    }
    
    func onThreeDSConfigRequired(completion: @escaping (OPPThreeDSConfig) -> Void) {
        let config = OPPThreeDSConfig()
        completion(config)
    }

Submit transaction call

From now just follow with Submit Transaction step of MSDK Custom UI integration guide. All 3D secure 2 actions are integrated within payment request.