From 37fddc3b68d46b7dec980afc0faed9142fad17b4 Mon Sep 17 00:00:00 2001 From: retrofox Date: Thu, 20 Jul 2017 12:13:29 -0300 Subject: [PATCH 01/14] simple-payments: print message when the transaction ends. --- .../paypal-express-checkout.js | 75 +++++++++++++++++-- 1 file changed, 67 insertions(+), 8 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index 9105321f47343..4f4f5f3625dc6 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -4,6 +4,44 @@ * of simple-payments module. */ +/** + * Get the DOM element-placeholder used to show message + * about the transaction. If it doesn't exist then the function will create a new one. + * + * @param string buttonDomId id of the payment button placeholder + * @return Element the dom element to print the message + */ +var getButtonMessageElement = function ( buttonDomId ) { + var messageDomId = buttonDomId + '_message'; + + var domButtonElement = document.getElementById( buttonDomId ); + var domMessageElement = document.getElementById( messageDomId ); + + if ( domMessageElement ) { + return domMessageElement; + } + + // create dom message element + domMessageElement = document.createElement( 'div' ); + domMessageElement.setAttribute( 'class', 'jetpack-simple-payments-message-placeholder' ); + domMessageElement.setAttribute( 'id', messageDomId ); + domMessageElement.style.display = 'none'; + + // inject into the DOM Tree + domButtonElement.appendChild( domMessageElement ); + + return domMessageElement; +} + +var showMessage = function( message, el ) { + // show message 500ms after Paypal popup is closed + setTimeout( function() { + el.style.display = 'block'; + el.style.color = '#06F'; + el.innerHTML = message; + }, 1000 ); +} + /* global paypal */ /* exported PaypalExpressCheckout */ /* jshint unused:false */ @@ -37,6 +75,10 @@ var PaypalExpressCheckout = { if ( ! paypal ) { throw new Error( 'PayPal module is required by PaypalExpressCheckout' ); } + + // message DOM element instance + var paypalMessagePlaceholder; + paypal.Button.render( { env: env, commit: true, @@ -44,26 +86,43 @@ var PaypalExpressCheckout = { label: 'pay', color: 'blue' }, - payment: function() { + payment: function( paymentData ) { + paypalMessagePlaceholder = getButtonMessageElement( domId + '_button' ); + var payload = { number: PaypalExpressCheckout.getNumberOfItems( domId + '_number', enableMultiple ), buttonId: buttonId, env: env }; - return paypal.request.post( PaypalExpressCheckout.getCreatePaymentEndpoint( blogId ), payload ).then( function( data ) { - return data.id; + + return paypal.request.post( PaypalExpressCheckout.getCreatePaymentEndpoint( blogId ), payload ) + .then( function( paymentResponse ) { + return paymentResponse.id; + } ) + .catch( function( paymentError ) { + showMessage( paymentError, paypalMessagePlaceholder ); } ); }, - onAuthorize: function( data ) { - return paypal.request.post( PaypalExpressCheckout.getExecutePaymentEndpoint( blogId, data.paymentID ), { + onAuthorize: function( onAuthData ) { + return paypal.request.post( PaypalExpressCheckout.getExecutePaymentEndpoint( blogId, onAuthData.paymentID ), { buttonId: buttonId, - payerId: data.payerID, + payerId: onAuthData.payerID, env: env - } ).then( function() { + } ) + .then( function( authResponse ) { + var payerInfo = authResponse.payer.payer_info; + var message = 'Thanks ' + payerInfo.first_name + '! ' + + 'The purchase has been successful.
' + + 'For more details, an email has been sent to the ' + payerInfo.email + '.'; + + showMessage( message, paypalMessagePlaceholder ); + // TODO: handle success, errors, messaging, etc, etc. /* jshint ignore:start */ - alert( 'success!' ); /* jshint ignore:end */ + } ) + .catch( function( authError ) { + // console.log( 'authError: %o', authError ); } ); } From b23344327fb60491cb886f433ff1aa6f65fab82d Mon Sep 17 00:00:00 2001 From: retrofox Date: Thu, 20 Jul 2017 15:22:30 -0300 Subject: [PATCH 02/14] simple-payments: clean message placeholder --- modules/simple-payments/paypal-express-checkout.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index 4f4f5f3625dc6..bb9ca1f185741 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -11,7 +11,7 @@ * @param string buttonDomId id of the payment button placeholder * @return Element the dom element to print the message */ -var getButtonMessageElement = function ( buttonDomId ) { +var getButtonMessageElement = function( buttonDomId ) { var messageDomId = buttonDomId + '_message'; var domButtonElement = document.getElementById( buttonDomId ); @@ -33,6 +33,11 @@ var getButtonMessageElement = function ( buttonDomId ) { return domMessageElement; } +var cleanAndHideMessage = function( el ) { + el.style.display = 'none'; + el.innerHTML = ''; +}; + var showMessage = function( message, el ) { // show message 500ms after Paypal popup is closed setTimeout( function() { @@ -88,6 +93,7 @@ var PaypalExpressCheckout = { }, payment: function( paymentData ) { paypalMessagePlaceholder = getButtonMessageElement( domId + '_button' ); + cleanAndHideMessage( paypalMessagePlaceholder ); var payload = { number: PaypalExpressCheckout.getNumberOfItems( domId + '_number', enableMultiple ), @@ -104,6 +110,8 @@ var PaypalExpressCheckout = { } ); }, onAuthorize: function( onAuthData ) { + cleanAndHideMessage( paypalMessagePlaceholder ); + return paypal.request.post( PaypalExpressCheckout.getExecutePaymentEndpoint( blogId, onAuthData.paymentID ), { buttonId: buttonId, payerId: onAuthData.payerID, From 26e96ea77eb6c79c2e39d6509808170821fb5869 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Fri, 21 Jul 2017 18:57:10 +0200 Subject: [PATCH 03/14] Put the purchase message into HTML, hidden by default --- modules/simple-payments/simple-payments.css | 14 ++++++++++++++ modules/simple-payments/simple-payments.php | 16 +++++++++++----- 2 files changed, 25 insertions(+), 5 deletions(-) create mode 100644 modules/simple-payments/simple-payments.css diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css new file mode 100644 index 0000000000000..ac9edcff23dfd --- /dev/null +++ b/modules/simple-payments/simple-payments.css @@ -0,0 +1,14 @@ +.jetpack-simple-payments__purchase-message { + display: none; + color: #fff; + padding: 1em; + + margin: 20px 0; +} +.jetpack-simple-payments__purchase-message.success { + background-color: #4ab866; +} + +.jetpack-simple-payments__purchase-message.error { + background-color: #d94f4f; +} diff --git a/modules/simple-payments/simple-payments.php b/modules/simple-payments/simple-payments.php index 88e84ec45dc8a..387d671741997 100644 --- a/modules/simple-payments/simple-payments.php +++ b/modules/simple-payments/simple-payments.php @@ -30,6 +30,7 @@ private function register_scripts() { */ wp_register_script( 'paypal-checkout-js', 'https://www.paypalobjects.com/api/checkout.js' ); wp_register_script( 'paypal-express-checkout', plugins_url( '/paypal-express-checkout.js', __FILE__ ) , array( 'paypal-checkout-js' ), '0.21' ); + wp_enqueue_style( 'simple-payments', plugins_url( '/simple-payments.css', __FILE__ ) ); } private function register_init_hook() { add_action( 'init', array( $this, 'init_hook_action' ) ); @@ -91,12 +92,17 @@ function output_shortcode( $data ) { "; } $output = " -
-
{$data['title']}
-
{$data['description']}
-
{$data['price']}
+
+
+ Thank you for your purchase! +
+ More info and exact copies TBD. +
+
{$data['title']}
+
{$data['description']}
+
{$data['price']}
{$items} -
+
"; return $output; From 448d28fb721f9a08ed1b9f559bc314cf9793ae71 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Fri, 21 Jul 2017 19:17:01 +0200 Subject: [PATCH 04/14] Toggle purchase messages with either success/error and message --- .../paypal-express-checkout.js | 78 +++++++------------ modules/simple-payments/simple-payments.css | 6 +- modules/simple-payments/simple-payments.php | 7 +- 3 files changed, 34 insertions(+), 57 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index bb9ca1f185741..f25f26e58938a 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -4,54 +4,12 @@ * of simple-payments module. */ -/** - * Get the DOM element-placeholder used to show message - * about the transaction. If it doesn't exist then the function will create a new one. - * - * @param string buttonDomId id of the payment button placeholder - * @return Element the dom element to print the message - */ -var getButtonMessageElement = function( buttonDomId ) { - var messageDomId = buttonDomId + '_message'; - - var domButtonElement = document.getElementById( buttonDomId ); - var domMessageElement = document.getElementById( messageDomId ); - - if ( domMessageElement ) { - return domMessageElement; - } - - // create dom message element - domMessageElement = document.createElement( 'div' ); - domMessageElement.setAttribute( 'class', 'jetpack-simple-payments-message-placeholder' ); - domMessageElement.setAttribute( 'id', messageDomId ); - domMessageElement.style.display = 'none'; - - // inject into the DOM Tree - domButtonElement.appendChild( domMessageElement ); - - return domMessageElement; -} - -var cleanAndHideMessage = function( el ) { - el.style.display = 'none'; - el.innerHTML = ''; -}; - -var showMessage = function( message, el ) { - // show message 500ms after Paypal popup is closed - setTimeout( function() { - el.style.display = 'block'; - el.style.color = '#06F'; - el.innerHTML = message; - }, 1000 ); -} - /* global paypal */ /* exported PaypalExpressCheckout */ /* jshint unused:false */ var PaypalExpressCheckout = { sandbox: true, + $purchaseMessageContainer: null, getCreatePaymentEndpoint: function( blogId ) { return 'https://public-api.wordpress.com/wpcom/v2/sites/' + blogId + '/simple-payments/paypal/payment'; }, @@ -75,6 +33,22 @@ var PaypalExpressCheckout = { } return number; }, + togglePurcahseMessage: function( message, successOrError ) { + if ( ! this.$purchaseMessageContainer ) { + this.$purchaseMessageContainer = jQuery( '.jetpack-simple-payments__purchase-message' ); + } + + if ( this.$purchaseMessageContainer.hasClass( 'show' ) ) { + this.$purchaseMessageContainer + .removeClass( 'show' ) + .text( '' ) + .removeClass( 'success error' ); + } else { + this.$purchaseMessageContainer + .text( message ) + .addClass( 'show ' + successOrError ); + } + }, renderButton: function( blogId, buttonId, domId, enableMultiple ) { var env = PaypalExpressCheckout.sandbox ? 'sandbox' : 'production'; if ( ! paypal ) { @@ -92,8 +66,7 @@ var PaypalExpressCheckout = { color: 'blue' }, payment: function( paymentData ) { - paypalMessagePlaceholder = getButtonMessageElement( domId + '_button' ); - cleanAndHideMessage( paypalMessagePlaceholder ); + PaypalExpressCheckout.togglePurcahseMessage(); var payload = { number: PaypalExpressCheckout.getNumberOfItems( domId + '_number', enableMultiple ), @@ -106,11 +79,11 @@ var PaypalExpressCheckout = { return paymentResponse.id; } ) .catch( function( paymentError ) { - showMessage( paymentError, paypalMessagePlaceholder ); + PaypalExpressCheckout.togglePurcahseMessage( paymentError, 'error' ); } ); }, onAuthorize: function( onAuthData ) { - cleanAndHideMessage( paypalMessagePlaceholder ); + PaypalExpressCheckout.togglePurcahseMessage(); return paypal.request.post( PaypalExpressCheckout.getExecutePaymentEndpoint( blogId, onAuthData.paymentID ), { buttonId: buttonId, @@ -119,17 +92,20 @@ var PaypalExpressCheckout = { } ) .then( function( authResponse ) { var payerInfo = authResponse.payer.payer_info; - var message = 'Thanks ' + payerInfo.first_name + '! ' + - 'The purchase has been successful.
' + - 'For more details, an email has been sent to the ' + payerInfo.email + '.'; + var message = + 'Thank you for your purchase, ' + payerInfo.first_name + '!' + + '
' + + 'The purchase has been successful.
' + + 'For more details, an email has been sent to your email address ' + payerInfo.email + '.'; - showMessage( message, paypalMessagePlaceholder ); + PaypalExpressCheckout.togglePurcahseMessage( message, 'success' ); // TODO: handle success, errors, messaging, etc, etc. /* jshint ignore:start */ /* jshint ignore:end */ } ) .catch( function( authError ) { + PaypalExpressCheckout.togglePurcahseMessage( 'Error!', 'error' ); // console.log( 'authError: %o', authError ); } ); } diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css index ac9edcff23dfd..2c21edd77da01 100644 --- a/modules/simple-payments/simple-payments.css +++ b/modules/simple-payments/simple-payments.css @@ -2,9 +2,13 @@ display: none; color: #fff; padding: 1em; - margin: 20px 0; } + +.jetpack-simple-payments__purchase-message.show { + display: block; +} + .jetpack-simple-payments__purchase-message.success { background-color: #4ab866; } diff --git a/modules/simple-payments/simple-payments.php b/modules/simple-payments/simple-payments.php index 387d671741997..1a7cea589ee38 100644 --- a/modules/simple-payments/simple-payments.php +++ b/modules/simple-payments/simple-payments.php @@ -29,7 +29,7 @@ private function register_scripts() { * @see https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/add-paypal-button/ */ wp_register_script( 'paypal-checkout-js', 'https://www.paypalobjects.com/api/checkout.js' ); - wp_register_script( 'paypal-express-checkout', plugins_url( '/paypal-express-checkout.js', __FILE__ ) , array( 'paypal-checkout-js' ), '0.21' ); + wp_register_script( 'paypal-express-checkout', plugins_url( '/paypal-express-checkout.js', __FILE__ ) , array( 'jquery', 'paypal-checkout-js' ), '0.21' ); wp_enqueue_style( 'simple-payments', plugins_url( '/simple-payments.css', __FILE__ ) ); } private function register_init_hook() { @@ -93,10 +93,7 @@ function output_shortcode( $data ) { } $output = "
-
- Thank you for your purchase! -
- More info and exact copies TBD. +
{$data['title']}
{$data['description']}
From cbdb5fe23b9fcb9df4d7f6e05fe0affe4b1707db Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Fri, 21 Jul 2017 19:18:38 +0200 Subject: [PATCH 05/14] Use p tag instead of div with margin Props @iamtakashi for the suggestion. --- modules/simple-payments/simple-payments.css | 1 - modules/simple-payments/simple-payments.php | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css index 2c21edd77da01..4b9da564bbe60 100644 --- a/modules/simple-payments/simple-payments.css +++ b/modules/simple-payments/simple-payments.css @@ -2,7 +2,6 @@ display: none; color: #fff; padding: 1em; - margin: 20px 0; } .jetpack-simple-payments__purchase-message.show { diff --git a/modules/simple-payments/simple-payments.php b/modules/simple-payments/simple-payments.php index 1a7cea589ee38..0091b34f63a06 100644 --- a/modules/simple-payments/simple-payments.php +++ b/modules/simple-payments/simple-payments.php @@ -93,8 +93,8 @@ function output_shortcode( $data ) { } $output = "
-
-
+

+

{$data['title']}
{$data['description']}
{$data['price']}
From 2246be70bc5c1febc4c40f8e0b629983735e3480 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Fri, 21 Jul 2017 19:21:25 +0200 Subject: [PATCH 06/14] Remove unneeded code --- modules/simple-payments/paypal-express-checkout.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index f25f26e58938a..faf95748d1017 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -55,9 +55,6 @@ var PaypalExpressCheckout = { throw new Error( 'PayPal module is required by PaypalExpressCheckout' ); } - // message DOM element instance - var paypalMessagePlaceholder; - paypal.Button.render( { env: env, commit: true, From 93edd0b487c6a8ef9a5146ed4c98d55e1e45c113 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Fri, 21 Jul 2017 19:29:49 +0200 Subject: [PATCH 07/14] Fix typo --- modules/simple-payments/paypal-express-checkout.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index faf95748d1017..1ef9ab7ea63ac 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -33,7 +33,7 @@ var PaypalExpressCheckout = { } return number; }, - togglePurcahseMessage: function( message, successOrError ) { + togglePurchaseMessage: function( message, successOrError ) { if ( ! this.$purchaseMessageContainer ) { this.$purchaseMessageContainer = jQuery( '.jetpack-simple-payments__purchase-message' ); } @@ -63,7 +63,7 @@ var PaypalExpressCheckout = { color: 'blue' }, payment: function( paymentData ) { - PaypalExpressCheckout.togglePurcahseMessage(); + PaypalExpressCheckout.togglePurchaseMessage(); var payload = { number: PaypalExpressCheckout.getNumberOfItems( domId + '_number', enableMultiple ), @@ -76,11 +76,11 @@ var PaypalExpressCheckout = { return paymentResponse.id; } ) .catch( function( paymentError ) { - PaypalExpressCheckout.togglePurcahseMessage( paymentError, 'error' ); + PaypalExpressCheckout.togglePurchaseMessage( paymentError, 'error' ); } ); }, onAuthorize: function( onAuthData ) { - PaypalExpressCheckout.togglePurcahseMessage(); + PaypalExpressCheckout.togglePurchaseMessage(); return paypal.request.post( PaypalExpressCheckout.getExecutePaymentEndpoint( blogId, onAuthData.paymentID ), { buttonId: buttonId, @@ -95,14 +95,14 @@ var PaypalExpressCheckout = { 'The purchase has been successful.
' + 'For more details, an email has been sent to your email address ' + payerInfo.email + '.'; - PaypalExpressCheckout.togglePurcahseMessage( message, 'success' ); + PaypalExpressCheckout.togglePurchaseMessage( message, 'success' ); // TODO: handle success, errors, messaging, etc, etc. /* jshint ignore:start */ /* jshint ignore:end */ } ) .catch( function( authError ) { - PaypalExpressCheckout.togglePurcahseMessage( 'Error!', 'error' ); + PaypalExpressCheckout.togglePurchaseMessage( 'Error!', 'error' ); // console.log( 'authError: %o', authError ); } ); } From ee85be41b6c3388d794c5a3ae75de2dc5ad329c2 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Fri, 21 Jul 2017 19:32:53 +0200 Subject: [PATCH 08/14] Fix paypal checkout.js script error --- modules/simple-payments/simple-payments.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/simple-payments/simple-payments.php b/modules/simple-payments/simple-payments.php index 0091b34f63a06..c921701e34602 100644 --- a/modules/simple-payments/simple-payments.php +++ b/modules/simple-payments/simple-payments.php @@ -28,7 +28,7 @@ private function register_scripts() { * Paypal heavily discourages putting that script in your own server: * @see https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/add-paypal-button/ */ - wp_register_script( 'paypal-checkout-js', 'https://www.paypalobjects.com/api/checkout.js' ); + wp_register_script( 'paypal-checkout-js', 'https://www.paypalobjects.com/api/checkout.js', array(), null, true ); wp_register_script( 'paypal-express-checkout', plugins_url( '/paypal-express-checkout.js', __FILE__ ) , array( 'jquery', 'paypal-checkout-js' ), '0.21' ); wp_enqueue_style( 'simple-payments', plugins_url( '/simple-payments.css', __FILE__ ) ); } From 3dfa135a8a42582a0a5234898895f17c0f520a46 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Fri, 21 Jul 2017 19:35:23 +0200 Subject: [PATCH 09/14] Use .html instead of text to append html content --- modules/simple-payments/paypal-express-checkout.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index 1ef9ab7ea63ac..bb661eccbe654 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -41,11 +41,11 @@ var PaypalExpressCheckout = { if ( this.$purchaseMessageContainer.hasClass( 'show' ) ) { this.$purchaseMessageContainer .removeClass( 'show' ) - .text( '' ) + .html( '' ) .removeClass( 'success error' ); } else { this.$purchaseMessageContainer - .text( message ) + .html( message ) .addClass( 'show ' + successOrError ); } }, From 3fa3603eda627546ff5c0298d74db901f116f29f Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Fri, 21 Jul 2017 19:35:56 +0200 Subject: [PATCH 10/14] Removing one error message: there's no error to show, uneeded --- modules/simple-payments/paypal-express-checkout.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index bb661eccbe654..71b04305e8858 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -74,9 +74,6 @@ var PaypalExpressCheckout = { return paypal.request.post( PaypalExpressCheckout.getCreatePaymentEndpoint( blogId ), payload ) .then( function( paymentResponse ) { return paymentResponse.id; - } ) - .catch( function( paymentError ) { - PaypalExpressCheckout.togglePurchaseMessage( paymentError, 'error' ); } ); }, onAuthorize: function( onAuthData ) { From 04a0822105593fa78e25490b09f1171cbb0e73da Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Fri, 21 Jul 2017 19:53:10 +0200 Subject: [PATCH 11/14] Fix toggle logic of the purchase message --- .../paypal-express-checkout.js | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index 71b04305e8858..b2f6d07a2e80c 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -34,19 +34,22 @@ var PaypalExpressCheckout = { return number; }, togglePurchaseMessage: function( message, successOrError ) { - if ( ! this.$purchaseMessageContainer ) { - this.$purchaseMessageContainer = jQuery( '.jetpack-simple-payments__purchase-message' ); + if ( ! PaypalExpressCheckout.$purchaseMessageContainer ) { + PaypalExpressCheckout.$purchaseMessageContainer = jQuery( '.jetpack-simple-payments__purchase-message' ); } - if ( this.$purchaseMessageContainer.hasClass( 'show' ) ) { - this.$purchaseMessageContainer - .removeClass( 'show' ) + if ( PaypalExpressCheckout.$purchaseMessageContainer.hasClass( 'show' ) ) { + PaypalExpressCheckout.$purchaseMessageContainer + .removeClass( 'show success error' ) .html( '' ) - .removeClass( 'success error' ); } else { - this.$purchaseMessageContainer + PaypalExpressCheckout.$purchaseMessageContainer .html( message ) - .addClass( 'show ' + successOrError ); + .addClass( 'show' ); + + if ( typeof successOrError !== 'undefined' ) { + PaypalExpressCheckout.$purchaseMessageContainer.addClass( successOrError ); + } } }, renderButton: function( blogId, buttonId, domId, enableMultiple ) { @@ -63,7 +66,12 @@ var PaypalExpressCheckout = { color: 'blue' }, payment: function( paymentData ) { - PaypalExpressCheckout.togglePurchaseMessage(); + if ( + PaypalExpressCheckout.$purchaseMessageContainer && + PaypalExpressCheckout.$purchaseMessageContainer.hasClass( 'show' ) + ) { + PaypalExpressCheckout.togglePurchaseMessage(); + } var payload = { number: PaypalExpressCheckout.getNumberOfItems( domId + '_number', enableMultiple ), @@ -77,7 +85,6 @@ var PaypalExpressCheckout = { } ); }, onAuthorize: function( onAuthData ) { - PaypalExpressCheckout.togglePurchaseMessage(); return paypal.request.post( PaypalExpressCheckout.getExecutePaymentEndpoint( blogId, onAuthData.paymentID ), { buttonId: buttonId, From fb414669c8f1f5ee42cd342e3b42fe13c73a6eed Mon Sep 17 00:00:00 2001 From: retrofox Date: Fri, 21 Jul 2017 18:51:22 -0300 Subject: [PATCH 12/14] simple-payments: improve showing transaction messages --- .../paypal-express-checkout.js | 114 ++++++++++++------ modules/simple-payments/simple-payments.css | 14 ++- 2 files changed, 87 insertions(+), 41 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index b2f6d07a2e80c..e71386c3b0b3a 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -33,31 +33,76 @@ var PaypalExpressCheckout = { } return number; }, - togglePurchaseMessage: function( message, successOrError ) { - if ( ! PaypalExpressCheckout.$purchaseMessageContainer ) { - PaypalExpressCheckout.$purchaseMessageContainer = jQuery( '.jetpack-simple-payments__purchase-message' ); - } - if ( PaypalExpressCheckout.$purchaseMessageContainer.hasClass( 'show' ) ) { - PaypalExpressCheckout.$purchaseMessageContainer - .removeClass( 'show success error' ) - .html( '' ) - } else { - PaypalExpressCheckout.$purchaseMessageContainer - .html( message ) - .addClass( 'show' ); - - if ( typeof successOrError !== 'undefined' ) { - PaypalExpressCheckout.$purchaseMessageContainer.addClass( successOrError ); - } + /** + * Get the DOM element-placeholder used to show message + * about the transaction. If it doesn't exist then the function will create a new one. + * + * @param string buttonDomId id of the payment button placeholder + * @return Element the dom element to print the message + */ + getMessageElement: function ( buttonDomId ) { + var messageDomId = buttonDomId + '_message'; + + // DOM Elements + var buttonDomElement = document.getElementById( buttonDomId ); + var messageDomElement = document.getElementById( messageDomId ); + + if ( messageDomElement ) { + return messageDomElement; } + + // create dom message element + messageDomElement = document.createElement( 'div' ); + messageDomElement.setAttribute( 'id', messageDomId ); + + // inject into the DOM Tree + buttonDomElement.appendChild( messageDomElement ); + + return messageDomElement; + }, + + /** + * Show a messange close to the Paypal button. + * Use this function to give feedback to the user according + * to the transaction result. + * + * @param {String} message message to show + * @param {String} domId paypal-button element dom identifier + * @param {Boolean} [error] defines if it's a message error. Not TRUE as default. + */ + showMessage: function( message, buttonDomId, isError ) { + var domEl = PaypalExpressCheckout.getMessageElement( buttonDomId ); + + // set css classes + var cssClasses = 'jetpack-simple-payments__purchase-message show '; + cssClasses += isError ? 'error' : 'success'; + + // show message 1s after Paypal popup is closed + setTimeout( function() { + domEl.innerHTML = message; + domEl.setAttribute( 'class', cssClasses ); + }, 1000 ); }, + + showError: function( message, buttonDomId ) { + PaypalExpressCheckout.showMessage( message, buttonDomId, true ); + }, + + cleanAndHideMessage: function( buttonDomId ) { + var domEl = PaypalExpressCheckout.getMessageElement( buttonDomId ); + domEl.setAttribute( 'class', 'jetpack-simple-payments__purchase-message' ); + domEl.innerHTML = ''; + }, + renderButton: function( blogId, buttonId, domId, enableMultiple ) { var env = PaypalExpressCheckout.sandbox ? 'sandbox' : 'production'; if ( ! paypal ) { throw new Error( 'PayPal module is required by PaypalExpressCheckout' ); } + var buttonDomId = domId+ '_button'; + paypal.Button.render( { env: env, commit: true, @@ -66,12 +111,7 @@ var PaypalExpressCheckout = { color: 'blue' }, payment: function( paymentData ) { - if ( - PaypalExpressCheckout.$purchaseMessageContainer && - PaypalExpressCheckout.$purchaseMessageContainer.hasClass( 'show' ) - ) { - PaypalExpressCheckout.togglePurchaseMessage(); - } + PaypalExpressCheckout.cleanAndHideMessage( buttonDomId ); var payload = { number: PaypalExpressCheckout.getNumberOfItems( domId + '_number', enableMultiple ), @@ -79,13 +119,18 @@ var PaypalExpressCheckout = { env: env }; - return paypal.request.post( PaypalExpressCheckout.getCreatePaymentEndpoint( blogId ), payload ) - .then( function( paymentResponse ) { - return paymentResponse.id; - } ); + return paypal + .request + .post( PaypalExpressCheckout.getCreatePaymentEndpoint( blogId ), payload ) + .then( function( paymentResponse ) { + return paymentResponse.id; + } ) + .catch( function( paymentError) { + PaypalExpressCheckout.showError( 'Item temporarily unavailable', buttonDomId ); + } ); }, - onAuthorize: function( onAuthData ) { + onAuthorize: function( onAuthData ) { return paypal.request.post( PaypalExpressCheckout.getExecutePaymentEndpoint( blogId, onAuthData.paymentID ), { buttonId: buttonId, payerId: onAuthData.payerID, @@ -93,24 +138,21 @@ var PaypalExpressCheckout = { } ) .then( function( authResponse ) { var payerInfo = authResponse.payer.payer_info; + var message = 'Thank you for your purchase, ' + payerInfo.first_name + '!' + '
' + 'The purchase has been successful.
' + - 'For more details, an email has been sent to your email address ' + payerInfo.email + '.'; - - PaypalExpressCheckout.togglePurchaseMessage( message, 'success' ); + 'For more details, an email has been sent to your email address ' + + '' + payerInfo.email + '.'; - // TODO: handle success, errors, messaging, etc, etc. - /* jshint ignore:start */ - /* jshint ignore:end */ + PaypalExpressCheckout.showMessage( message, buttonDomId ); } ) .catch( function( authError ) { - PaypalExpressCheckout.togglePurchaseMessage( 'Error!', 'error' ); - // console.log( 'authError: %o', authError ); + PaypalExpressCheckout.showError( 'Item temporarily unavailable', buttonDomId ); } ); } - }, domId + '_button' ); + }, buttonDomId ); } }; diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css index 4b9da564bbe60..dca203ced8ef8 100644 --- a/modules/simple-payments/simple-payments.css +++ b/modules/simple-payments/simple-payments.css @@ -1,17 +1,21 @@ -.jetpack-simple-payments__purchase-message { +body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message { display: none; +} + +body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message, +body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message a { color: #fff; padding: 1em; } -.jetpack-simple-payments__purchase-message.show { +body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.show { display: block; } -.jetpack-simple-payments__purchase-message.success { +body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.success { background-color: #4ab866; } -.jetpack-simple-payments__purchase-message.error { +body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.error { background-color: #d94f4f; -} +} \ No newline at end of file From 4966db8df77f356b6a92d2d8e31091ad1b3d79db Mon Sep 17 00:00:00 2001 From: Jason Johnston Date: Fri, 21 Jul 2017 21:37:59 -0700 Subject: [PATCH 13/14] fix linting issue --- modules/simple-payments/paypal-express-checkout.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index e71386c3b0b3a..b434009aee46a 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -6,7 +6,7 @@ /* global paypal */ /* exported PaypalExpressCheckout */ -/* jshint unused:false */ +/* jshint unused:false, es3:false, esversion:5 */ var PaypalExpressCheckout = { sandbox: true, $purchaseMessageContainer: null, @@ -37,7 +37,7 @@ var PaypalExpressCheckout = { /** * Get the DOM element-placeholder used to show message * about the transaction. If it doesn't exist then the function will create a new one. - * + * * @param string buttonDomId id of the payment button placeholder * @return Element the dom element to print the message */ @@ -66,7 +66,7 @@ var PaypalExpressCheckout = { * Show a messange close to the Paypal button. * Use this function to give feedback to the user according * to the transaction result. - * + * * @param {String} message message to show * @param {String} domId paypal-button element dom identifier * @param {Boolean} [error] defines if it's a message error. Not TRUE as default. From d839c7ab5efad1d3f5699366eba86cb3e022c79e Mon Sep 17 00:00:00 2001 From: Jason Johnston Date: Fri, 21 Jul 2017 21:59:08 -0700 Subject: [PATCH 14/14] update success copy --- modules/simple-payments/paypal-express-checkout.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js index b434009aee46a..bb123b47f465c 100644 --- a/modules/simple-payments/paypal-express-checkout.js +++ b/modules/simple-payments/paypal-express-checkout.js @@ -140,11 +140,11 @@ var PaypalExpressCheckout = { var payerInfo = authResponse.payer.payer_info; var message = - 'Thank you for your purchase, ' + payerInfo.first_name + '!' + + 'Thank you, ' + payerInfo.first_name + '!' + '
' + - 'The purchase has been successful.
' + - 'For more details, an email has been sent to your email address ' + - '' + payerInfo.email + '.'; + 'Your purchase was successful.
' + + 'We just sent you a confirmation email to ' + + '' + payerInfo.email + '.'; PaypalExpressCheckout.showMessage( message, buttonDomId ); } )