291 lines
7.3 KiB
JavaScript
291 lines
7.3 KiB
JavaScript
/* eslint-disable */
|
|
/* global wu_stripe, Stripe */
|
|
let _stripe;
|
|
let stripeElement;
|
|
let card;
|
|
|
|
const stripeElements = function(publicKey) {
|
|
|
|
_stripe = Stripe(publicKey);
|
|
|
|
const elements = _stripe.elements();
|
|
|
|
card = elements.create('card', {
|
|
hidePostalCode: true,
|
|
});
|
|
|
|
wp.hooks.addFilter('wu_before_form_submitted', 'nextpress/wp-ultimo', function(promises, checkout, gateway) {
|
|
|
|
const cardEl = document.getElementById('card-element');
|
|
|
|
if (gateway === 'stripe' && checkout.order.totals.total > 0 && cardEl && cardEl.offsetParent) {
|
|
|
|
promises.push(new Promise( async (resolve, reject) => {
|
|
|
|
try {
|
|
|
|
const paymentMethod = await _stripe.createPaymentMethod({type: 'card', card});
|
|
|
|
if (paymentMethod.error) {
|
|
|
|
reject(paymentMethod.error);
|
|
|
|
} // end if;
|
|
|
|
} catch(err) {
|
|
|
|
} // end try;
|
|
|
|
resolve();
|
|
|
|
}));
|
|
|
|
} // end if;
|
|
|
|
return promises;
|
|
|
|
});
|
|
|
|
wp.hooks.addAction('wu_on_form_success', 'nextpress/wp-ultimo', function(checkout, results) {
|
|
|
|
if (checkout.gateway === 'stripe' && (checkout.order.totals.total > 0 || checkout.order.totals.recurring.total > 0)) {
|
|
|
|
checkout.set_prevent_submission(false);
|
|
|
|
handlePayment(checkout, results, card);
|
|
|
|
} // end if;
|
|
|
|
});
|
|
|
|
wp.hooks.addAction('wu_on_form_updated', 'nextpress/wp-ultimo', function(form) {
|
|
|
|
if (form.gateway === 'stripe') {
|
|
|
|
try {
|
|
|
|
card.mount('#card-element');
|
|
|
|
wu_stripe_update_styles(card, '#field-payment_template');
|
|
|
|
/*
|
|
* Prevents the from from submitting while Stripe is
|
|
* creating a payment source.
|
|
*/
|
|
form.set_prevent_submission(form.order && form.order.should_collect_payment && form.payment_method === 'add-new');
|
|
|
|
} catch (error) {
|
|
|
|
// Silence
|
|
|
|
} // end try;
|
|
|
|
} else {
|
|
|
|
form.set_prevent_submission(false);
|
|
|
|
try {
|
|
|
|
card.unmount('#card-element');
|
|
|
|
} catch (error) {
|
|
|
|
// Silence is golden
|
|
|
|
} // end try;
|
|
|
|
} // end if;
|
|
|
|
});
|
|
|
|
// Element focus ring
|
|
card.on('focus', function() {
|
|
|
|
const el = document.getElementById('card-element');
|
|
|
|
el.classList.add('focused');
|
|
|
|
});
|
|
|
|
card.on('blur', function() {
|
|
|
|
const el = document.getElementById('card-element');
|
|
|
|
el.classList.remove('focused');
|
|
|
|
});
|
|
|
|
};
|
|
|
|
wp.hooks.addFilter('wu_before_form_init', 'nextpress/wp-ultimo', function(data) {
|
|
|
|
data.add_new_card = wu_stripe.add_new_card;
|
|
|
|
data.payment_method = wu_stripe.payment_method;
|
|
|
|
return data;
|
|
|
|
});
|
|
|
|
wp.hooks.addAction('wu_checkout_loaded', 'nextpress/wp-ultimo', function() {
|
|
|
|
stripeElement = stripeElements(wu_stripe.pk_key);
|
|
|
|
});
|
|
|
|
/**
|
|
* Copy styles from an existing element to the Stripe Card Element.
|
|
*
|
|
* @param {Object} cardElement Stripe card element.
|
|
* @param {string} selector Selector to copy styles from.
|
|
*
|
|
* @since 3.3
|
|
*/
|
|
function wu_stripe_update_styles(cardElement, selector) {
|
|
|
|
if (undefined === typeof selector) {
|
|
|
|
selector = '#field-payment_template';
|
|
|
|
}
|
|
|
|
const inputField = document.querySelector(selector);
|
|
|
|
if (null === inputField) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (document.getElementById('wu-stripe-styles')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const inputStyles = window.getComputedStyle(inputField);
|
|
|
|
const styleTag = document.createElement('style');
|
|
|
|
styleTag.innerHTML = '.StripeElement {' +
|
|
'background-color:' + inputStyles.getPropertyValue('background-color') + ';' +
|
|
'border-top-color:' + inputStyles.getPropertyValue('border-top-color') + ';' +
|
|
'border-right-color:' + inputStyles.getPropertyValue('border-right-color') + ';' +
|
|
'border-bottom-color:' + inputStyles.getPropertyValue('border-bottom-color') + ';' +
|
|
'border-left-color:' + inputStyles.getPropertyValue('border-left-color') + ';' +
|
|
'border-top-width:' + inputStyles.getPropertyValue('border-top-width') + ';' +
|
|
'border-right-width:' + inputStyles.getPropertyValue('border-right-width') + ';' +
|
|
'border-bottom-width:' + inputStyles.getPropertyValue('border-bottom-width') + ';' +
|
|
'border-left-width:' + inputStyles.getPropertyValue('border-left-width') + ';' +
|
|
'border-top-style:' + inputStyles.getPropertyValue('border-top-style') + ';' +
|
|
'border-right-style:' + inputStyles.getPropertyValue('border-right-style') + ';' +
|
|
'border-bottom-style:' + inputStyles.getPropertyValue('border-bottom-style') + ';' +
|
|
'border-left-style:' + inputStyles.getPropertyValue('border-left-style') + ';' +
|
|
'border-top-left-radius:' + inputStyles.getPropertyValue('border-top-left-radius') + ';' +
|
|
'border-top-right-radius:' + inputStyles.getPropertyValue('border-top-right-radius') + ';' +
|
|
'border-bottom-left-radius:' + inputStyles.getPropertyValue('border-bottom-left-radius') + ';' +
|
|
'border-bottom-right-radius:' + inputStyles.getPropertyValue('border-bottom-right-radius') + ';' +
|
|
'padding-top:' + inputStyles.getPropertyValue('padding-top') + ';' +
|
|
'padding-right:' + inputStyles.getPropertyValue('padding-right') + ';' +
|
|
'padding-bottom:' + inputStyles.getPropertyValue('padding-bottom') + ';' +
|
|
'padding-left:' + inputStyles.getPropertyValue('padding-left') + ';' +
|
|
'line-height:' + inputStyles.getPropertyValue('height') + ';' +
|
|
'height:' + inputStyles.getPropertyValue('height') + ';' +
|
|
`display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;` +
|
|
'}';
|
|
|
|
styleTag.id = 'wu-stripe-styles';
|
|
|
|
document.body.appendChild(styleTag);
|
|
|
|
cardElement.update({
|
|
style: {
|
|
base: {
|
|
color: inputStyles.getPropertyValue('color'),
|
|
fontFamily: inputStyles.getPropertyValue('font-family'),
|
|
fontSize: inputStyles.getPropertyValue('font-size'),
|
|
fontWeight: inputStyles.getPropertyValue('font-weight'),
|
|
fontSmoothing: inputStyles.getPropertyValue('-webkit-font-smoothing'),
|
|
},
|
|
},
|
|
});
|
|
|
|
}
|
|
|
|
function wu_stripe_handle_intent(handler, client_secret, args) {
|
|
|
|
const _handle_error = function (e) {
|
|
|
|
wu_checkout_form.unblock();
|
|
|
|
if (e.error) {
|
|
|
|
wu_checkout_form.errors.push(e.error);
|
|
|
|
} // end if;
|
|
|
|
} // end _handle_error;
|
|
|
|
try {
|
|
|
|
_stripe[handler](client_secret, args).then(function(results) {
|
|
|
|
if (results.error) {
|
|
|
|
_handle_error(results);
|
|
|
|
return;
|
|
|
|
} // end if;
|
|
|
|
wu_checkout_form.resubmit();
|
|
|
|
}, _handle_error);
|
|
|
|
} catch(e) {} // end if;
|
|
|
|
} // end if;
|
|
|
|
/**
|
|
* After registration has been processed, handle card payments.
|
|
*
|
|
* @param form
|
|
* @param response
|
|
* @param card
|
|
*/
|
|
function handlePayment(form, response, card) {
|
|
|
|
// Trigger error if we don't have a client secret.
|
|
if (! response.gateway.data.stripe_client_secret) {
|
|
|
|
return;
|
|
|
|
} // end if;
|
|
|
|
const handler = 'payment_intent' === response.gateway.data.stripe_intent_type ? 'confirmCardPayment' : 'confirmCardSetup';
|
|
|
|
const args = {
|
|
payment_method: form.payment_method !== 'add-new' ? form.payment_method : {
|
|
card,
|
|
billing_details: {
|
|
name: response.customer.display_name,
|
|
email: response.customer.user_email,
|
|
address: {
|
|
country: response.customer.billing_address_data.billing_country,
|
|
postal_code: response.customer.billing_address_data.billing_zip_code,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Handle payment intent / setup intent.
|
|
*/
|
|
wu_stripe_handle_intent(
|
|
handler, response.gateway.data.stripe_client_secret, args
|
|
);
|
|
|
|
}
|