Express Checkout - JSv4, ref #997

assets/css/admin.css

@@ -223,4 +223,22 @@ label[for=woocommerce_paypal_express_paypal_marketing_solutions_enabled] {
     height: 300px;
     width: 300px;
     margin: 0px;
+}
+
+.angelleye_smart_button_setting_left {
+    width: 49%;
+    float: left;
+}
+#woocommerce_paypal_express_angelleye_smart_button_preview_title, .display_smart_button_previews, .display_smart_button_previews_button {
+    width: 49%;
+    float: right;
+    text-align: center;
+}
+
+#woocommerce_paypal_express_paypal_marketing_solutions {
+    clear: both;
+}
+
+.display_smart_button_previews {
+    margin-top: 30px;
 }

assets/js/angelleye-admin.js

@@ -1,4 +1,8 @@
 jQuery(document).ready(function ($) {
+
+    jQuery('.display_smart_button_previews_button').html('<input type="button" name="angelleye_smart_button_preview_and_refresh" class="button-primary angelleye_smart_button_preview_and_refresh" value="Preview & Refresh Smart Button">');
+
+
     if (angelleye_admin.shop_based_us_or_uk=="no") {
         jQuery("#woocommerce_paypal_express_show_paypal_credit").attr("disabled",true);
         jQuery("label[for='woocommerce_paypal_express_show_paypal_credit']").css('color','#666');
@@ -280,4 +284,96 @@ jQuery(document).ready(function ($) {
                         jQuery('#angelleye_payment_submit_button').show();
                     }
                 });
+
+
+
+
+                jQuery('.in_context_checkout_part').change(function () {
+                display_angelleye_smart_button();
+            }).change();
+
+
+
+
+               jQuery(document).on('click', ".angelleye_smart_button_preview_and_refresh", function() {
+
+
+                    display_angelleye_smart_button();
+
+
+
+                });
+
+
+
+                function display_angelleye_smart_button() {
+
+
+                    jQuery(".display_smart_button_previews").html('');
+
+                    var angelleye_env = jQuery('#woocommerce_paypal_express_testmode').is(':checked') ? 'sandbox' : 'production';
+
+                    if(angelleye_env === 'sandbox') {
+                        var payer_id = jQuery('#woocommerce_paypal_express_sandbox_api_username').val();
+                    } else {
+                        var payer_id = jQuery('#woocommerce_paypal_express_api_username').val();
+                    }
+
+
+                    var angelleye_size = jQuery("#woocommerce_paypal_express_button_size").val();
+                    var angelleye_color = jQuery("#woocommerce_paypal_express_button_color").val();
+                    var angelleye_shape = jQuery("#woocommerce_paypal_express_button_shape").val();
+                    var angelleye_label = jQuery("#woocommerce_paypal_express_button_label").val();
+                    var angelleye_layout = jQuery("#woocommerce_paypal_express_button_layout").val();
+                    var angelleye_tagline = jQuery("#woocommerce_paypal_express_button_tagline").val();
+                    var angelleye_woocommerce_paypal_express_allowed_funding_methods = jQuery('#woocommerce_paypal_express_allowed_funding_methods').val();
+
+
+                    if(angelleye_layout === 'vertical') {
+                angelleye_label = '';
+                angelleye_tagline = '';
+                if( angelleye_size === 'small' ) {
+                    angelleye_size = 'medium';
+                }
+            }
+
+
+
+                     window.paypalCheckoutReady = function () {
+
+
+            paypal.Button.render({
+                env: angelleye_env,
+                style: {
+                    size: angelleye_size,
+                    color: angelleye_color,
+                    shape: angelleye_shape,
+                    label: angelleye_label,
+                    layout: angelleye_layout,
+                    tagline: angelleye_tagline
+                },
+                funding: {
+                    allowed: angelleye_woocommerce_paypal_express_allowed_funding_methods
+                },
+                client: {
+                    sandbox: payer_id,
+                    production: payer_id
+                },
+                payment: function () {
+
+                },
+                onAuthorize: function (data, actions) {
+
+                },
+                onCancel: function (data, actions) {
+
+                },
+                onError: function (err) {
+                    alert(err);
+                }
+            }, '.display_smart_button_previews' );
+
+        };
+                }
+
 });

classes/wc-gateway-paypal-express-angelleye.php

@@ -223,6 +223,11 @@ function display_notice_and_disable_marketing_solution() {
             }
         }).change();
 
+
+    jQuery('#woocommerce_paypal_express_allowed_funding_methods').closest('table').addClass('angelleye_smart_button_setting_left');
+
+
+
         jQuery("#woocommerce_paypal_express_enable_in_context_checkout_flow").change(function () {
            var in_context_checkout_part_tr =  jQuery(".in_context_checkout_part").closest('tr');
            var in_context_checkout_part = jQuery(".in_context_checkout_part");
@@ -829,7 +834,7 @@ public function init_form_fields() {
                 'title' => __('', 'paypal-for-woocommerce'),
                 'type' => 'title',
                 'class' => 'in_context_checkout_part',
-                'description' => '<div class="in_context_checkout_part">Customize your PayPal button with colors, sizes, shapes, layout and funding sources.</div>',
+                'description' => '<div class="in_context_checkout_part angelleye_button_settings_selector">Customize your PayPal button with colors, sizes, shapes, layout and funding sources.</div>',
             ),
             'allowed_funding_methods' => array(
                 'title' => __('Show the specified funding method', 'paypal-for-woocommerce'),
@@ -922,6 +927,13 @@ public function init_form_fields() {
                     'true' => __('Enable', 'paypal-for-woocommerce')
                 ),
             ),
+             'angelleye_smart_button_preview_title' => array(
+                'title' => __('', 'paypal-for-woocommerce'),
+                'type' => 'title',
+                'class' => '',
+                'description' => '<div><div class="display_smart_button_previews_button">Wow</div><div class="display_smart_button_previews">Wow</div></div>',
+            ),
+
          );
 
         if( $this->is_us == true ) {

paypal-for-woocommerce.php

@@ -282,6 +282,7 @@ public function admin_scripts()
             wp_enqueue_script( 'jquery');
             // Localize the script with new data
             wp_register_script( 'angelleye_admin', plugins_url( '/assets/js/angelleye-admin.js' , __FILE__ ), array( 'jquery' ));
+
             $translation_array = array(
                 'is_ssl' => AngellEYE_Gateway_Paypal::is_ssl()? "yes":"no",
                 'choose_image' => __('Choose Image', 'paypal-for-woocommerce'),
@@ -291,7 +292,9 @@ public function admin_scripts()
 
             );
             wp_localize_script( 'angelleye_admin', 'angelleye_admin', $translation_array );
+            wp_enqueue_script('angelleye-in-context-checkout-js-admin', 'https://www.paypalobjects.com/api/checkout.js', array(), null, true);
             wp_enqueue_script( 'angelleye_admin');
+
         }
 
         /**