diff --git a/src/main/java/au/com/royalpay/payment/manage/appclient/core/RetailAppService.java b/src/main/java/au/com/royalpay/payment/manage/appclient/core/RetailAppService.java
index 4a76e15e6..3236e16dc 100644
--- a/src/main/java/au/com/royalpay/payment/manage/appclient/core/RetailAppService.java
+++ b/src/main/java/au/com/royalpay/payment/manage/appclient/core/RetailAppService.java
@@ -163,4 +163,6 @@ public interface RetailAppService {
     JSONObject getCouponCusCouponLog(String client_moniker, AppQueryBean appQueryBean);
 
     void saveCouponAccuessLog(int client_id, String coupon_id);
+
+    JSONObject getStyle();
 }
diff --git a/src/main/java/au/com/royalpay/payment/manage/appclient/core/impls/RetailAppServiceImp.java b/src/main/java/au/com/royalpay/payment/manage/appclient/core/impls/RetailAppServiceImp.java
index b7d41a676..375d3d42d 100644
--- a/src/main/java/au/com/royalpay/payment/manage/appclient/core/impls/RetailAppServiceImp.java
+++ b/src/main/java/au/com/royalpay/payment/manage/appclient/core/impls/RetailAppServiceImp.java
@@ -498,6 +498,11 @@ public class RetailAppServiceImp implements RetailAppService {
         couponAccuessLogMapper.save(couponAccuessLog);
     }
 
+    @Override
+    public JSONObject getStyle() {
+        return royalPayCMSSupport.getStyle();
+    }
+
     @Override
     public void updateClient(JSONObject device, AppClientBean appClientBean) {
         String clientType = device.getString("client_type");
diff --git a/src/main/java/au/com/royalpay/payment/manage/appclient/web/RetailAppController.java b/src/main/java/au/com/royalpay/payment/manage/appclient/web/RetailAppController.java
index ac2e2f325..d8cf99f17 100644
--- a/src/main/java/au/com/royalpay/payment/manage/appclient/web/RetailAppController.java
+++ b/src/main/java/au/com/royalpay/payment/manage/appclient/web/RetailAppController.java
@@ -561,4 +561,9 @@ public class RetailAppController {
         retailAppService.saveCouponAccuessLog(client_id, coupon_id);
     }
 
+    @RequestMapping(value = "/style", method = RequestMethod.GET)
+    public JSONObject getStyle() {
+        return retailAppService.getStyle();
+    }
+
 }
diff --git a/src/main/ui/static/lib/rpay/app_pay_2.js b/src/main/ui/static/lib/rpay/app_pay_2.js
new file mode 100644
index 000000000..5126e7f98
--- /dev/null
+++ b/src/main/ui/static/lib/rpay/app_pay_2.js
@@ -0,0 +1,390 @@
+/**
+ * Created by yixian on 2017-05-08
+ */
+
+$(function () {
+    'use strict';
+    var dataCache = {price: '0', coupons: [], coupon_groups:{}};
+    var exchangeRate = parseFloat(window.exchange_rate);
+
+    dataCache.paying = false;
+    var ctrl = {};
+
+    $('.weui_grid.key').bind('touchstart', function () {
+        if (dataCache.paying) {
+            return;
+        }
+        var char = $(this).attr('data-char');
+        appendChar(char);
+    });
+
+    $('.coupons .use-check').click(function () {
+        if ($(this).hasClass('disabled')) {
+            return;
+        }
+        var couponId = $(this).attr('data-coupon-id');
+        var couponGroup = $(this).attr('data-coupon-group');
+        if (couponGroup) {
+            var prevCouponId = dataCache.coupon_groups[couponGroup];
+            if (prevCouponId) {
+                var prevIdx = dataCache.coupons.indexOf(prevCouponId);
+                if (prevIdx >= 0) {
+                    dataCache.coupons.splice(prevIdx, 1);
+                }
+                if (prevCouponId!=couponId) {
+                    $('.coupons .use-check[data-coupon-id="' + prevCouponId + '"]').removeClass('checked').addClass('unchecked');
+                    dataCache.coupon_groups[couponGroup] = couponId;
+                }else {
+                    dataCache.coupon_groups[couponGroup]= null;
+                }
+            }else {
+                dataCache.coupon_groups[couponGroup] = couponId;
+            }
+
+        }
+
+        if ($(this).is('.checked')) {
+            $(this).removeClass('checked').addClass('unchecked');
+        } else {
+            $(this).removeClass('unchecked').addClass('checked');
+        }
+        var checked = $(this).is('.checked');
+        if (checked) {
+            dataCache.coupons.push(couponId);
+            updatePrice();
+        } else {
+            var idx = dataCache.coupons.indexOf(couponId);
+            dataCache.coupons.splice(idx, 1);
+            updatePrice();
+        }
+    });
+
+    $('#key_B').bind('touchstart', function () {
+        backspace();
+    });
+
+    function updatePoundage(price) {
+        if (window.extensions.indexOf('customerrate') >= 0 && window.rateValue != null) {
+            if (window.use_customised_rate) {
+                var rate = new Decimal(100).plus(window.rateValue).div(100);
+                var poundageValue = new Decimal(dataCache.price).mul(rate).sub(dataCache.price);
+            } else {
+                var rateRemain = new Decimal(100).sub(window.rateValue).div(100);
+                poundageValue = new Decimal(dataCache.price).div(rateRemain).sub(dataCache.price);
+            }
+            dataCache.poundageValue = poundageValue.toFixed(2, Decimal.ROUND_HALF_UP);
+            return poundageValue.plus(price).toFixed(2, Decimal.ROUND_HALF_UP);
+        }
+        return price;
+    }
+
+    function updatePrice() {
+        $('#audVal').html(dataCache.price);
+        var realPrice = dataCache.price;
+        $('#audValReal').html(realPrice);
+        var surchargeData = calculateSurcharge(realPrice);
+
+        dataCache.tax = surchargeData.tax;
+        dataCache.surcharge = surchargeData.surcharge;
+        var price = surchargeData.newPrice || realPrice;
+        var priceBeforeDiscount = price;
+        dataCache.discounts = [];
+        $(window.coupons).each(function () {
+            price = this.handleDiscount(price, dataCache.price, dataCache.discounts, dataCache.coupons);
+        });
+        dataCache.customSurcharge = new Decimal(price).sub(realPrice).toFixed(2,Decimal.ROUND_HALF_UP);
+        dataCache.finalPrice = new Decimal(price).toFixed(2, Decimal.ROUND_FLOOR);
+        var rate = 'CNY' == window.currency ? 1 : exchangeRate;
+        var cnyVal = Decimal.mul(price, rate).toFixed(2, Decimal.ROUND_HALF_UP);
+        $('#cnyVal').html(cnyVal);
+        dataCache.currencyPrice = 'CNY' == window.currency ? Decimal.div(priceBeforeDiscount, exchangeRate).toFixed(2, Decimal.ROUND_FLOOR) : priceBeforeDiscount;
+    }
+
+    function updatePoundageStatus() {
+        $(window.coupons).each(function () {
+            var coupon = this;
+            var couponId = coupon.couponId();
+            if (coupon.isEnable(dataCache.currencyPrice||0)) {
+                $('.coupons .use-check[data-coupon-id=' + couponId + ']').removeClass('disabled');
+            } else {
+                var dom = $('.coupons .use-check[data-coupon-id=' + couponId + ']').addClass('disabled');
+                var couponGroup = dom.attr('data-coupon-group');
+                if (couponGroup) {
+                    if (dataCache.coupon_groups[couponGroup] == couponId) {
+                        dataCache.coupon_groups[couponGroup] = null;
+                    }
+                }
+                var idx = dataCache.coupons.indexOf(couponId);
+                if (idx >= 0) {
+                    dataCache.coupons.splice(idx, 1);
+                }
+                dom.removeClass('checked').addClass('unchecked');
+            }
+        })
+    }
+    updatePoundageStatus();
+
+    function backspace() {
+        dataCache.price = dataCache.price.substring(0, dataCache.price.length - 1);
+        if (dataCache.price.length == 0) {
+            dataCache.price = '0';
+        }
+        updatePrice();
+        updatePoundageStatus();
+    }
+
+    function appendChar(char) {
+        var pointLocation = dataCache.price.indexOf('.');
+        if (pointLocation >= 0 || char == '.' || dataCache.price.length < 5) {
+            if (pointLocation >= 0 && char == '.') {
+                return;
+            }
+            if (pointLocation >= 0 && pointLocation <= dataCache.price.length - 3) {
+                return;
+            }
+            if (dataCache.price == '0' && char != '.') {
+                dataCache.price = '';
+            }
+            dataCache.price += char;
+            updatePrice();
+            updatePoundageStatus();
+        }
+    }
+
+    $('#coupon-box-toggle').click(function () {
+        $('.coupons-container').addClass('show')
+    });
+    $('.coupons-container>.coupons-mask,.coupons-container #close-coupon-box').click(function () {
+        $(this).parents('.coupons-container').removeClass('show');
+    });
+
+
+
+    $('.remark-btn').click(function () {
+        var cfg = {
+            title: '备注 Remark',
+            template: '',
+            initialize: function (dialog) {
+                $('<textarea rows="2"></textarea>').addClass('remark-input').attr('name', 'remark').val(dataCache.remark || '').appendTo($('.weui_dialog_bd', dialog));
+            },
+            confirm: function (dialog, chosen) {
+                if (chosen) {
+                    var remark = $('textarea[name="remark"]', dialog).val();
+                    if (remark) {
+                        $('#remark-box').text('备注：' + remark).show()
+                    } else {
+                        $('#remark-box').text('').hide();
+                    }
+                    dataCache.remark = remark;
+                }
+
+            }
+        };
+        showWeuiDialog(cfg);
+    });
+
+    $('.paydetail').click(function () {
+        var config = {
+            title: 'Payment Detail',
+            template: '',
+            initialize: function (dialog) {
+                var bd = $('.weui_dialog_bd', dialog);
+                var currencySymbol = window.currency == 'AUD' ? '$' : '¥';
+                $('<p></p>').html('Input Price 输入金额:' + currencySymbol + dataCache.price).appendTo(bd);
+                if (parseFloat(dataCache.customSurcharge) > 0) {
+                    $('<p></p>').html('Surcharge 手续费(' + window.rateValue + '%):+' + currencySymbol + dataCache.customSurcharge).appendTo(bd);
+                }
+                $(dataCache.discounts).each(function () {
+                    $('<p></p>').html(this.title + ':-' + currencySymbol + this.amount).appendTo(bd);
+                });
+                $('<p></p>').addClass('final').html('Final 支付金额:' + currencySymbol + (dataCache.finalPrice || 0)).appendTo(bd);
+            }
+        };
+        showWeuiDialog(config);
+    });
+
+    $('#key_P').bind('touchstart', function () {
+
+        pay();
+
+        // $('#key_P').addClass('hidden');
+        // $('#key_Loading').removeClass('hidden');
+        // if (dataCache.paying) {
+        //     return;
+        // }
+        // dataCache.paying = true;
+        // var data = {price: dataCache.price + '', original_number: true, currency: window.currency};
+        // if (dataCache.remark) {
+        //     data.description = dataCache.remark;
+        // }
+        // if (window.extensions.indexOf('preauthorize') >= 0) {
+        //     data.preauthorize = true;
+        // }
+        // if (window.extensions.indexOf('qrcodemode') >= 0) {
+        //     data.qrmode = true;
+        // }
+        // if (window.extensions.indexOf('customerrate') >= 0) {
+        //     data.customerrate = true;
+        // }
+        // data.coupons = dataCache.coupons;
+        // dataCache.remark = '';
+        // data.account_id = User.getProduct();
+        // data.qrcodeVersion = window.qrcodeVersion;
+        // $.ajax({
+        //     url: '/api/v1.0/bestpay/partners/' + window.client_moniker + '/app_order',
+        //     method: 'POST',
+        //     data: JSON.stringify(data),
+        //     dataType: 'json',
+        //     contentType: 'application/json',
+        //     success: function (pay) {
+        //         if (pay.direct_paid) {
+        //             window.location = '/api/v1.0/bestpay/partners/' + window.client_moniker + '/orders/' + pay.order_id;
+        //             return;
+        //         }
+        //         var paydata = pay.params;
+        //         try {
+        //             Payment.onPay(paydata, function () {
+        //                 window.location = '/api/v1.0/bestpay/partners/' + window.client_moniker + '/orders/' + pay.order_id;
+        //                 dataCache.paying = false;
+        //                 $('#key_P').removeClass('hidden');
+        //                 $('#key_Loading').addClass('hidden');
+        //             }, function (rescode) {
+        //                 dataCache.paying = false;
+        //                 if (rescode === "cancel") {
+        //                     Dialog.alert("支付取消" + rescode)
+        //                 } else {
+        //                     Dialog.alert("支付失败" + rescode)
+        //                 }
+        //                 $('#key_P').removeClass('hidden');
+        //                 $('#key_Loading').addClass('hidden');
+        //             })
+        //         } catch (e) {
+        //             Dialog.alert(e);
+        //             dataCache.paying = false;
+        //             $('#key_P').removeClass('hidden');
+        //             $('#key_Loading').addClass('hidden');
+        //         }
+        //         Dialog.dismissDialog(dataCache.process);
+        //     },
+        //     error: function (jqXhr) {
+        //         Dialog.alert(jqXhr.responseJSON.message);
+        //         Dialog.dismissDialog(dataCache.process);
+        //         dataCache.paying = false;
+        //         $('#key_P').removeClass('hidden');
+        //         $('#key_Loading').addClass('hidden');
+        //     }
+        // });
+    });
+
+    function showWeuiDialog(config) {
+        if (config.templateUrl) {
+            $.ajax({
+                url: config.templateUrl,
+                dataType: 'html',
+                success: function (template) {
+                    buildDialog(template);
+                }
+            });
+        } else {
+            buildDialog(config.template);
+        }
+
+
+        function buildDialog(template) {
+            var defaultConfig = {backdrop: true};
+            config = $.extend({}, defaultConfig, config);
+            var dialog = $("<div></div>", {class: 'weui_dialog_confirm'});
+            var mask = $('<div></div>', {class: 'weui_mask'}).appendTo(dialog);
+            if (config.backdrop) {
+                mask.click(function () {
+                    dialog.remove();
+                    if ($.isFunction(config.dismiss)) {
+                        config.dismiss();
+                    }
+                })
+            }
+            var dialogBox = $("<div></div>", {class: 'weui_dialog'}).appendTo(dialog);
+            if (config.title) {
+                $('<div></div>', {class: 'weui_dialog_hd'}).append($('<strong></strong>', {class: 'weui_dialog_title'}).html(config.title)).appendTo(dialogBox);
+            }
+            var dialogBody = $("<div></div>", {class: 'weui_dialog_bd'}).appendTo(dialogBox);
+            if (template) {
+                dialogBody.append(template);
+            }
+            if ($.isFunction(config.initialize)) {
+                config.initialize(dialog);
+            }
+            var ft = $('<div class="weui_dialog_ft"></div>').appendTo(dialogBox);
+            if ($.isFunction(config.confirm)) {
+                var yes = $('<a></a>', {class: 'weui_btn_dialog primary', text: 'OK'}).appendTo(ft);
+                yes.click(function () {
+                    config.confirm(dialog, true);
+                    dialog.remove();
+                });
+                var no = $('<a></a>', {class: 'weui_btn_dialog default', text: 'Cancel'}).appendTo(ft);
+                no.click(function () {
+                    config.confirm(dialog, false);
+                    dialog.remove();
+                })
+            } else {
+                var ok = $('<a></a>', {class: 'weui_btn_dialog primary', text: 'OK'}).appendTo(ft);
+                ok.click(function () {
+                    dialog.remove();
+                })
+            }
+            dialog.appendTo($('body'));
+        }
+
+    }
+
+
+    function getUserId(){
+        window.RPayPlus.send("getUserId", null, function(data){
+            alert(data);
+        });
+    }
+
+    function pay(){
+        var order={
+            orderId:'00002',
+            amount:'$100.07',
+            title:'Gift card purchase'
+        };
+        window.RPayPlus.send('pay', order, function(data){
+            alert('this is callback from native and data='+JSON.stringify(data));
+        });
+    }
+
+    function back(){
+        window.RPayPlus.send("back", null, null);
+    }
+
+    function jsInvoke(){
+        window.RPayPlus.send("jsInvoke", 'Native Test', null);
+    }
+
+    function createOrder(msg){
+        alert('create order information='+JSON.stringify(msg));
+    }
+
+    function queryOrder(msg){
+        alert('query order information='+JSON.stringify(msg));
+
+        var order={
+            orderId:'00001',
+            amount:'$10.98',
+            title:'Balance Top-UP'
+        };
+        setTimeout("window.RPayPlus.onResult("+JSON.stringify(order)+");", 1500);
+    }
+
+    function registerJs(){
+        window.RPayPlus.register('createOrder', function(data){
+            createOrder(data);
+        });
+        window.RPayPlus.register('queryOrder', function(data){
+            queryOrder(data);
+        });
+    }
+    getUserId();
+});
\ No newline at end of file
diff --git a/src/main/ui/static/lib/rpay/rpay_jssdk.js b/src/main/ui/static/lib/rpay/rpay_jssdk.js
new file mode 100644
index 000000000..39aa6afe9
--- /dev/null
+++ b/src/main/ui/static/lib/rpay/rpay_jssdk.js
@@ -0,0 +1,58 @@
+(function (){
+         var callbacks = {};
+         var functions = {};
+
+         window.RPayPlus = {
+             // 向Native端发送消息，用于实现：JS->Native
+             send: function(methodName, param, callback) {
+                 var thisId = 0;
+                 if(callback){
+                     thisId = new Date().getTime();; // 获取唯一id
+                     callbacks[thisId] = callback; // 存储Callback
+                 }
+                 var json = {
+                     method: methodName,
+                     data: param || {},
+                     callbackId: thisId // 传到 Native 端
+                 };
+                 var msg = JSON.stringify(json);
+
+                 var u = navigator.userAgent;
+                 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+                 if(isiOS){
+                    window.webkit.messageHandlers.rpayplus.postMessage(msg);
+                 } else{
+                    rpayplus.send(msg);
+                 }
+             },
+
+             // 接收来自Native发送的消息，用于实现Native->JS
+             receive: function(msg) {
+                 var method = msg.methodName,
+                 data = msg.data || {},
+                 callbackId = msg.callbackId; // JS->Native的回调函数ID
+
+                 // 具体逻辑 bridgeName 和 callbackId 不会同时存在；
+                 // callbackId有效，表示此接收信息源自JS->Native的回调
+                 // callbackId无效，且method有效，表示是Native->JS的直接调用
+                 if (callbackId && callbacks[callbackId]) {
+                    callbacks[callbackId](msg.data); // 执行调用
+                    return;
+                 }
+                 if (method && functions[method]) {
+                    functions[method](msg);
+                 }
+             },
+             // 注册JS方法，供Native调用，未被注册的方法，Native无法调用
+             register: function(methodName, callback) {
+                 if (!functions[methodName])  {
+                    functions[methodName] = callback;
+                 }
+             },
+
+             // JS端逻辑处理完成后，回调给Native的数据
+             onResult: function(data){
+                window.RPayPlus.send("jsCallback", data, null);
+             }
+        };
+    })();
\ No newline at end of file
diff --git a/src/main/ui/static/lib/rpay/rrlogo.png b/src/main/ui/static/lib/rpay/rrlogo.png
new file mode 100644
index 000000000..bd87d97d2
Binary files /dev/null and b/src/main/ui/static/lib/rpay/rrlogo.png differ