Initial Commit
This commit is contained in:
David Stone
290
assets/js/gateways/stripe.js
Normal file
290
assets/js/gateways/stripe.js
Normal file
@ -0,0 +1,290 @@
|
||||
/* 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
|
||||
);
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user