Add redirect to payment methods page and handle error message

modules/ppcp-button/resources/js/modules/Helper/CardFieldsHelper.js

@@ -0,0 +1,50 @@
+export const cardFieldStyles = (field) => {
+    const allowedProperties = [
+        'appearance',
+        'color',
+        'direction',
+        'font',
+        'font-family',
+        'font-size',
+        'font-size-adjust',
+        'font-stretch',
+        'font-style',
+        'font-variant',
+        'font-variant-alternates',
+        'font-variant-caps',
+        'font-variant-east-asian',
+        'font-variant-ligatures',
+        'font-variant-numeric',
+        'font-weight',
+        'letter-spacing',
+        'line-height',
+        'opacity',
+        'outline',
+        'padding',
+        'padding-bottom',
+        'padding-left',
+        'padding-right',
+        'padding-top',
+        'text-shadow',
+        'transition',
+        '-moz-appearance',
+        '-moz-osx-font-smoothing',
+        '-moz-tap-highlight-color',
+        '-moz-transition',
+        '-webkit-appearance',
+        '-webkit-osx-font-smoothing',
+        '-webkit-tap-highlight-color',
+        '-webkit-transition',
+    ];
+
+    const stylesRaw = window.getComputedStyle(field);
+    const styles = {};
+    Object.values(stylesRaw).forEach((prop) => {
+        if (!stylesRaw[prop] || !allowedProperties.includes(prop)) {
+            return;
+        }
+        styles[prop] = '' + stylesRaw[prop];
+    });
+
+    return styles;
+}

modules/ppcp-button/resources/js/modules/Renderer/CardFieldsRenderer.js

@@ -1,4 +1,5 @@
 import {show} from "../Helper/Hiding";
+import {cardFieldStyles} from "../Helper/CardFieldsHelper";
 
 class CardFieldsRenderer {
 
@@ -53,28 +54,28 @@ class CardFieldsRenderer {
         if (cardField.isEligible()) {
             const nameField = document.getElementById('ppcp-credit-card-gateway-card-name');
             if (nameField) {
-                let styles = this.cardFieldStyles(nameField);
+                let styles = cardFieldStyles(nameField);
                 cardField.NameField({style: {'input': styles}}).render(nameField.parentNode);
                 nameField.remove();
             }
 
             const numberField = document.getElementById('ppcp-credit-card-gateway-card-number');
             if (numberField) {
-                let styles = this.cardFieldStyles(numberField);
+                let styles = cardFieldStyles(numberField);
                 cardField.NumberField({style: {'input': styles}}).render(numberField.parentNode);
                 numberField.remove();
             }
 
             const expiryField = document.getElementById('ppcp-credit-card-gateway-card-expiry');
             if (expiryField) {
-                let styles = this.cardFieldStyles(expiryField);
+                let styles = cardFieldStyles(expiryField);
                 cardField.ExpiryField({style: {'input': styles}}).render(expiryField.parentNode);
                 expiryField.remove();
             }
 
             const cvvField = document.getElementById('ppcp-credit-card-gateway-card-cvc');
             if (cvvField) {
-                let styles = this.cardFieldStyles(cvvField);
+                let styles = cardFieldStyles(cvvField);
                 cardField.CVVField({style: {'input': styles}}).render(cvvField.parentNode);
                 cvvField.remove();
             }
@@ -118,57 +119,6 @@ class CardFieldsRenderer {
         });
     }
 
-    cardFieldStyles(field) {
-        const allowedProperties = [
-            'appearance',
-            'color',
-            'direction',
-            'font',
-            'font-family',
-            'font-size',
-            'font-size-adjust',
-            'font-stretch',
-            'font-style',
-            'font-variant',
-            'font-variant-alternates',
-            'font-variant-caps',
-            'font-variant-east-asian',
-            'font-variant-ligatures',
-            'font-variant-numeric',
-            'font-weight',
-            'letter-spacing',
-            'line-height',
-            'opacity',
-            'outline',
-            'padding',
-            'padding-bottom',
-            'padding-left',
-            'padding-right',
-            'padding-top',
-            'text-shadow',
-            'transition',
-            '-moz-appearance',
-            '-moz-osx-font-smoothing',
-            '-moz-tap-highlight-color',
-            '-moz-transition',
-            '-webkit-appearance',
-            '-webkit-osx-font-smoothing',
-            '-webkit-tap-highlight-color',
-            '-webkit-transition',
-        ];
-
-        const stylesRaw = window.getComputedStyle(field);
-        const styles = {};
-        Object.values(stylesRaw).forEach((prop) => {
-            if (!stylesRaw[prop] || !allowedProperties.includes(prop)) {
-                return;
-            }
-            styles[prop] = '' + stylesRaw[prop];
-        });
-
-        return styles;
-    }
-
     disableFields() {}
     enableFields() {}
 }

modules/ppcp-save-payment-methods/resources/js/add-payment-method.js

@@ -11,6 +11,13 @@ import {
 import {
     loadPaypalJsScriptPromise
 } from "../../../ppcp-button/resources/js/modules/Helper/ScriptLoading";
+import ErrorHandler from "../../../ppcp-button/resources/js/modules/ErrorHandler";
+import {cardFieldStyles} from "../../../ppcp-button/resources/js/modules/Helper/CardFieldsHelper";
+
+const errorHandler = new ErrorHandler(
+    PayPalCommerceGateway.labels.error.generic,
+    document.querySelector('.woocommerce-notices-wrapper')
+);
 
 const init = () => {
     setVisibleByClass(ORDER_BUTTON_SELECTOR, getCurrentPaymentMethod() !== PaymentMethods.PAYPAL, 'ppcp-hidden');
@@ -23,6 +30,8 @@ const init = () => {
             dataUserIdToken: ppcp_add_payment_method.id_token
         })
             .then((paypal) => {
+                errorHandler.clear();
+
                 paypal.Buttons(
                     {
                         createVaultSetupToken: async () => {
@@ -38,10 +47,11 @@ const init = () => {
                             })
 
                             const result = await response.json()
-
                             if (result.data.id) {
                                 return result.data.id
                             }
+
+                            errorHandler.message(ppcp_add_payment_method.error_message);
                         },
                         onApprove: async ({vaultSetupToken}) => {
                             const response = await fetch(ppcp_add_payment_method.ajax.create_payment_token.endpoint, {
@@ -56,11 +66,16 @@ const init = () => {
                                 })
                             })
 
-                            const result = await response.json()
+                            const result = await response.json();
-                            console.log(result)
+                            if(result.success === true) {
+                                window.location.href = ppcp_add_payment_method.payment_methods_page;
+                            }
+
+                            errorHandler.message(ppcp_add_payment_method.error_message);
                         },
                         onError: (error) => {
                             console.error(error)
+                            errorHandler.message(ppcp_add_payment_method.error_message);
                         }
                     },
                 ).render(`#ppc-button-${PaymentMethods.PAYPAL}-save-payment-method`);
@@ -78,6 +93,8 @@ const init = () => {
             components: 'card-fields',
         }, true)
             .then((paypal) => {
+                errorHandler.clear();
+
                 const cardField = paypal.CardFields({
                     createVaultSetupToken: async () => {
                         const response = await fetch(ppcp_add_payment_method.ajax.create_setup_token.endpoint, {
@@ -96,6 +113,8 @@ const init = () => {
                         if (result.data.id) {
                             return result.data.id
                         }
+
+                        errorHandler.message(ppcp_add_payment_method.error_message);
                     },
                     onApprove: async ({vaultSetupToken}) => {
                         const response = await fetch(ppcp_add_payment_method.ajax.create_payment_token.endpoint, {
@@ -111,11 +130,16 @@ const init = () => {
                             })
                         })
 
-                        const result = await response.json()
+                        const result = await response.json();
-                        console.log(result)
+                        if(result.success === true) {
+                            window.location.href = ppcp_add_payment_method.payment_methods_page;
+                        }
+
+                        errorHandler.message(ppcp_add_payment_method.error_message);
                     },
                     onError: (error) => {
                         console.error(error)
+                        errorHandler.message(ppcp_add_payment_method.error_message);
                     }
                 });
 
@@ -164,57 +188,6 @@ const init = () => {
     }
 }
 
-const cardFieldStyles = (field) => {
-    const allowedProperties = [
-        'appearance',
-        'color',
-        'direction',
-        'font',
-        'font-family',
-        'font-size',
-        'font-size-adjust',
-        'font-stretch',
-        'font-style',
-        'font-variant',
-        'font-variant-alternates',
-        'font-variant-caps',
-        'font-variant-east-asian',
-        'font-variant-ligatures',
-        'font-variant-numeric',
-        'font-weight',
-        'letter-spacing',
-        'line-height',
-        'opacity',
-        'outline',
-        'padding',
-        'padding-bottom',
-        'padding-left',
-        'padding-right',
-        'padding-top',
-        'text-shadow',
-        'transition',
-        '-moz-appearance',
-        '-moz-osx-font-smoothing',
-        '-moz-tap-highlight-color',
-        '-moz-transition',
-        '-webkit-appearance',
-        '-webkit-osx-font-smoothing',
-        '-webkit-tap-highlight-color',
-        '-webkit-transition',
-    ];
-
-    const stylesRaw = window.getComputedStyle(field);
-    const styles = {};
-    Object.values(stylesRaw).forEach((prop) => {
-        if (!stylesRaw[prop] || !allowedProperties.includes(prop)) {
-            return;
-        }
-        styles[prop] = '' + stylesRaw[prop];
-    });
-
-    return styles;
-}
-
 document.addEventListener(
     'DOMContentLoaded',
     () => {

modules/ppcp-save-payment-methods/src/SavePaymentMethodsModule.php

@@ -225,6 +225,8 @@ class SavePaymentMethodsModule implements ModuleInterface {
 							'client_id'   => $c->get( 'button.client_id' ),
 							'merchant_id' => $c->get( 'api.merchant_id' ),
 							'id_token'    => $id_token,
+							'payment_methods_page' => wc_get_account_endpoint_url('payment-methods'),
+							'error_message' => __( 'Could not save payment method.', 'woocommerce-paypal-payments' ),
 							'ajax'        => array(
 								'create_setup_token'   => array(
 									'endpoint' => \WC_AJAX::get_endpoint( CreateSetupToken::ENDPOINT ),