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 11 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
60 changes: 52 additions & 8 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,38 +33,81 @@ 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( '' )
Copy link
Contributor Author

Choose a reason for hiding this comment

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

semicolon

} else {
PaypalExpressCheckout.$purchaseMessageContainer
.html( message )
.addClass( 'show' );

if ( typeof successOrError !== 'undefined' ) {
PaypalExpressCheckout.$purchaseMessageContainer.addClass( successOrError );
}
}
},
renderButton: function( blogId, buttonId, domId, enableMultiple ) {
var env = PaypalExpressCheckout.sandbox ? 'sandbox' : 'production';
if ( ! paypal ) {
throw new Error( 'PayPal module is required by PaypalExpressCheckout' );
}

paypal.Button.render( {
env: env,
commit: true,
style: {
label: 'pay',
color: 'blue'
},
payment: function() {
payment: function( paymentData ) {
if (
PaypalExpressCheckout.$purchaseMessageContainer &&
PaypalExpressCheckout.$purchaseMessageContainer.hasClass( 'show' )
) {
PaypalExpressCheckout.togglePurchaseMessage();
}

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;
} );
},
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 =
'<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 <em>' + payerInfo.email + '<em>.';

PaypalExpressCheckout.togglePurchaseMessage( message, 'success' );

// TODO: handle success, errors, messaging, etc, etc.
/* jshint ignore:start */
alert( 'success!' );
/* jshint ignore:end */
} )
.catch( function( authError ) {
PaypalExpressCheckout.togglePurchaseMessage( 'Error!', 'error' );
// console.log( 'authError: %o', authError );
} );
}

Expand Down
17 changes: 17 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,17 @@
.jetpack-simple-payments__purchase-message {
display: none;
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;
}

.jetpack-simple-payments__purchase-message.show {
display: block;
}

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

.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