← All changes | modules/simple-payments/paypal-express-checkout.js +247 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,247 @@
	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	+};