From e6509da50a2132c3aef7d552a6d62da0e9c0a275 Mon Sep 17 00:00:00 2001
From: artpi <artur.piszek@gmail.com>
Date: Fri, 21 Jul 2017 18:20:36 +0200
Subject: [PATCH 01/13] simple-payments: implement styles to the block

---
 modules/simple-payments/simple-payments.css | 50 +++++++++++++++++----
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css
index dca203ced8ef8..96f26713d5913 100644
--- a/modules/simple-payments/simple-payments.css
+++ b/modules/simple-payments/simple-payments.css
@@ -1,21 +1,55 @@
-body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message {
+
+.jetpack-simple-payments-wrapper {
+	margin: 0.5em 0;
+}
+
+.jetpack-simple-payments-title {
+	font-weight: bold;
+	display: block;
+	margin-bottom: 0.3em;
+}
+
+.jetpack-simple-payments-payment-row {
+	margin-top: 0.3em;
+}
+
+.jetpack-simple-payments-price {
+	font-weight: bold;
+	display: inline-block;
+	margin-right: 15px;
+}
+
+.jetpack-simple-payments-items {
+	display:inline-block;
+	margin-right: 15px;
+}
+
+.jetpack-simple-payments-items input {
+	width: 30px;
+}
+
+.jetpack-simple-payments-button{
+	display:inline-block;
+}
+
+.jetpack-simple-payments__purchase-message {
 	display: none;
+	padding: 1em;
 }
 
-body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message,
-body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message a {
+/* stronger rule in order to set the text color */
+body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message
 	color: #fff;
-	padding: 1em;
 }
 
-body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.show {
+.jetpack-simple-payments__purchase-message.show {
 	display: block;
 }
 
-body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.success {
+.jetpack-simple-payments__purchase-message.success {
 	background-color: #4ab866;
 }
 
-body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.error {
+.jetpack-simple-payments__purchase-message.error {
 	background-color: #d94f4f;
-}
\ No newline at end of file
+}

From 7e8d9abc37f709434036f2472f1a418d98e976fe Mon Sep 17 00:00:00 2001
From: artpi <artur.piszek@gmail.com>
Date: Fri, 21 Jul 2017 18:24:27 +0200
Subject: [PATCH 02/13] some change

---
 modules/simple-payments/simple-payments.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css
index 96f26713d5913..ae42b65117c24 100644
--- a/modules/simple-payments/simple-payments.css
+++ b/modules/simple-payments/simple-payments.css
@@ -29,7 +29,8 @@
 }
 
 .jetpack-simple-payments-button{
-	display:inline-block;
+	display:block;
+	float:right;
 }
 
 .jetpack-simple-payments__purchase-message {

From 10d8026ebae852d2cdb056fba204136f26d4ad30 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Sat, 22 Jul 2017 10:44:58 -0300
Subject: [PATCH 03/13] simple-payments: small coding improvements in
 output_shortcode()

---
 modules/simple-payments/simple-payments.php | 30 ++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/modules/simple-payments/simple-payments.php b/modules/simple-payments/simple-payments.php
index edfa3d9296614..8c07c87b7fb47 100644
--- a/modules/simple-payments/simple-payments.php
+++ b/modules/simple-payments/simple-payments.php
@@ -86,23 +86,23 @@ function parse_shortcode( $attrs, $content = false ) {
 
 	function output_shortcode( $data ) {
 		$items = '';
+
 		if ( $data['multiple'] ) {
-		       $items="<div class='jetpack-simple-payments-items'>
-		       <input class='jetpack-simple-payments-items-number' type='number' min='1' value='1' id='{$data['dom_id']}_number'>
-		       </div>";
+			$items="<div class='jetpack-simple-payments-items'>
+				<input class='jetpack-simple-payments-items-number' type='number' value='1' id='{$data['dom_id']}_number' />
+			</div>";
 		}
-		$output = "
-<div class='{$data[ 'class' ]} jetpack-simple-payments__wrapper'>
-	<p class='jetpack-simple-payments__purchase-message'>
-	</p>
-	<div class='jetpack-simple-payments__title'>{$data['title']}</div>
-	<div class='jetpack-simple-payments__description'>{$data['description']}</div>
-	<div class='jetpack-simple-payments__price'>{$data['price']}</div>
-	{$items}
-	<div class='jetpack-simple-payments__button' id='{$data['dom_id']}_button'></div>
-</div>
-";
-		return $output;
+
+		return "
+			<div class='{$data[ 'class' ]} jetpack-simple-payments__wrapper'>
+				<p class='jetpack-simple-payments__purchase-message'></p>
+				<div class='jetpack-simple-payments__title'>{$data['title']}</div>
+				<div class='jetpack-simple-payments__description'>{$data['description']}</div>
+				<div class='jetpack-simple-payments__price'>{$data['price']}</div>
+				{$items}
+				<div class='jetpack-simple-payments__button' id='{$data['dom_id']}_button'></div>
+			</div>
+		";
 	}
 
 	function format_price( $price, $currency, $all_data ) {

From 4f4be62ea2a171d2ba717ae58fde4abd999e3572 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Sat, 22 Jul 2017 11:18:10 -0300
Subject: [PATCH 04/13] simple-payments: do not use underscore in css class
 https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#selectors

---
 modules/simple-payments/paypal-express-checkout.js |  7 +++++--
 modules/simple-payments/simple-payments.css        | 10 +++++-----
 modules/simple-payments/simple-payments.php        | 10 +++++-----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js
index 4f6ac635c9c4d..eb1880737995e 100644
--- a/modules/simple-payments/paypal-express-checkout.js
+++ b/modules/simple-payments/paypal-express-checkout.js
@@ -4,6 +4,9 @@
  * of simple-payments module.
  */
 
+var primaryCssClassName = 'jetpack-simple-payments';
+var messageCssClassName = primaryCssClassName + '-purchase-message';
+
 /* global paypal */
 /* global jQuery */
 /* exported PaypalExpressCheckout */
@@ -76,7 +79,7 @@ var PaypalExpressCheckout = {
 		var domEl = PaypalExpressCheckout.getMessageElement( buttonDomId );
 
 		// set css classes
-		var cssClasses = 'jetpack-simple-payments__purchase-message show ';
+		var cssClasses = messageCssClassName + ' show ';
 		cssClasses += isError ? 'error' : 'success';
 
 		// show message 1s after Paypal popup is closed
@@ -113,7 +116,7 @@ var PaypalExpressCheckout = {
 
 	cleanAndHideMessage: function( buttonDomId ) {
 		var domEl = PaypalExpressCheckout.getMessageElement( buttonDomId );
-		domEl.setAttribute( 'class', 'jetpack-simple-payments__purchase-message' );
+		domEl.setAttribute( 'class', messageCssClassName );
 		domEl.innerHTML = '';
 	},
 
diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css
index ae42b65117c24..2e55ec5db7f47 100644
--- a/modules/simple-payments/simple-payments.css
+++ b/modules/simple-payments/simple-payments.css
@@ -33,24 +33,24 @@
 	float:right;
 }
 
-.jetpack-simple-payments__purchase-message {
+.jetpack-simple-payments-purchase-message {
 	display: none;
 	padding: 1em;
 }
 
 /* stronger rule in order to set the text color */
-body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message
+body .jetpack-simple-payments-wrapper div.jetpack-simple-payments-purchase-message {
 	color: #fff;
 }
 
-.jetpack-simple-payments__purchase-message.show {
+.jetpack-simple-payments-purchase-message.show {
 	display: block;
 }
 
-.jetpack-simple-payments__purchase-message.success {
+.jetpack-simple-payments-purchase-message.success {
 	background-color: #4ab866;
 }
 
-.jetpack-simple-payments__purchase-message.error {
+.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 8c07c87b7fb47..a29886e3c5246 100644
--- a/modules/simple-payments/simple-payments.php
+++ b/modules/simple-payments/simple-payments.php
@@ -94,11 +94,11 @@ function output_shortcode( $data ) {
 		}
 
 		return "
-			<div class='{$data[ 'class' ]} jetpack-simple-payments__wrapper'>
-				<p class='jetpack-simple-payments__purchase-message'></p>
-				<div class='jetpack-simple-payments__title'>{$data['title']}</div>
-				<div class='jetpack-simple-payments__description'>{$data['description']}</div>
-				<div class='jetpack-simple-payments__price'>{$data['price']}</div>
+			<div class='{$data[ 'class' ]} jetpack-simple-payments-wrapper'>
+				<p class='jetpack-simple-payments-purchase-message'></p>
+				<div class='jetpack-simple-payments-title'>{$data['title']}</div>
+				<div class='jetpack-simple-payments-description'>{$data['description']}</div>
+				<div class='jetpack-simple-payments-price'>{$data['price']}</div>
 				{$items}
 				<div class='jetpack-simple-payments__button' id='{$data['dom_id']}_button'></div>
 			</div>

From c2e0186fd95b2a1ae77212d9be0ae2f6c7645b9c Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Sat, 22 Jul 2017 11:23:03 -0300
Subject: [PATCH 05/13] simple-payments: minor improvements defining endpoints

---
 modules/simple-payments/paypal-express-checkout.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js
index eb1880737995e..b62be49c65a4c 100644
--- a/modules/simple-payments/paypal-express-checkout.js
+++ b/modules/simple-payments/paypal-express-checkout.js
@@ -7,6 +7,9 @@
 var primaryCssClassName = 'jetpack-simple-payments';
 var messageCssClassName = primaryCssClassName + '-purchase-message';
 
+var wpRestAPIHost = 'https://public-api.wordpress.com';
+var wpRestAPIVersion = '/wpcom/v2';
+
 /* global paypal */
 /* global jQuery */
 /* exported PaypalExpressCheckout */
@@ -14,12 +17,15 @@ var messageCssClassName = primaryCssClassName + '-purchase-message';
 var PaypalExpressCheckout = {
 	sandbox: true,
 	$purchaseMessageContainer: null,
+
 	getCreatePaymentEndpoint: function( blogId ) {
-		return 'https://public-api.wordpress.com/wpcom/v2/sites/' + blogId + '/simple-payments/paypal/payment';
+		return wpRestAPIHost + wpRestAPIVersion + '/sites/' + blogId + '/simple-payments/paypal/payment';
 	},
+
 	getExecutePaymentEndpoint: function( blogId, paymentId ) {
-		return 'https://public-api.wordpress.com/wpcom/v2/sites/' + blogId + '/simple-payments/paypal/' + paymentId + '/execute';
+		return wpRestAPIHost + wpRestAPIVersion + '/sites/' + blogId + '/simple-payments/paypal/' + paymentId + '/execute';
 	},
+
 	getNumberOfItems: function( field, enableMultiple ) {
 		var numberField, number;
 		if ( enableMultiple !== '1' ) {

From 4c2dae95b173a817d3f097cfabc7de236fe341c7 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Sat, 22 Jul 2017 11:25:59 -0300
Subject: [PATCH 06/13] simple-payments: use `<p>` tag for description and
 price https://github.com/Automattic/jetpack/pull/7500#discussion_r128818969

---
 modules/simple-payments/simple-payments.css | 2 +-
 modules/simple-payments/simple-payments.php | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css
index 2e55ec5db7f47..25f75efe90aec 100644
--- a/modules/simple-payments/simple-payments.css
+++ b/modules/simple-payments/simple-payments.css
@@ -39,7 +39,7 @@
 }
 
 /* stronger rule in order to set the text color */
-body .jetpack-simple-payments-wrapper div.jetpack-simple-payments-purchase-message {
+body .jetpack-simple-payments-wrapper p.jetpack-simple-payments-purchase-message {
 	color: #fff;
 }
 
diff --git a/modules/simple-payments/simple-payments.php b/modules/simple-payments/simple-payments.php
index a29886e3c5246..91295817b1291 100644
--- a/modules/simple-payments/simple-payments.php
+++ b/modules/simple-payments/simple-payments.php
@@ -97,8 +97,8 @@ function output_shortcode( $data ) {
 			<div class='{$data[ 'class' ]} jetpack-simple-payments-wrapper'>
 				<p class='jetpack-simple-payments-purchase-message'></p>
 				<div class='jetpack-simple-payments-title'>{$data['title']}</div>
-				<div class='jetpack-simple-payments-description'>{$data['description']}</div>
-				<div class='jetpack-simple-payments-price'>{$data['price']}</div>
+				<p class='jetpack-simple-payments-description'>{$data['description']}</p>
+				<p class='jetpack-simple-payments-price'>{$data['price']}</p>
 				{$items}
 				<div class='jetpack-simple-payments__button' id='{$data['dom_id']}_button'></div>
 			</div>

From 43d30becbb0d3560c9874caa839c0be3f3602a87 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Sat, 22 Jul 2017 11:28:53 -0300
Subject: [PATCH 07/13] simple-payments: minor improvements

---
 modules/simple-payments/paypal-express-checkout.js | 2 --
 modules/simple-payments/simple-payments.css        | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js
index b62be49c65a4c..e03b20caadb72 100644
--- a/modules/simple-payments/paypal-express-checkout.js
+++ b/modules/simple-payments/paypal-express-checkout.js
@@ -16,7 +16,6 @@ var wpRestAPIVersion = '/wpcom/v2';
 /* jshint unused:false, es3:false, esversion:5 */
 var PaypalExpressCheckout = {
 	sandbox: true,
-	$purchaseMessageContainer: null,
 
 	getCreatePaymentEndpoint: function( blogId ) {
 		return wpRestAPIHost + wpRestAPIVersion + '/sites/' + blogId + '/simple-payments/paypal/payment';
@@ -181,7 +180,6 @@ var PaypalExpressCheckout = {
 						} );
 				} );
 			}
-
 		}, buttonDomId );
 	}
 };
diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css
index 25f75efe90aec..943c9d64327a1 100644
--- a/modules/simple-payments/simple-payments.css
+++ b/modules/simple-payments/simple-payments.css
@@ -28,7 +28,7 @@
 	width: 30px;
 }
 
-.jetpack-simple-payments-button{
+.jetpack-simple-payments-button {
 	display:block;
 	float:right;
 }

From 912a9cbcfd10909cea66aabcacbf978375925c9d Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Sat, 22 Jul 2017 12:30:50 -0300
Subject: [PATCH 08/13] simple-payments: add purchase-box container. improve
 paypal button styles.

---
 .../paypal-express-checkout.js                |  5 ++-
 modules/simple-payments/simple-payments.css   |  5 +--
 modules/simple-payments/simple-payments.php   | 35 +++++++++++--------
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js
index e03b20caadb72..2ecaa61223f21 100644
--- a/modules/simple-payments/paypal-express-checkout.js
+++ b/modules/simple-payments/paypal-express-checkout.js
@@ -136,10 +136,13 @@ var PaypalExpressCheckout = {
 		paypal.Button.render( {
 			env: env,
 			commit: true,
+
 			style: {
 				label: 'pay',
-				color: 'blue'
+				shape: 'rect',
+				color: 'silver'
 			},
+			
 			payment: function() {
 				PaypalExpressCheckout.cleanAndHideMessage( buttonDomId );
 
diff --git a/modules/simple-payments/simple-payments.css b/modules/simple-payments/simple-payments.css
index 943c9d64327a1..4b23c0b62c7fa 100644
--- a/modules/simple-payments/simple-payments.css
+++ b/modules/simple-payments/simple-payments.css
@@ -16,6 +16,7 @@
 .jetpack-simple-payments-price {
 	font-weight: bold;
 	display: inline-block;
+	float: left;
 	margin-right: 15px;
 }
 
@@ -29,8 +30,8 @@
 }
 
 .jetpack-simple-payments-button {
-	display:block;
-	float:right;
+	display: inline-block;
+	float: left;
 }
 
 .jetpack-simple-payments-purchase-message {
diff --git a/modules/simple-payments/simple-payments.php b/modules/simple-payments/simple-payments.php
index 91295817b1291..bfb38bd73855b 100644
--- a/modules/simple-payments/simple-payments.php
+++ b/modules/simple-payments/simple-payments.php
@@ -12,6 +12,8 @@ class Jetpack_Simple_Payments {
 
 	static $shortcode = 'simple-payment';
 
+	static $cssClassnamePrefix = 'jetpack-simple-payments';
+
 	// Classic singleton pattern:
 	private static $instance;
 	private function __construct() {}
@@ -61,13 +63,13 @@ function parse_shortcode( $attrs, $content = false ) {
 
 		// We allow for overriding the presentation labels
 		$data = shortcode_atts( array(
-			'blog_id' => Jetpack_Options::get_option( 'id' ),
-			'dom_id' => uniqid( 'jetpack-simple-payments-' . $product->ID . '_', true ),
-			'class' => 'jetpack-simple-payments-' . $product->ID,
-			'title' => get_the_title( $product ),
+			'blog_id'     => Jetpack_Options::get_option( 'id' ),
+			'dom_id'      => uniqid( self::$cssClassnamePrefix . '-' . $product->ID . '_', true ),
+			'class'       => self::$cssClassnamePrefix . '-' . $product->ID,
+			'title'       => get_the_title( $product ),
 			'description' => $product->post_content,
-			'cta' => get_post_meta( $product->ID, 'spay_cta', true ),
-			'multiple' => get_post_meta( $product->ID, 'spay_multiple', true ) || '0'
+			'cta'         => get_post_meta( $product->ID, 'spay_cta', true ),
+			'multiple'    => get_post_meta( $product->ID, 'spay_multiple', true ) || '0'
 		), $attrs );
 		$data['price'] = $this->format_price(
 			get_post_meta( $product->ID, 'spay_price', true ),
@@ -86,21 +88,24 @@ function parse_shortcode( $attrs, $content = false ) {
 
 	function output_shortcode( $data ) {
 		$items = '';
+		$cssPrefix = self::$cssClassnamePrefix;
 
 		if ( $data['multiple'] ) {
-			$items="<div class='jetpack-simple-payments-items'>
-				<input class='jetpack-simple-payments-items-number' type='number' value='1' id='{$data['dom_id']}_number' />
+			$items="<div class='${cssPrefix}-items'>
+				<input class='${cssPrefix}-items-number' type='number' value='1' id='{$data['dom_id']}_number' />
 			</div>";
 		}
 
 		return "
-			<div class='{$data[ 'class' ]} jetpack-simple-payments-wrapper'>
-				<p class='jetpack-simple-payments-purchase-message'></p>
-				<div class='jetpack-simple-payments-title'>{$data['title']}</div>
-				<p class='jetpack-simple-payments-description'>{$data['description']}</p>
-				<p class='jetpack-simple-payments-price'>{$data['price']}</p>
-				{$items}
-				<div class='jetpack-simple-payments__button' id='{$data['dom_id']}_button'></div>
+			<div class='{$data['class']} ${cssPrefix}-wrapper'>
+				<p class='${cssPrefix}-purchase-message'></p>
+				<div class='${cssPrefix}-title'>{$data['title']}</div>
+				<p class='${cssPrefix}-description'>{$data['description']}</p>
+				<div class='${cssPrefix}-purchase-box'>
+					<p class='${cssPrefix}-price'>{$data['price']}</p>
+					{$items}
+					<div class='${cssPrefix}-button' id='{$data['dom_id']}_button'></div>
+				</div>
 			</div>
 		";
 	}

From 1102a9bf5c61abba50b05fe18c526bccc6489541 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 24 Jul 2017 09:13:17 -0300
Subject: [PATCH 09/13] simple-pyaments: wrap all text into `<p>` elems

---
 modules/simple-payments/simple-payments.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/simple-payments/simple-payments.php b/modules/simple-payments/simple-payments.php
index bfb38bd73855b..20d1db7f4c4f6 100644
--- a/modules/simple-payments/simple-payments.php
+++ b/modules/simple-payments/simple-payments.php
@@ -99,10 +99,10 @@ function output_shortcode( $data ) {
 		return "
 			<div class='{$data['class']} ${cssPrefix}-wrapper'>
 				<p class='${cssPrefix}-purchase-message'></p>
-				<div class='${cssPrefix}-title'>{$data['title']}</div>
-				<p class='${cssPrefix}-description'>{$data['description']}</p>
+				<div class='${cssPrefix}-title'><p>{$data['title']}</p></div>
+				<div class='${cssPrefix}-description'><p>{$data['description']}</p></div>
 				<div class='${cssPrefix}-purchase-box'>
-					<p class='${cssPrefix}-price'>{$data['price']}</p>
+					<div class='${cssPrefix}-price'><p>{$data['price']}</p></div>
 					{$items}
 					<div class='${cssPrefix}-button' id='{$data['dom_id']}_button'></div>
 				</div>

From da337bb87b7ba982f4c90a08b843cfdbd87bb47b Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 24 Jul 2017 09:40:17 -0300
Subject: [PATCH 10/13] simple-payments: move globals as PaypalExpressCheckout
 properties

---
 .../paypal-express-checkout.js                | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js
index 2ecaa61223f21..608727de641b2 100644
--- a/modules/simple-payments/paypal-express-checkout.js
+++ b/modules/simple-payments/paypal-express-checkout.js
@@ -4,25 +4,27 @@
  * of simple-payments module.
  */
 
-var primaryCssClassName = 'jetpack-simple-payments';
-var messageCssClassName = primaryCssClassName + '-purchase-message';
-
-var wpRestAPIHost = 'https://public-api.wordpress.com';
-var wpRestAPIVersion = '/wpcom/v2';
+var PaypalExpressCheckout = {};
 
 /* global paypal */
 /* global jQuery */
 /* exported PaypalExpressCheckout */
 /* jshint unused:false, es3:false, esversion:5 */
-var PaypalExpressCheckout = {
+PaypalExpressCheckout = {
+	primaryCssClassName: 'jetpack-simple-payments',
+	messageCssClassName: PaypalExpressCheckout.primaryCssClassName + '-purchase-message',
+
+	wpRestAPIHost: 'https://public-api.wordpress.com',
+	wpRestAPIVersion: '/wpcom/v2',
+
 	sandbox: true,
 
 	getCreatePaymentEndpoint: function( blogId ) {
-		return wpRestAPIHost + wpRestAPIVersion + '/sites/' + blogId + '/simple-payments/paypal/payment';
+		return PaypalExpressCheckout.wpRestAPIHost + PaypalExpressCheckout.wpRestAPIVersion + '/sites/' + blogId + '/simple-payments/paypal/payment';
 	},
 
 	getExecutePaymentEndpoint: function( blogId, paymentId ) {
-		return wpRestAPIHost + wpRestAPIVersion + '/sites/' + blogId + '/simple-payments/paypal/' + paymentId + '/execute';
+		return PaypalExpressCheckout.wpRestAPIHost + PaypalExpressCheckout.wpRestAPIVersion + '/sites/' + blogId + '/simple-payments/paypal/' + paymentId + '/execute';
 	},
 
 	getNumberOfItems: function( field, enableMultiple ) {
@@ -84,7 +86,7 @@ var PaypalExpressCheckout = {
 		var domEl = PaypalExpressCheckout.getMessageElement( buttonDomId );
 
 		// set css classes
-		var cssClasses = messageCssClassName + ' show ';
+		var cssClasses = PaypalExpressCheckout.messageCssClassName + ' show ';
 		cssClasses += isError ? 'error' : 'success';
 
 		// show message 1s after Paypal popup is closed
@@ -121,7 +123,7 @@ var PaypalExpressCheckout = {
 
 	cleanAndHideMessage: function( buttonDomId ) {
 		var domEl = PaypalExpressCheckout.getMessageElement( buttonDomId );
-		domEl.setAttribute( 'class', messageCssClassName );
+		domEl.setAttribute( 'class', PaypalExpressCheckout.messageCssClassName );
 		domEl.innerHTML = '';
 	},
 

From 40c4a341d074e6095cf8c54fcd42d4476d7ef991 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 24 Jul 2017 09:43:20 -0300
Subject: [PATCH 11/13] simple-payments: coding improvementes.

---
 modules/simple-payments/simple-payments.php | 28 ++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/modules/simple-payments/simple-payments.php b/modules/simple-payments/simple-payments.php
index 20d1db7f4c4f6..8429a29540aee 100644
--- a/modules/simple-payments/simple-payments.php
+++ b/modules/simple-payments/simple-payments.php
@@ -12,7 +12,7 @@ class Jetpack_Simple_Payments {
 
 	static $shortcode = 'simple-payment';
 
-	static $cssClassnamePrefix = 'jetpack-simple-payments';
+	static $css_classname_prefix = 'jetpack-simple-payments';
 
 	// Classic singleton pattern:
 	private static $instance;
@@ -64,8 +64,8 @@ function parse_shortcode( $attrs, $content = false ) {
 		// We allow for overriding the presentation labels
 		$data = shortcode_atts( array(
 			'blog_id'     => Jetpack_Options::get_option( 'id' ),
-			'dom_id'      => uniqid( self::$cssClassnamePrefix . '-' . $product->ID . '_', true ),
-			'class'       => self::$cssClassnamePrefix . '-' . $product->ID,
+			'dom_id'      => uniqid( self::$css_classname_prefix . '-' . $product->ID . '_', true ),
+			'class'       => self::$css_classname_prefix . '-' . $product->ID,
 			'title'       => get_the_title( $product ),
 			'description' => $product->post_content,
 			'cta'         => get_post_meta( $product->ID, 'spay_cta', true ),
@@ -88,7 +88,7 @@ function parse_shortcode( $attrs, $content = false ) {
 
 	function output_shortcode( $data ) {
 		$items = '';
-		$cssPrefix = self::$cssClassnamePrefix;
+		$cssPrefix = self::$css_classname_prefix;
 
 		if ( $data['multiple'] ) {
 			$items="<div class='${cssPrefix}-items'>
@@ -97,16 +97,16 @@ function output_shortcode( $data ) {
 		}
 
 		return "
-			<div class='{$data['class']} ${cssPrefix}-wrapper'>
-				<p class='${cssPrefix}-purchase-message'></p>
-				<div class='${cssPrefix}-title'><p>{$data['title']}</p></div>
-				<div class='${cssPrefix}-description'><p>{$data['description']}</p></div>
-				<div class='${cssPrefix}-purchase-box'>
-					<div class='${cssPrefix}-price'><p>{$data['price']}</p></div>
-					{$items}
-					<div class='${cssPrefix}-button' id='{$data['dom_id']}_button'></div>
-				</div>
-			</div>
+<div class='{$data['class']} ${cssPrefix}-wrapper'>
+	<p class='${cssPrefix}-purchase-message'></p>
+	<div class='${cssPrefix}-title'><p>{$data['title']}</p></div>
+	<div class='${cssPrefix}-description'><p>{$data['description']}</p></div>
+	<div class='${cssPrefix}-purchase-box'>
+		<div class='${cssPrefix}-price'><p>{$data['price']}</p></div>
+		{$items}
+		<div class='${cssPrefix}-button' id='{$data['dom_id']}_button'></div>
+	</div>
+</div>
 		";
 	}
 

From 67a6324fadaaf3ee8fe64b8892d1fa0a7fc9b0b4 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 24 Jul 2017 11:26:07 -0300
Subject: [PATCH 12/13] simple-payments: minor code improvements

---
 modules/simple-payments/paypal-express-checkout.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js
index 608727de641b2..e71873a14b7dd 100644
--- a/modules/simple-payments/paypal-express-checkout.js
+++ b/modules/simple-payments/paypal-express-checkout.js
@@ -28,16 +28,17 @@ PaypalExpressCheckout = {
 	},
 
 	getNumberOfItems: function( field, enableMultiple ) {
-		var numberField, number;
 		if ( enableMultiple !== '1' ) {
 			return 1;
 		}
-		numberField = document.getElementById( field );
+
+		var numberField = document.getElementById( field );
 
 		if ( ! numberField ) {
 			return 1;
 		}
-		number = Number( numberField.value );
+
+		var number = Number( numberField.value );
 
 		if ( isNaN( number ) ) {
 			return 1;
@@ -110,7 +111,7 @@ PaypalExpressCheckout = {
 
 		if ( error.additional_errors ) {
 			var messages = [];
-			error.additional_errors.forEach( function( error ) {
+			error.additional_errors.forEach( function() {
 				if ( error.message ) {
 					messages.push( '<p>' + error.message.toString() + '</p>' );
 				}
@@ -144,7 +145,7 @@ PaypalExpressCheckout = {
 				shape: 'rect',
 				color: 'silver'
 			},
-			
+
 			payment: function() {
 				PaypalExpressCheckout.cleanAndHideMessage( buttonDomId );
 

From 276a85579c8f3fbc985086f82d8ed4c43a8ed97a Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 24 Jul 2017 11:41:20 -0300
Subject: [PATCH 13/13] rebase: squash -> "simple-payments: move globals as
 PaypalExpressCheckout properties"

---
 modules/simple-payments/paypal-express-checkout.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/modules/simple-payments/paypal-express-checkout.js b/modules/simple-payments/paypal-express-checkout.js
index e71873a14b7dd..4c12e26cc6fc2 100644
--- a/modules/simple-payments/paypal-express-checkout.js
+++ b/modules/simple-payments/paypal-express-checkout.js
@@ -4,15 +4,13 @@
  * of simple-payments module.
  */
 
-var PaypalExpressCheckout = {};
-
 /* global paypal */
 /* global jQuery */
 /* exported PaypalExpressCheckout */
 /* jshint unused:false, es3:false, esversion:5 */
-PaypalExpressCheckout = {
+var PaypalExpressCheckout = {
 	primaryCssClassName: 'jetpack-simple-payments',
-	messageCssClassName: PaypalExpressCheckout.primaryCssClassName + '-purchase-message',
+	messageCssClassName: 'jetpack-simple-payments-purchase-message',
 
 	wpRestAPIHost: 'https://public-api.wordpress.com',
 	wpRestAPIVersion: '/wpcom/v2',
@@ -53,7 +51,7 @@ PaypalExpressCheckout = {
 	 * @param  string buttonDomId id of the payment button placeholder
 	 * @return Element the dom element to print the message
 	 */
-	getMessageElement: function ( buttonDomId ) {
+	getMessageElement: function( buttonDomId ) {
 		var messageDomId = buttonDomId + '_message';
 
 		// DOM Elements