PayPlug for WooCommerce (Official) / 3.1.0

PayPlug for WooCommerce (Official) v3.1.0

payplug / resources / js / frontend / wc-payplug-apple_pay_cart-blocks.js

wc-payplug-apple_pay_cart-blocks.js in PayPlug for WooCommerce (Official) 3.1.0, at resources/js/frontend/wc-payplug-apple_pay_cart-blocks.js

221 lines 6.2 KB

Raw Download Zip

1	import { useEffect, useRef } from 'react';
2	import { getSetting } from '@woocommerce/settings';
3	import { apple_pay_CancelOrder, apple_pay_Payment, apple_pay_PlaceOrderWithDummyData, apple_pay_UpdateOrder, apple_pay_get_shippings } from "./helper/wc-payplug-apple_pay-requests";
4	const settings = getSetting( 'apple_pay_data', {} );
5
6	const ApplePayCart = ( props ) =>{
7
8	// A plain local variable would be reset on every re-render, but it's read from
9	// async callbacks/DOM handlers that can fire well after a re-render has happened.
10	const sessionRef = useRef(null);
11	let apple_pay_Session_status = null;
12	// Same reasoning as sessionRef: fetched asynchronously in an effect below, then read
13	// later from CreateSession(), which can run after a re-render has reset a plain variable.
14	const carriersRef = useRef([]);
15	const apple_pay_wrapper = jQuery("#apple-pay-button-wrapper");
16	const apple_pay = {
17	load_order_total: false,
18	OrderPaymentCreated: function (response) {
19	if ('success' !== response.payment_data.result) {
20	apple_pay.CancelOrder();
21	}
22
23	apple_pay.BeginSession(response)
24	},
25	CreateSession: function () {
26	const request = {
27	"countryCode": settings.countryCode,
28	"currencyCode": settings.currencyCode,
29	"merchantCapabilities": [
30	"supports3DS"
31	],
32	"supportedNetworks": [
33	"visa",
34	"masterCard"
35	],
36	"total": {
37	"label": "Apple Pay",
38	"type": "final",
39	"amount": parseFloat(settings.total_amount/100)
40	},
41	'applicationData': btoa(JSON.stringify({
42	'apple_pay_domain': settings.apple_pay_domain
43	})),
44	'requiredBillingContactFields' : [
45	'postalAddress',
46	'name',
47	],
48	}
49	request.requiredShippingContactFields = [
50	"postalAddress",
51	"name",
52	"phone",
53	"email"
54	];
55
56	if (settings.payplug_apple_pay_shipping_required) {
57
58	request.shippingMethods = carriersRef.current;
59
60	}
61	sessionRef.current = new ApplePaySession(4, request);
62
63	},
64	CancelOrder: function () {
65	sessionRef.current.oncancel = event => {
66	apple_pay_CancelOrder({'order_id': sessionRef.current.order_id, 'payment_id': sessionRef.current.payment_id}).then(() => {
67	enabled_button();
68	});
69	}
70	},
71	BeginSession: function (response) {
72	const session = sessionRef.current;
73	session.payment_id = response.payment_data.payment_id
74	session.order_id = response.order_id
75	session.cancel_url = response.payment_data.cancel_url
76	session.return_url = response.payment_data.return_url
77	apple_pay.MerchantValidated(session, response.payment_data.merchant_session);
78
79	session.amount = parseFloat(settings.total/100) * 100;
80	session.onshippingmethodselected = event => {
81
82	const shippingMethod = event.shippingMethod;
83	session.shippingMethod = shippingMethod.identifier;
84
85	const baseTotal = settings.total/100 ;
86	let currentShippingCost = shippingMethod.amount;
87
88	const newTotalAmount = parseFloat(baseTotal) + parseFloat(currentShippingCost);
89	session.amount = newTotalAmount * 100;
90
91	const update = {
92	newTotal: {
93	label: 'Apple Pay',
94	amount: newTotalAmount
95	},
96	newLineItems: [
97	{
98	label: shippingMethod.label,
99	type: 'final',
100	amount: currentShippingCost
101	}
102	]
103	};
104
105	session.completeShippingMethodSelection(update);
106	};
107	session.begin();
108	},
109	MerchantValidated: function(session, merchant_session) {
110	session.onvalidatemerchant = event => {
111	try {
112	session.completeMerchantValidation(merchant_session);
113	} catch (err) {
114	apple_pay.CancelOrder();
115	}
116	}
117	},
118	AddErrorMessage: function(message){
119	apple_pay_wrapper.append(jQuery('<div class="apple-pay-cart-notice"></div>').append(jQuery('<span></span>').text(message)));
120	},
121	DeleteErrorMessage: function(){
122	setTimeout(function () {
123	jQuery('.apple-pay-cart-notice').remove();
124	}, 4000);
125	}
126	}
127
128	function CheckPaymentOnPaymentAuthorized() {
129	return new Promise((resolve, reject) => {
130	sessionRef.current.onpaymentauthorized = event => {
131	let event_data = event.payment;
132
133	let data = {
134	'order_id': sessionRef.current.order_id,
135	'shipping' : event_data.shippingContact,
136	'billing' : event_data.billingContact,
137	'shipping_method' : sessionRef.current.shippingMethod
138	};
139
140	apple_pay_UpdateOrder(data).then( (result_order) => {
141	data = {
142	'action': 'applepay_update_payment',
143	'post_type': 'POST',
144	'payment_id': sessionRef.current.payment_id,
145	'payment_token': event.payment.token,
146	'order_id': sessionRef.current.order_id,
147	'amount': sessionRef.current.amount / 100
148	}
149
150	apple_pay_Payment(data).then((result_payment) => {
151
152	apple_pay_Session_status = ApplePaySession.STATUS_SUCCESS;
153
154	if (result_payment.success !== true) {
155	apple_pay_Session_status = ApplePaySession.STATUS_FAILURE;
156	apple_pay.AddErrorMessage(result_payment.data.message)
157	apple_pay.DeleteErrorMessage();
158	apple_pay.CancelOrder()
159	}
160	sessionRef.current.completePayment({"status": apple_pay_Session_status})
161	resolve();
162	});
163	});
164	}
165	})
166	}
167
168	useEffect(() => {
169	apple_pay_get_shippings().then((result_shippings) => {
170	carriersRef.current = result_shippings.data;
171	});
172	}, []);
173
174	function disabled_button(){
175	jQuery('apple-pay-button').addClass("isDisabled");
176	}
177
178	function enabled_button(){
179	jQuery('apple-pay-button').removeClass("isDisabled");
180	}
181
182	useEffect(() => {
183	const btn = document.getElementById('apple-pay-button');
184	const onApplePayButtonClick = (e) => {
185	e.preventDefault();
186	e.stopImmediatePropagation();
187	disabled_button();
188
189	apple_pay.CreateSession();
190	apple_pay.CancelOrder();
191	apple_pay_PlaceOrderWithDummyData().then(async (response) => {
192	if (response.success === false) {
193	apple_pay.AddErrorMessage(response.data.message)
194	apple_pay.DeleteErrorMessage();
195	enabled_button();
196	return;
197	}
198	settings.total = response.total
199	apple_pay.OrderPaymentCreated(response);
200
201	await CheckPaymentOnPaymentAuthorized().then((res) => {
202	window.location = sessionRef.current.return_url
203	});
204
205	});
206	};
207	if (btn) {
208	btn.addEventListener('click', onApplePayButtonClick);
209	}
210	return () => {
211	if (btn) {
212	btn.removeEventListener('click', onApplePayButtonClick);
213	}
214	};
215	}, []);
216
217	return (<> </>);
218	}
219
220	export default ApplePayCart;
221