diff --git a/pom.xml b/pom.xml
index 11f20dfd3..bc28e6d54 100644
--- a/pom.xml
+++ b/pom.xml
@@ -5,11 +5,11 @@
     <parent>
         <groupId>au.com.royalpay.payment</groupId>
         <artifactId>payment-parent</artifactId>
-        <version>2.2.29</version>
+        <version>2.2.30</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
     <artifactId>manage</artifactId>
-    <version>2.3.86</version>
+    <version>2.3.87-SNAPSHOT</version>
     <properties>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
         <jib-maven-plugin.version>2.4.0</jib-maven-plugin.version>
diff --git a/src/main/ui/static/css/cardpay.css b/src/main/ui/static/css/cardpay.css
index 2f0755782..30a402cbc 100644
--- a/src/main/ui/static/css/cardpay.css
+++ b/src/main/ui/static/css/cardpay.css
@@ -105,6 +105,9 @@
         border-radius: 4px;
         height: 50px;
     }
+    .threeds-container .dialog{
+        width:100%;
+    }
 }
 
 .btn-warning {
@@ -184,4 +187,33 @@
     60% {
         opacity: 1;
     }
-}
\ No newline at end of file
+}
+
+.threeds-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .4);
+    display: block;
+}
+.threeds-container.hide{
+    display: none;
+}
+
+.threeds-container .dialog{
+    display: block;
+    width: 768px;
+    position: relative;
+    margin: 40px auto;
+    background: #fff;
+    max-height: 80%;
+    overflow: auto;
+}
+
+.threeds-container .dialog>iframe{
+    border: none;
+    width: 100%;
+}
+
diff --git a/src/main/ui/static/templates/payment/v1/card_pay.js b/src/main/ui/static/templates/payment/v1/card_pay.js
index 837ad66ac..e6507d7e3 100644
--- a/src/main/ui/static/templates/payment/v1/card_pay.js
+++ b/src/main/ui/static/templates/payment/v1/card_pay.js
@@ -4,6 +4,29 @@ $(function () {
     let cardFrame = new CardInputFrame($container, window.card_input_appid, window.card_input_token);
     let $errorMsgBox = $('#errorMsgBox');
     let loading = $('.loading-container');
+
+    if (window.three_ds_params){
+        handleThreeDs(window.three_ds_params)
+    }
+
+    function handleThreeDs(threeDsParams) {
+        let form = $('<form></form>').attr('action', threeDsParams.acs_url).attr('method', 'post').css('display', 'none')
+            .attr('target', 'threeds-frame');
+        $('<input>').attr('name', 'PaReq').val(threeDsParams.pa_req).attr('type', 'hidden').appendTo(form);
+        $('<input>').attr('name', 'TermUrl').val(threeDsParams.term_url).attr('type', 'hidden').appendTo(form);
+        $('body').append(form);
+        window.threeds_success = function (success, errorCode, errorMsg) {
+            $('#threeds-frame').addClass('hide');
+            if (success) {
+                location.href = './result'
+            } else {
+                $errorMsgBox.text('[' + errorCode + ']' + errorMsg).show();
+            }
+        }
+        form.submit();
+        $('#threeds-frame').removeClass('hide')
+    }
+
     cardFrame.onSuccess = function (secretData) {
         $.ajax({
             url: 'commit',
@@ -13,11 +36,7 @@ $(function () {
             success: function (res) {
                 if (res.sdk_params) {
                     let threeDsParams = JSON.parse(res.sdk_params);
-                    let form = $('<form></form>').attr('action', threeDsParams.acs_url).attr('method', 'post').css('display', 'none');
-                    $('<input>').attr('name', 'PaReq').val(threeDsParams.pa_req).attr('type', 'hidden').appendTo(form);
-                    $('<input>').attr('name', 'TermUrl').val(threeDsParams.term_url).attr('type', 'hidden').appendTo(form);
-                    $('body').append(form);
-                    form.submit();
+                    handleThreeDs(threeDsParams);
                     return;
                 }
                 startCheckOrder(window.client_moniker, window.partner_order_id);