_stripe_connect.js
239 lines
| 1 | /* |
| 2 | * Copyright (c) 2024 LatePoint LLC. All rights reserved. |
| 3 | */ |
| 4 | |
| 5 | class LatepointStripeConnectFront { |
| 6 | |
| 7 | // Init |
| 8 | constructor(stripeKey) { |
| 9 | this.stripeKey = stripeKey; |
| 10 | this.stripeElements = null; |
| 11 | this.stripeCore = null; |
| 12 | this.stripePaymentMethod = null; |
| 13 | this.stripeContinueOrderIntentURL = null; |
| 14 | this.stripeContinueTransactionIntentURL = null; |
| 15 | this.stripePaymentIntentSecret = null; |
| 16 | this.stripePaymentElement = null; |
| 17 | this.ready(); |
| 18 | } |
| 19 | |
| 20 | ready() { |
| 21 | jQuery(document).ready(() => { |
| 22 | jQuery('body').on('latepoint:submitBookingForm', '.latepoint-booking-form-element', (e, data) => { |
| 23 | if (!latepoint_helper.demo_mode && data.is_final_submit && data.direction == 'next') { |
| 24 | let payment_method = jQuery(e.currentTarget).find('input[name="cart[payment_method]"]').val(); |
| 25 | switch (payment_method) { |
| 26 | case 'payment_element': |
| 27 | latepoint_add_action(data.callbacks_list, async () => { |
| 28 | if (this.stripePaymentIntentSecret && this.stripeCore) { |
| 29 | return await this.confirmPaymentElementPayment(jQuery(e.currentTarget)); |
| 30 | } |
| 31 | }); |
| 32 | break; |
| 33 | } |
| 34 | } |
| 35 | }); |
| 36 | jQuery('body').on('latepoint:submitTransactionPaymentForm', '.latepoint-transaction-payment-form', (e, data) => { |
| 37 | if (data.current_step === 'pay' && data.payment_processor === 'stripe_connect' && data.payment_method === 'payment_element') { |
| 38 | latepoint_add_action(data.callbacks_list, async () => { |
| 39 | if (this.stripePaymentIntentSecret && this.stripeCore) { |
| 40 | return await this.confirmPaymentElementPaymentForTransaction(jQuery(e.currentTarget)); |
| 41 | } |
| 42 | }); |
| 43 | } |
| 44 | }); |
| 45 | |
| 46 | // INITIALIZE PAYMENT METHOD |
| 47 | jQuery('body').on('latepoint:initPaymentMethod', '.latepoint-booking-form-element', (e, data) => { |
| 48 | if (!latepoint_helper.demo_mode) { |
| 49 | switch (data.payment_method) { |
| 50 | case 'payment_element': |
| 51 | latepoint_add_action(data.callbacks_list, async () => { |
| 52 | return await this.createPaymentIntent(jQuery(e.currentTarget), data.payment_method); |
| 53 | }); |
| 54 | break; |
| 55 | } |
| 56 | } else { |
| 57 | latepoint_show_next_btn(jQuery(e.currentTarget)); |
| 58 | } |
| 59 | }); |
| 60 | // INITIALIZE PAYMENT METHOD on order payment form |
| 61 | jQuery('body').on('latepoint:initOrderPaymentMethod', '.latepoint-transaction-payment-form', (e, data) => { |
| 62 | if (data.payment_processor === 'stripe_connect') { |
| 63 | switch (data.payment_method) { |
| 64 | case 'payment_element': |
| 65 | latepoint_add_action(data.callbacks_list, async () => { |
| 66 | return await this.createPaymentIntentForTransaction(jQuery(e.currentTarget)); |
| 67 | }); |
| 68 | break; |
| 69 | } |
| 70 | } |
| 71 | }); |
| 72 | }); |
| 73 | } |
| 74 | |
| 75 | |
| 76 | async createPaymentIntentForTransaction($transaction_intent_form) { |
| 77 | |
| 78 | try { |
| 79 | this.stripeCore = Stripe(this.stripeKey, {stripeAccount: latepoint_helper.stripe_connected_account_id}); |
| 80 | this.stripeElements = this.stripeCore.elements(); |
| 81 | }catch(e){ |
| 82 | console.log(e); |
| 83 | alert(e); |
| 84 | } |
| 85 | |
| 86 | let data = latepoint_create_form_data($transaction_intent_form, latepoint_helper.stripe_connect_route_create_payment_intent_for_transaction_intent); |
| 87 | |
| 88 | let response = await jQuery.ajax({ |
| 89 | type: "post", |
| 90 | dataType: "json", |
| 91 | processData: false, |
| 92 | contentType: false, |
| 93 | url: latepoint_timestamped_ajaxurl(), |
| 94 | data: data |
| 95 | }); |
| 96 | |
| 97 | if (response.status === "success") { |
| 98 | $transaction_intent_form.find('input[name="payment_token"]').val(response.payment_intent_id); |
| 99 | this.stripePaymentIntentSecret = response.payment_intent_secret; |
| 100 | this.stripeContinueTransactionIntentURL = response.continue_transaction_intent_url; |
| 101 | latepoint_show_next_btn($transaction_intent_form); |
| 102 | |
| 103 | if ($transaction_intent_form.find('.stripe-payment-element').length) { |
| 104 | return this.initPaymentElement($transaction_intent_form); |
| 105 | } |
| 106 | } else { |
| 107 | alert(response.message); |
| 108 | throw new Error(response.message); |
| 109 | } |
| 110 | } |
| 111 | |
| 112 | async createPaymentIntent($booking_form_element, payment_method) { |
| 113 | this.stripeCore = Stripe(this.stripeKey, {stripeAccount: latepoint_helper.stripe_connected_account_id}); |
| 114 | this.stripeElements = this.stripeCore.elements(); |
| 115 | |
| 116 | let data = latepoint_create_form_data($booking_form_element.find('.latepoint-form'), latepoint_helper.stripe_connect_route_create_payment_intent, {booking_form_page_url: window.location.href}); |
| 117 | |
| 118 | let response = await jQuery.ajax({ |
| 119 | type: "post", |
| 120 | dataType: "json", |
| 121 | processData: false, |
| 122 | contentType: false, |
| 123 | url: latepoint_timestamped_ajaxurl(), |
| 124 | data: data |
| 125 | }); |
| 126 | |
| 127 | if (response.status === "success") { |
| 128 | $booking_form_element.find('input[name="cart[payment_token]"]').val(response.payment_intent_id); |
| 129 | this.stripePaymentIntentSecret = response.payment_intent_secret; |
| 130 | this.stripeContinueOrderIntentURL = response.continue_order_intent_url; |
| 131 | latepoint_show_next_btn($booking_form_element); |
| 132 | |
| 133 | if ($booking_form_element.find('.stripe-payment-element').length) { |
| 134 | return this.initPaymentElement($booking_form_element); |
| 135 | } |
| 136 | } else { |
| 137 | alert(response.message); |
| 138 | throw new Error(response.message); |
| 139 | } |
| 140 | } |
| 141 | |
| 142 | async confirmPaymentElementPaymentForTransaction($transaction_intent_form) { |
| 143 | let elements = this.stripeElements; |
| 144 | let continue_transaction_intent_url = this.stripeContinueTransactionIntentURL; |
| 145 | let result = await this.stripeCore.confirmPayment({ |
| 146 | elements, |
| 147 | confirmParams: { |
| 148 | // Return URL where the customer should be redirected after the PaymentIntent is confirmed. |
| 149 | return_url: continue_transaction_intent_url, |
| 150 | }, |
| 151 | redirect: "if_required", |
| 152 | }); |
| 153 | if (result.error) { |
| 154 | throw new Error(result.error.message); |
| 155 | } else { |
| 156 | $transaction_intent_form.find('input[name="payment_token"]').val(result.paymentIntent.id); |
| 157 | return result.paymentIntent.id; |
| 158 | } |
| 159 | } |
| 160 | |
| 161 | async confirmPaymentElementPayment($booking_form_element) { |
| 162 | let elements = this.stripeElements; |
| 163 | let continue_order_intent_url = this.stripeContinueOrderIntentURL; |
| 164 | let result = await this.stripeCore.confirmPayment({ |
| 165 | elements, |
| 166 | confirmParams: { |
| 167 | // Return URL where the customer should be redirected after the PaymentIntent is confirmed. |
| 168 | return_url: continue_order_intent_url, |
| 169 | }, |
| 170 | redirect: "if_required", |
| 171 | }); |
| 172 | if (result.error) { |
| 173 | throw new Error(result.error.message); |
| 174 | } else { |
| 175 | $booking_form_element.find('input[name="cart[payment_token]"]').val(result.paymentIntent.id); |
| 176 | return result.paymentIntent.id; |
| 177 | } |
| 178 | } |
| 179 | |
| 180 | initPaymentElement($booking_form_element) { |
| 181 | let appearance = { |
| 182 | theme: 'stripe', |
| 183 | variables: { |
| 184 | fontFamily: 'Overpass', |
| 185 | colorPrimary: '#1d7bff' |
| 186 | }, |
| 187 | rules: { |
| 188 | '.Tab': { |
| 189 | border: '1px solid #E0E6EB', |
| 190 | boxShadow: 'none', |
| 191 | borderRadius: '0', |
| 192 | marginBottom: '10px' |
| 193 | }, |
| 194 | '.Input': { |
| 195 | boxShadow: 'none', |
| 196 | borderRadius: '0' |
| 197 | }, |
| 198 | |
| 199 | '.Tab:hover': { |
| 200 | color: 'var(--colorText)', |
| 201 | }, |
| 202 | |
| 203 | '.Tab--selected': { |
| 204 | borderColor: 'var(--colorPrimary)', |
| 205 | boxShadow: `0 0 0 1px var(--colorPrimary)`, |
| 206 | }, |
| 207 | |
| 208 | '.Input--invalid': { |
| 209 | boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorPrimary)', |
| 210 | }, |
| 211 | |
| 212 | // See all supported class names and selector syntax below |
| 213 | } |
| 214 | }; |
| 215 | |
| 216 | |
| 217 | // Create an instance of the Payment Element |
| 218 | this.stripeElements = this.stripeCore.elements({ |
| 219 | clientSecret: this.stripePaymentIntentSecret, |
| 220 | appearance, |
| 221 | fonts: [{cssSrc: 'https://fonts.googleapis.com/css2?family=Overpass&display=swap'}], |
| 222 | }); |
| 223 | |
| 224 | let options = { |
| 225 | layout: { |
| 226 | type: 'tabs', |
| 227 | defaultCollapsed: false, |
| 228 | }, |
| 229 | }; |
| 230 | this.stripePaymentElement = this.stripeElements.create('payment', options); |
| 231 | |
| 232 | return this.stripePaymentElement.mount($booking_form_element.find('.stripe-payment-element')[0]); |
| 233 | } |
| 234 | |
| 235 | |
| 236 | } |
| 237 | |
| 238 | |
| 239 | if (latepoint_helper.is_stripe_connect_enabled) window.latepointStripeConnectFront = new LatepointStripeConnectFront(latepoint_helper.stripe_connect_key); |