paypal-express-checkout.js
1 year ago
simple-payments.css
7 months ago
simple-payments.php
7 months ago
paypal-express-checkout.js
248 lines
| 1 | /** |
| 2 | * This PaypalExpressCheckout global is included by wp_enqueue_script( 'jetpack-paypal-express-checkout' ); |
| 3 | * It handles communication with Paypal Express checkout and public-api.wordpress.com for the purposes |
| 4 | * of simple-payments module. |
| 5 | */ |
| 6 | |
| 7 | /* global paypal */ |
| 8 | /* exported PaypalExpressCheckout */ |
| 9 | var PaypalExpressCheckout = { |
| 10 | primaryCssClassName: 'jetpack-simple-payments', |
| 11 | messageCssClassName: 'jetpack-simple-payments-purchase-message', |
| 12 | |
| 13 | wpRestAPIHost: 'https://public-api.wordpress.com', |
| 14 | wpRestAPIVersion: '/wpcom/v2', |
| 15 | |
| 16 | getEnvironment: function () { |
| 17 | if ( |
| 18 | localStorage && |
| 19 | localStorage.getItem && |
| 20 | localStorage.getItem( 'simple-payments-env' ) === 'sandbox' |
| 21 | ) { |
| 22 | return 'sandbox'; |
| 23 | } |
| 24 | return 'production'; |
| 25 | }, |
| 26 | |
| 27 | getCreatePaymentEndpoint: function ( blogId ) { |
| 28 | return ( |
| 29 | PaypalExpressCheckout.wpRestAPIHost + |
| 30 | PaypalExpressCheckout.wpRestAPIVersion + |
| 31 | '/sites/' + |
| 32 | blogId + |
| 33 | '/simple-payments/paypal/payment' |
| 34 | ); |
| 35 | }, |
| 36 | |
| 37 | getExecutePaymentEndpoint: function ( blogId, paymentId ) { |
| 38 | return ( |
| 39 | PaypalExpressCheckout.wpRestAPIHost + |
| 40 | PaypalExpressCheckout.wpRestAPIVersion + |
| 41 | '/sites/' + |
| 42 | blogId + |
| 43 | '/simple-payments/paypal/' + |
| 44 | paymentId + |
| 45 | '/execute' |
| 46 | ); |
| 47 | }, |
| 48 | |
| 49 | getNumberOfItems: function ( field, enableMultiple ) { |
| 50 | if ( enableMultiple !== '1' ) { |
| 51 | return 1; |
| 52 | } |
| 53 | |
| 54 | var numberField = document.getElementById( field ); |
| 55 | |
| 56 | if ( ! numberField ) { |
| 57 | return 1; |
| 58 | } |
| 59 | |
| 60 | var number = Number( numberField.value ); |
| 61 | |
| 62 | if ( isNaN( number ) ) { |
| 63 | return 1; |
| 64 | } |
| 65 | return number; |
| 66 | }, |
| 67 | |
| 68 | /** |
| 69 | * Get the DOM element-placeholder used to show message |
| 70 | * about the transaction. If it doesn't exist then the function will create a new one. |
| 71 | * |
| 72 | * @param string domId id of the payment button placeholder |
| 73 | * @return Element the dom element to print the message |
| 74 | */ |
| 75 | getMessageContainer: function ( domId ) { |
| 76 | return document.getElementById( domId + '-message-container' ); |
| 77 | }, |
| 78 | |
| 79 | /** |
| 80 | * Show a messange close to the Paypal button. |
| 81 | * Use this function to give feedback to the user according |
| 82 | * to the transaction result. |
| 83 | * |
| 84 | * @param {String} message message to show |
| 85 | * @param {String} domId paypal-button element dom identifier |
| 86 | * @param {Boolean} [error] defines if it's a message error. Not TRUE as default. |
| 87 | */ |
| 88 | showMessage: function ( message, domId, isError ) { |
| 89 | var domEl = PaypalExpressCheckout.getMessageContainer( domId ); |
| 90 | |
| 91 | // set css classes |
| 92 | var cssClasses = PaypalExpressCheckout.messageCssClassName + ' show '; |
| 93 | cssClasses += isError ? 'error' : 'success'; |
| 94 | |
| 95 | // show message 1s after PayPal popup is closed |
| 96 | setTimeout( function () { |
| 97 | domEl.innerHTML = message; |
| 98 | domEl.setAttribute( 'class', cssClasses ); |
| 99 | }, 1000 ); |
| 100 | }, |
| 101 | |
| 102 | showError: function ( message, domId ) { |
| 103 | PaypalExpressCheckout.showMessage( message, domId, true ); |
| 104 | }, |
| 105 | |
| 106 | processErrorMessage: function ( errorResponse ) { |
| 107 | var error = errorResponse ? errorResponse.responseJSON : null; |
| 108 | var defaultMessage = 'There was an issue processing your payment.'; |
| 109 | |
| 110 | if ( ! error ) { |
| 111 | return '<p>' + defaultMessage + '</p>'; |
| 112 | } |
| 113 | |
| 114 | if ( error.additional_errors ) { |
| 115 | var messages = []; |
| 116 | error.additional_errors.forEach( function ( additionalError ) { |
| 117 | if ( additionalError.message ) { |
| 118 | messages.push( '<p>' + additionalError.message.toString() + '</p>' ); |
| 119 | } |
| 120 | } ); |
| 121 | return messages.join( '' ); |
| 122 | } |
| 123 | |
| 124 | return '<p>' + ( error.message || defaultMessage ) + '</p>'; |
| 125 | }, |
| 126 | |
| 127 | processSuccessMessage: function ( successResponse ) { |
| 128 | var message = successResponse.message; |
| 129 | var defaultMessage = 'Thank you. Your purchase was successful!'; |
| 130 | |
| 131 | if ( ! message ) { |
| 132 | return '<p>' + defaultMessage + '</p>'; |
| 133 | } |
| 134 | |
| 135 | return '<p>' + message + '</p>'; |
| 136 | }, |
| 137 | |
| 138 | cleanAndHideMessage: function ( domId ) { |
| 139 | var domEl = PaypalExpressCheckout.getMessageContainer( domId ); |
| 140 | domEl.setAttribute( 'class', PaypalExpressCheckout.messageCssClassName ); |
| 141 | domEl.innerHTML = ''; |
| 142 | }, |
| 143 | |
| 144 | renderButton: function ( blogId, buttonId, domId, enableMultiple ) { |
| 145 | var env = PaypalExpressCheckout.getEnvironment(); |
| 146 | |
| 147 | if ( ! paypal ) { |
| 148 | throw new Error( 'PayPal module is required by PaypalExpressCheckout' ); |
| 149 | } |
| 150 | |
| 151 | var buttonDomId = domId + '_button'; |
| 152 | |
| 153 | paypal.Button.render( |
| 154 | { |
| 155 | env: env, |
| 156 | commit: true, |
| 157 | |
| 158 | style: { |
| 159 | label: 'pay', |
| 160 | shape: 'rect', |
| 161 | color: 'silver', |
| 162 | size: 'responsive', |
| 163 | fundingicons: true, |
| 164 | }, |
| 165 | |
| 166 | payment: function () { |
| 167 | PaypalExpressCheckout.cleanAndHideMessage( domId ); |
| 168 | |
| 169 | var payload = { |
| 170 | number: PaypalExpressCheckout.getNumberOfItems( domId + '_number', enableMultiple ), |
| 171 | buttonId: buttonId, |
| 172 | env: env, |
| 173 | }; |
| 174 | |
| 175 | return new paypal.Promise( function ( resolve, reject ) { |
| 176 | jQuery |
| 177 | .post( PaypalExpressCheckout.getCreatePaymentEndpoint( blogId ), payload ) |
| 178 | .done( function ( paymentResponse ) { |
| 179 | if ( ! paymentResponse ) { |
| 180 | PaypalExpressCheckout.showError( |
| 181 | PaypalExpressCheckout.processErrorMessage(), |
| 182 | domId |
| 183 | ); |
| 184 | return reject( new Error( 'server_error' ) ); |
| 185 | } |
| 186 | |
| 187 | resolve( paymentResponse.id ); |
| 188 | } ) |
| 189 | .fail( function ( paymentError ) { |
| 190 | var paymentErrorMessage = PaypalExpressCheckout.processErrorMessage( paymentError ); |
| 191 | PaypalExpressCheckout.showError( paymentErrorMessage, domId ); |
| 192 | |
| 193 | var code = |
| 194 | paymentError.responseJSON && paymentError.responseJSON.code |
| 195 | ? paymentError.responseJSON.code |
| 196 | : 'server_error'; |
| 197 | |
| 198 | reject( new Error( code ) ); |
| 199 | } ); |
| 200 | } ); |
| 201 | }, |
| 202 | |
| 203 | onAuthorize: function ( onAuthData ) { |
| 204 | var payload = { |
| 205 | buttonId: buttonId, |
| 206 | payerId: onAuthData.payerID, |
| 207 | env: env, |
| 208 | }; |
| 209 | return new paypal.Promise( function ( resolve, reject ) { |
| 210 | jQuery |
| 211 | .post( |
| 212 | PaypalExpressCheckout.getExecutePaymentEndpoint( blogId, onAuthData.paymentID ), |
| 213 | payload |
| 214 | ) |
| 215 | .done( function ( authResponse ) { |
| 216 | if ( ! authResponse ) { |
| 217 | PaypalExpressCheckout.showError( |
| 218 | PaypalExpressCheckout.processErrorMessage(), |
| 219 | domId |
| 220 | ); |
| 221 | return reject( new Error( 'server_error' ) ); |
| 222 | } |
| 223 | |
| 224 | PaypalExpressCheckout.showMessage( |
| 225 | PaypalExpressCheckout.processSuccessMessage( authResponse ), |
| 226 | domId |
| 227 | ); |
| 228 | resolve(); |
| 229 | } ) |
| 230 | .fail( function ( authError ) { |
| 231 | var authErrorMessage = PaypalExpressCheckout.processErrorMessage( authError ); |
| 232 | PaypalExpressCheckout.showError( authErrorMessage, domId ); |
| 233 | |
| 234 | var code = |
| 235 | authError.responseJSON && authError.responseJSON.code |
| 236 | ? authError.responseJSON.code |
| 237 | : 'server_error'; |
| 238 | |
| 239 | reject( new Error( code ) ); |
| 240 | } ); |
| 241 | } ); |
| 242 | }, |
| 243 | }, |
| 244 | buttonDomId |
| 245 | ); |
| 246 | }, |
| 247 | }; |
| 248 |