Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simple payments/show messages response #7495

Merged
merged 14 commits into from
Jul 22, 2017
Merged

Simple payments/show messages response #7495

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
37fddc3
simple-payments: print message when the transaction ends.
retrofox Jul 20, 2017
b233443
simple-payments: clean message placeholder
retrofox Jul 20, 2017
26e96ea
Put the purchase message into HTML, hidden by default
lamosty Jul 21, 2017
448d28f
Toggle purchase messages with either success/error and message
lamosty Jul 21, 2017
cbdb5fe
Use p tag instead of div with margin
lamosty Jul 21, 2017
2246be7
Remove unneeded code
lamosty Jul 21, 2017
93edd0b
Fix typo
lamosty Jul 21, 2017
ee85be4
Fix paypal checkout.js script error
lamosty Jul 21, 2017
3dfa135
Use .html instead of text to append html content
lamosty Jul 21, 2017
3fa3603
Removing one error message: there's no error to show, uneeded
lamosty Jul 21, 2017
04a0822
Fix toggle logic of the purchase message
lamosty Jul 21, 2017
fb41466
simple-payments: improve showing transaction messages
retrofox Jul 21, 2017
4966db8
fix linting issue
jhnstn Jul 22, 2017
d839c7a
update success copy
jhnstn Jul 22, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 99 additions & 13 deletions modules/simple-payments/paypal-express-checkout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
/* jshint unused:false */
var PaypalExpressCheckout = {
sandbox: true,
$purchaseMessageContainer: null,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are we using $ to define a var in JavaScript?

Copy link
Contributor

@lamosty lamosty Jul 21, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's jQuery convention. If something is jQuery object, we use $ in the var name to state that. It helps with differentiating it from standard html element object so you can expect it to have jQuery capabilities.

getCreatePaymentEndpoint: function( blogId ) {
return 'https://public-api.wordpress.com/wpcom/v2/sites/' + blogId + '/simple-payments/paypal/payment';
},
Expand All @@ -32,41 +33,126 @@ var PaypalExpressCheckout = {
}
return number;
},

/**
* 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,
style: {
label: 'pay',
color: 'blue'
},
payment: function() {
payment: function( paymentData ) {
PaypalExpressCheckout.cleanAndHideMessage( buttonDomId );

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) {
PaypalExpressCheckout.showError( 'Item temporarily unavailable', buttonDomId );
} );
},
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() {
// TODO: handle success, errors, messaging, etc, etc.
/* jshint ignore:start */
alert( 'success!' );
/* jshint ignore:end */
} )
.then( function( authResponse ) {
var payerInfo = authResponse.payer.payer_info;

var message =
'<strong>Thank you for your purchase, ' + payerInfo.first_name + '!</strong>' +
'<br />' +
'The purchase has been successful. <br />' +
'For more details, an email has been sent to your email address ' +
'<a href="mailto:' + payerInfo.email + '"><em>' + payerInfo.email + '</em></a>.';

PaypalExpressCheckout.showMessage( message, buttonDomId );
} )
.catch( function( authError ) {
PaypalExpressCheckout.showError( 'Item temporarily unavailable', buttonDomId );
} );
}

}, domId + '_button' );
}, buttonDomId );
}
};
21 changes: 21 additions & 0 deletions modules/simple-payments/simple-payments.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
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;
Copy link
Contributor

@iamtakashi iamtakashi Jul 21, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move only this color rule to a different block with a selector with a higher specificity so that it remains in white in most themes?

body .jetpack-simple-payments__wrapper p.jetpack-simple-payments__purchase-message {
     color: #fff;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding this now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just fyi I've changed to div instead of p;

body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message {
     color: #fff;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did it work? jetpack-simple-payments__purchase-message is a <p> isn't it? I've asked to change it to <p> since most themes should have some spacing for it so that we don't have to add some arbitrary margin.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm sorry Takashi. I didn't see your comment last night. It was tacked in this commit 59ea83a of the #7500

padding: 1em;
}

body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.show {
Copy link
Contributor

@iamtakashi iamtakashi Jul 21, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to add specificities to others. We only need the bloated selector for the <p>.

body .jetpack-simple-payments__wrapper p.jetpack-simple-payments__purchase-message {
   color: #fff;
}

The rest should just be fine as they were.

Are we displaying links in the message?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rest should just be fine as they were.

Let's rollback in #7500.

Are we displaying links in the message?

we were adding the emial address as a link. Let's cleaning it as well.

display: block;
}

body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.success {
background-color: #4ab866;
}

body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.error {
background-color: #d94f4f;
}
17 changes: 10 additions & 7 deletions modules/simple-payments/simple-payments.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,9 @@ 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-express-checkout', plugins_url( '/paypal-express-checkout.js', __FILE__ ) , array( 'paypal-checkout-js' ), '0.21' );
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__ ) );
}
private function register_init_hook() {
add_action( 'init', array( $this, 'init_hook_action' ) );
Expand Down Expand Up @@ -91,12 +92,14 @@ function output_shortcode( $data ) {
</div>";
}
$output = "
<div class='{$data[ 'class' ]} jetpack-simple-payments-wrapper'>
<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 class='jetpack-simple-payments__button' id='{$data['dom_id']}_button'></div>
</div>
";
return $output;
Expand Down