Initial commit
diff --git a/assets/js/stripe.js b/assets/js/stripe.js
new file mode 100644
index 0000000..f055320
--- /dev/null
+++ b/assets/js/stripe.js
@@ -0,0 +1,1041 @@
+/* global wc_stripe_params */
+
+jQuery( function( $ ) {
+ 'use strict';
+
+ try {
+ var stripe = Stripe( wc_stripe_params.key, {
+ locale: wc_stripe_params.stripe_locale || 'auto',
+ } );
+ } catch( error ) {
+ console.log( error );
+ return;
+ }
+
+ var stripe_elements_options = Object.keys( wc_stripe_params.elements_options ).length ? wc_stripe_params.elements_options : {},
+ sepa_elements_options = Object.keys( wc_stripe_params.sepa_elements_options ).length ? wc_stripe_params.sepa_elements_options : {},
+ elements = stripe.elements( stripe_elements_options ),
+ iban = elements.create( 'iban', sepa_elements_options ),
+ stripe_card,
+ stripe_exp,
+ stripe_cvc;
+
+ /**
+ * Object to handle Stripe elements payment form.
+ */
+ var wc_stripe_form = {
+ /**
+ * Get WC AJAX endpoint URL.
+ *
+ * @param {String} endpoint Endpoint.
+ * @return {String}
+ */
+ getAjaxURL: function( endpoint ) {
+ return wc_stripe_params.ajaxurl
+ .toString()
+ .replace( '%%endpoint%%', 'wc_stripe_' + endpoint );
+ },
+
+ /**
+ * Unmounts all Stripe elements when the checkout page is being updated.
+ */
+ unmountElements: function() {
+ if ( 'yes' === wc_stripe_params.inline_cc_form ) {
+ stripe_card.unmount( '#stripe-card-element' );
+ } else {
+ stripe_card.unmount( '#stripe-card-element' );
+ stripe_exp.unmount( '#stripe-exp-element' );
+ stripe_cvc.unmount( '#stripe-cvc-element' );
+ }
+ },
+
+ /**
+ * Mounts all elements to their DOM nodes on initial loads and updates.
+ */
+ mountElements: function() {
+ if ( ! $( '#stripe-card-element' ).length ) {
+ return;
+ }
+
+ if ( 'yes' === wc_stripe_params.inline_cc_form ) {
+ stripe_card.mount( '#stripe-card-element' );
+ return;
+ }
+
+ stripe_card.mount( '#stripe-card-element' );
+ stripe_exp.mount( '#stripe-exp-element' );
+ stripe_cvc.mount( '#stripe-cvc-element' );
+ },
+
+ /**
+ * Creates all Stripe elements that will be used to enter cards or IBANs.
+ */
+ createElements: function() {
+ var elementStyles = {
+ base: {
+ iconColor: '#666EE8',
+ color: '#31325F',
+ fontSize: '15px',
+ '::placeholder': {
+ color: '#CFD7E0',
+ }
+ }
+ };
+
+ var elementClasses = {
+ focus: 'focused',
+ empty: 'empty',
+ invalid: 'invalid',
+ };
+
+ elementStyles = wc_stripe_params.elements_styling ? wc_stripe_params.elements_styling : elementStyles;
+ elementClasses = wc_stripe_params.elements_classes ? wc_stripe_params.elements_classes : elementClasses;
+
+ if ( 'yes' === wc_stripe_params.inline_cc_form ) {
+ stripe_card = elements.create( 'card', { style: elementStyles, hidePostalCode: true } );
+
+ stripe_card.addEventListener( 'change', function( event ) {
+ wc_stripe_form.onCCFormChange();
+
+ if ( event.error ) {
+ $( document.body ).trigger( 'stripeError', event );
+ }
+ } );
+ } else {
+ stripe_card = elements.create( 'cardNumber', { style: elementStyles, classes: elementClasses } );
+ stripe_exp = elements.create( 'cardExpiry', { style: elementStyles, classes: elementClasses } );
+ stripe_cvc = elements.create( 'cardCvc', { style: elementStyles, classes: elementClasses } );
+
+ stripe_card.addEventListener( 'change', function( event ) {
+ wc_stripe_form.onCCFormChange();
+
+ wc_stripe_form.updateCardBrand( event.brand );
+
+ if ( event.error ) {
+ $( document.body ).trigger( 'stripeError', event );
+ }
+ } );
+
+ stripe_exp.addEventListener( 'change', function( event ) {
+ wc_stripe_form.onCCFormChange();
+
+ if ( event.error ) {
+ $( document.body ).trigger( 'stripeError', event );
+ }
+ } );
+
+ stripe_cvc.addEventListener( 'change', function( event ) {
+ wc_stripe_form.onCCFormChange();
+
+ if ( event.error ) {
+ $( document.body ).trigger( 'stripeError', event );
+ }
+ } );
+ }
+
+ /**
+ * Only in checkout page we need to delay the mounting of the
+ * card as some AJAX process needs to happen before we do.
+ */
+ if ( 'yes' === wc_stripe_params.is_checkout ) {
+ $( document.body ).on( 'updated_checkout', function() {
+ // Don't re-mount if already mounted in DOM.
+ if ( $( '#stripe-card-element' ).children().length ) {
+ return;
+ }
+
+ // Unmount prior to re-mounting.
+ if ( stripe_card ) {
+ wc_stripe_form.unmountElements();
+ }
+
+ wc_stripe_form.mountElements();
+
+ if ( $( '#stripe-iban-element' ).length ) {
+ iban.mount( '#stripe-iban-element' );
+ }
+ } );
+ } else if ( $( 'form#add_payment_method' ).length || $( 'form#order_review' ).length ) {
+ wc_stripe_form.mountElements();
+
+ if ( $( '#stripe-iban-element' ).length ) {
+ iban.mount( '#stripe-iban-element' );
+ }
+ }
+ },
+
+ /**
+ * Updates the card brand logo with non-inline CC forms.
+ *
+ * @param {string} brand The identifier of the chosen brand.
+ */
+ updateCardBrand: function( brand ) {
+ var brandClass = {
+ 'visa': 'stripe-visa-brand',
+ 'mastercard': 'stripe-mastercard-brand',
+ 'amex': 'stripe-amex-brand',
+ 'discover': 'stripe-discover-brand',
+ 'diners': 'stripe-diners-brand',
+ 'jcb': 'stripe-jcb-brand',
+ 'unknown': 'stripe-credit-card-brand'
+ };
+
+ var imageElement = $( '.stripe-card-brand' ),
+ imageClass = 'stripe-credit-card-brand';
+
+ if ( brand in brandClass ) {
+ imageClass = brandClass[ brand ];
+ }
+
+ // Remove existing card brand class.
+ $.each( brandClass, function( index, el ) {
+ imageElement.removeClass( el );
+ } );
+
+ imageElement.addClass( imageClass );
+ },
+
+ /**
+ * Initialize event handlers and UI state.
+ */
+ init: function() {
+ // Initialize tokenization script if on change payment method page and pay for order page.
+ if ( 'yes' === wc_stripe_params.is_change_payment_page || 'yes' === wc_stripe_params.is_pay_for_order_page ) {
+ $( document.body ).trigger( 'wc-credit-card-form-init' );
+ }
+
+ // checkout page
+ if ( $( 'form.woocommerce-checkout' ).length ) {
+ this.form = $( 'form.woocommerce-checkout' );
+ }
+
+ $( 'form.woocommerce-checkout' )
+ .on(
+ 'checkout_place_order_stripe checkout_place_order_stripe_bancontact checkout_place_order_stripe_sofort checkout_place_order_stripe_giropay checkout_place_order_stripe_ideal checkout_place_order_stripe_alipay checkout_place_order_stripe_sepa checkout_place_order_stripe_boleto checkout_place_order_stripe_oxxo',
+ this.onSubmit
+ );
+
+ // pay order page
+ if ( $( 'form#order_review' ).length ) {
+ this.form = $( 'form#order_review' );
+ }
+
+ $( 'form#order_review, form#add_payment_method' )
+ .on(
+ 'submit',
+ this.onSubmit
+ );
+
+ // add payment method page
+ if ( $( 'form#add_payment_method' ).length ) {
+ this.form = $( 'form#add_payment_method' );
+ }
+
+ $( 'form.woocommerce-checkout' )
+ .on(
+ 'change',
+ this.reset
+ );
+
+ $( document )
+ .on(
+ 'stripeError',
+ this.onError
+ )
+ .on(
+ 'checkout_error',
+ this.reset
+ );
+
+ // SEPA IBAN.
+ iban.on( 'change',
+ this.onSepaError
+ );
+
+ // Subscription early renewals modal.
+ if ($('#early_renewal_modal_submit[data-payment-method]').length) {
+ $('#early_renewal_modal_submit[data-payment-method=stripe]').on('click', this.onEarlyRenewalSubmit);
+ } else {
+ $('#early_renewal_modal_submit').on('click', this.onEarlyRenewalSubmit);
+ }
+
+ wc_stripe_form.createElements();
+
+ // Listen for hash changes in order to handle payment intents
+ window.addEventListener( 'hashchange', wc_stripe_form.onHashChange );
+ wc_stripe_form.maybeConfirmIntent();
+
+ //Mask CPF/CNPJ field when using Boleto
+ $( document ).on( 'change', '.wc_payment_methods', function () {
+ if ( ! $( '#stripe_boleto_tax_id' ).length ) {
+ return;
+ }
+
+ var TaxIdMaskBehavior = function ( val ) {
+ return val.replace( /\D/g, '' ).length >= 12 ? '00.000.000/0000-00' : '000.000.000-009999';
+ },
+ spOptions = {
+ onKeyPress: function ( val, e, field, options ) {
+ field.mask( TaxIdMaskBehavior.apply( {}, arguments ), options );
+ }
+ };
+
+ $( '#stripe_boleto_tax_id' ).mask( TaxIdMaskBehavior, spOptions );
+ });
+ },
+
+ /**
+ * Check to see if Stripe in general is being used for checkout.
+ *
+ * @return {boolean}
+ */
+ isStripeChosen: function() {
+ return $( '#payment_method_stripe, #payment_method_stripe_bancontact, #payment_method_stripe_sofort, #payment_method_stripe_giropay, #payment_method_stripe_ideal, #payment_method_stripe_alipay, #payment_method_stripe_sepa, #payment_method_stripe_eps, #payment_method_stripe_multibanco, #payment_method_stripe_boleto, #payment_method_stripe_oxxo' ).is( ':checked' ) || ( $( '#payment_method_stripe' ).is( ':checked' ) && 'new' === $( 'input[name="wc-stripe-payment-token"]:checked' ).val() ) || ( $( '#payment_method_stripe_sepa' ).is( ':checked' ) && 'new' === $( 'input[name="wc-stripe-payment-token"]:checked' ).val() );
+ },
+
+ /**
+ * Currently only support saved cards via credit cards and SEPA. No other payment method.
+ *
+ * @return {boolean}
+ */
+ isStripeSaveCardChosen: function() {
+ return (
+ $( '#payment_method_stripe' ).is( ':checked' ) &&
+ $( 'input[name="wc-stripe-payment-token"]' ).is( ':checked' ) &&
+ 'new' !== $( 'input[name="wc-stripe-payment-token"]:checked' ).val()
+ ) || (
+ $( '#payment_method_stripe_sepa' ).is( ':checked' ) &&
+ $( 'input[name="wc-stripe_sepa-payment-token"]' ).is( ':checked' ) &&
+ 'new' !== $( 'input[name="wc-stripe_sepa-payment-token"]:checked' ).val()
+ );
+ },
+
+ /**
+ * Check if Stripe credit card is being used.
+ *
+ * @return {boolean}
+ */
+ isStripeCardChosen: function() {
+ return $( '#payment_method_stripe' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe Bancontact is being used.
+ *
+ * @return {boolean}
+ */
+ isBancontactChosen: function() {
+ return $( '#payment_method_stripe_bancontact' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe giropay is being used.
+ *
+ * @return {boolean}
+ */
+ isGiropayChosen: function() {
+ return $( '#payment_method_stripe_giropay' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe iDEAL is being used.
+ *
+ * @return {boolean}
+ */
+ isIdealChosen: function() {
+ return $( '#payment_method_stripe_ideal' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe Sofort is being used.
+ *
+ * @return {boolean}
+ */
+ isSofortChosen: function() {
+ return $( '#payment_method_stripe_sofort' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe Alipay is being used.
+ *
+ * @return {boolean}
+ */
+ isAlipayChosen: function() {
+ return $( '#payment_method_stripe_alipay' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe SEPA Direct Debit is being used.
+ *
+ * @return {boolean}
+ */
+ isSepaChosen: function() {
+ return $( '#payment_method_stripe_sepa' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe P24 is being used.
+ *
+ * @return {boolean}
+ */
+ isP24Chosen: function() {
+ return $( '#payment_method_stripe_p24' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe EPS is being used.
+ *
+ * @return {boolean}
+ */
+ isEpsChosen: function() {
+ return $( '#payment_method_stripe_eps' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe Multibanco is being used.
+ *
+ * @return {boolean}
+ */
+ isMultibancoChosen: function() {
+ return $( '#payment_method_stripe_multibanco' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe Boleto is being used.
+ *
+ * @return {boolean}
+ */
+ isBoletoChosen: function() {
+ return $( '#payment_method_stripe_boleto' ).is( ':checked' );
+ },
+
+ /**
+ * Check if Stripe OXXO is being used.
+ *
+ * @return {boolean}
+ */
+ isOxxoChosen: function() {
+ return $( '#payment_method_stripe_oxxo' ).is( ':checked' );
+ },
+
+ /**
+ * Checks if a source ID is present as a hidden input.
+ * Only used when SEPA Direct Debit is chosen.
+ *
+ * @return {boolean}
+ */
+ hasSource: function() {
+ return 0 < $( 'input.stripe-source' ).length;
+ },
+
+ /**
+ * Check whether a mobile device is being used.
+ *
+ * @return {boolean}
+ */
+ isMobile: function() {
+ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ) {
+ return true;
+ }
+
+ return false;
+ },
+
+ /**
+ * Blocks payment forms with an overlay while being submitted.
+ */
+ block: function() {
+ if ( ! wc_stripe_form.isMobile() ) {
+ wc_stripe_form.form.block( {
+ message: null,
+ overlayCSS: {
+ background: '#fff',
+ opacity: 0.6
+ }
+ } );
+ }
+ },
+
+ /**
+ * Removes overlays from payment forms.
+ */
+ unblock: function() {
+ wc_stripe_form.form && wc_stripe_form.form.unblock();
+ },
+
+ /**
+ * Returns the selected payment method HTML element.
+ *
+ * @return {HTMLElement}
+ */
+ getSelectedPaymentElement: function() {
+ return $( '.payment_methods input[name="payment_method"]:checked' );
+ },
+
+ /**
+ * Retrieves "owner" data from either the billing fields in a form or preset settings.
+ *
+ * @return {Object}
+ */
+ getOwnerDetails: function() {
+ var first_name = $( '#billing_first_name' ).length ? $( '#billing_first_name' ).val() : wc_stripe_params.billing_first_name,
+ last_name = $( '#billing_last_name' ).length ? $( '#billing_last_name' ).val() : wc_stripe_params.billing_last_name,
+ owner = { name: '', address: {}, email: '', phone: '' };
+
+ owner.name = first_name;
+
+ if ( first_name && last_name ) {
+ owner.name = first_name + ' ' + last_name;
+ } else {
+ owner.name = $( '#stripe-payment-data' ).data( 'full-name' );
+ }
+
+ owner.email = $( '#billing_email' ).val();
+ owner.phone = $( '#billing_phone' ).val();
+
+ /* Stripe does not like empty string values so
+ * we need to remove the parameter if we're not
+ * passing any value.
+ */
+ if ( typeof owner.phone === 'undefined' || 0 >= owner.phone.length ) {
+ delete owner.phone;
+ }
+
+ if ( typeof owner.email === 'undefined' || 0 >= owner.email.length ) {
+ if ( $( '#stripe-payment-data' ).data( 'email' ).length ) {
+ owner.email = $( '#stripe-payment-data' ).data( 'email' );
+ } else {
+ delete owner.email;
+ }
+ }
+
+ if ( typeof owner.name === 'undefined' || 0 >= owner.name.length ) {
+ delete owner.name;
+ }
+
+ owner.address.line1 = $( '#billing_address_1' ).val() || wc_stripe_params.billing_address_1;
+ owner.address.line2 = $( '#billing_address_2' ).val() || wc_stripe_params.billing_address_2;
+ owner.address.state = $( '#billing_state' ).val() || wc_stripe_params.billing_state;
+ owner.address.city = $( '#billing_city' ).val() || wc_stripe_params.billing_city;
+ owner.address.postal_code = $( '#billing_postcode' ).val() || wc_stripe_params.billing_postcode;
+ owner.address.country = $( '#billing_country' ).val() || wc_stripe_params.billing_country;
+
+ return {
+ owner: owner,
+ };
+ },
+
+ /**
+ * Initiates the creation of a Source object.
+ *
+ * Currently this is only used for credit cards and SEPA Direct Debit,
+ * all other payment methods work with redirects to create sources.
+ */
+ createSource: function() {
+ var extra_details = wc_stripe_form.getOwnerDetails();
+
+ // Handle SEPA Direct Debit payments.
+ if ( wc_stripe_form.isSepaChosen() ) {
+ extra_details.currency = $( '#stripe-sepa_debit-payment-data' ).data( 'currency' );
+ extra_details.mandate = { notification_method: wc_stripe_params.sepa_mandate_notification };
+ extra_details.type = 'sepa_debit';
+
+ return stripe.createSource( iban, extra_details ).then( wc_stripe_form.sourceResponse );
+ }
+
+ // Handle card payments.
+ return stripe.createSource( stripe_card, extra_details )
+ .then( wc_stripe_form.sourceResponse );
+ },
+
+ /**
+ * Handles responses, based on source object.
+ *
+ * @param {Object} response The `stripe.createSource` response.
+ */
+ sourceResponse: function( response ) {
+ if ( response.error ) {
+ $( document.body ).trigger( 'stripeError', response );
+ return;
+ }
+
+ wc_stripe_form.reset();
+
+ wc_stripe_form.form.append(
+ $( '<input type="hidden" />' )
+ .addClass( 'stripe-source' )
+ .attr( 'name', 'stripe_source' )
+ .val( response.source.id )
+ );
+
+ if ( $( 'form#add_payment_method' ).length || $( '#wc-stripe-change-payment-method' ).length ) {
+ wc_stripe_form.sourceSetup( response );
+ return;
+ }
+
+ wc_stripe_form.form.trigger( 'submit' );
+ },
+
+ /**
+ * Authenticate Source if necessary by creating and confirming a SetupIntent.
+ *
+ * @param {Object} response The `stripe.createSource` response.
+ */
+ sourceSetup: function( response ) {
+ var apiError = {
+ error: {
+ type: 'api_connection_error'
+ }
+ };
+
+ $.post( {
+ url: wc_stripe_form.getAjaxURL( 'create_setup_intent'),
+ dataType: 'json',
+ data: {
+ stripe_source_id: response.source.id,
+ nonce: wc_stripe_params.add_card_nonce,
+ },
+ error: function() {
+ $( document.body ).trigger( 'stripeError', apiError );
+ }
+ } ).done( function( serverResponse ) {
+ if ( 'success' === serverResponse.status ) {
+ if ( $( 'form#add_payment_method' ).length ) {
+ $( wc_stripe_form.form ).off( 'submit', wc_stripe_form.form.onSubmit );
+ }
+ wc_stripe_form.form.trigger( 'submit' );
+ return;
+ } else if ( 'requires_action' !== serverResponse.status ) {
+ $( document.body ).trigger( 'stripeError', serverResponse );
+ return;
+ }
+
+ stripe.confirmCardSetup( serverResponse.client_secret, { payment_method: response.source.id } )
+ .then( function( result ) {
+ if ( result.error ) {
+ $( document.body ).trigger( 'stripeError', result );
+ return;
+ }
+
+ if ( $( 'form#add_payment_method' ).length ) {
+ $( wc_stripe_form.form ).off( 'submit', wc_stripe_form.form.onSubmit );
+ }
+ wc_stripe_form.form.trigger( 'submit' );
+ } )
+ .catch( function( err ) {
+ console.log( err );
+ $( document.body ).trigger( 'stripeError', { error: err } );
+ } );
+ } );
+ },
+
+ /**
+ * Performs payment-related actions when a checkout/payment form is being submitted.
+ *
+ * @return {boolean} An indicator whether the submission should proceed.
+ * WooCommerce's checkout.js stops only on `false`, so this needs to be explicit.
+ */
+ onSubmit: function() {
+ if ( ! wc_stripe_form.isStripeChosen() ) {
+ return true;
+ }
+
+ // If a source is already in place, submit the form as usual.
+ if ( wc_stripe_form.isStripeSaveCardChosen() || wc_stripe_form.hasSource() ) {
+ return true;
+ }
+
+ // For methods that needs redirect, we will create the source server side so we can obtain the order ID.
+ if (
+ wc_stripe_form.isBancontactChosen() ||
+ wc_stripe_form.isGiropayChosen() ||
+ wc_stripe_form.isIdealChosen() ||
+ wc_stripe_form.isAlipayChosen() ||
+ wc_stripe_form.isSofortChosen() ||
+ wc_stripe_form.isP24Chosen() ||
+ wc_stripe_form.isEpsChosen() ||
+ wc_stripe_form.isMultibancoChosen()
+ ) {
+ return true;
+ }
+
+ wc_stripe_form.block();
+
+ if( wc_stripe_form.isBoletoChosen() ) {
+ if( ! $( '#stripe_boleto_tax_id' ).val() ) {
+ wc_stripe_form.submitError( wc_stripe_params.cpf_cnpj_required_msg );
+ wc_stripe_form.unblock();
+ return false;
+ }
+
+ wc_stripe_form.handleBoleto();
+ } else if ( wc_stripe_form.isOxxoChosen() ) {
+ wc_stripe_form.handleOxxo();
+ } else {
+ wc_stripe_form.createSource();
+ }
+
+ return false;
+ },
+
+ /**
+ * Will show a modal for printing the Boleto.
+ * After the customer closes the modal proceeds with checkout normally
+ */
+ handleBoleto: function () {
+ wc_stripe_form.executeCheckout( 'boleto', function ( checkout_response ) {
+ stripe.confirmBoletoPayment(
+ checkout_response.client_secret,
+ checkout_response.confirm_payment_data
+ )
+ .then(function ( response ) {
+ wc_stripe_form.handleConfirmResponse( checkout_response, response );
+ });
+ } );
+ },
+
+ /**
+ * Executes the checkout and then execute the callback instead of redirect to success page
+ * @param callback
+ */
+ executeCheckout: function ( payment_method, callback ) {
+ const formFields = wc_stripe_form.form.serializeArray().reduce( ( obj, field ) => {
+ obj[ field.name ] = field.value;
+ return obj;
+ }, {} );
+
+ if( wc_stripe_form.form.attr('id') === 'order_review' ) {
+ formFields._ajax_nonce = wc_stripe_params.updatePaymentIntentNonce;
+ formFields.order_id = wc_stripe_params.orderId;
+
+ $.ajax( {
+ url: wc_stripe_form.getAjaxURL( payment_method + '_update_payment_intent' ),
+ type: 'POST',
+ data: formFields,
+ success: function ( response ) {
+
+ if( 'success' !== response.result ) {
+ wc_stripe_form.submitError( response.messages );
+ wc_stripe_form.unblock();
+ return;
+ }
+
+ callback( response );
+ }
+ } );
+
+ } else {
+ $.ajax( {
+ url: wc_stripe_params.checkout_url,
+ type: 'POST',
+ data: formFields,
+ success: function ( checkout_response ) {
+
+ if( 'success' !== checkout_response.result ) {
+ wc_stripe_form.submitError( checkout_response.messages, true );
+ wc_stripe_form.unblock();
+ return;
+ }
+
+ callback( checkout_response );
+ }
+ } );
+ }
+ },
+
+ /**
+ * Handles response of the Confirm<payment_method>Payment like confirmBoletoPayment and confirmOxxoPayment
+ * @param checkout_response
+ * @param response
+ */
+ handleConfirmResponse: function ( checkout_response, response ) {
+ if ( response.error ) {
+ $( document.body ).trigger( 'stripeError', response );
+ return;
+ }
+
+ if ( -1 === checkout_response.redirect.indexOf( 'https://' ) || -1 === checkout_response.redirect.indexOf( 'http://' ) ) {
+ window.location = checkout_response.redirect;
+ } else {
+ window.location = decodeURI( checkout_response.redirect );
+ }
+ },
+
+ /**
+ * Will show a modal for printing the OXXO Voucher.
+ * After the customer closes the modal proceeds with checkout normally
+ */
+ handleOxxo: function () {
+ wc_stripe_form.executeCheckout( 'oxxo', function ( checkout_response ) {
+ stripe.confirmOxxoPayment(
+ checkout_response.client_secret,
+ checkout_response.confirm_payment_data
+ )
+ .then(function (response) {
+ wc_stripe_form.handleConfirmResponse( checkout_response, response );
+ } );
+ } );
+ },
+
+ /**
+ * If a new credit card is entered, reset sources.
+ */
+ onCCFormChange: function() {
+ wc_stripe_form.reset();
+ },
+
+ /**
+ * Removes all Stripe errors and hidden fields with IDs from the form.
+ */
+ reset: function() {
+ $( '.wc-stripe-error, .stripe-source' ).remove();
+ },
+
+ /**
+ * Displays a SEPA-specific error message.
+ *
+ * @param {Event} e The event with the error.
+ */
+ onSepaError: function( e ) {
+ var errorContainer = wc_stripe_form.getSelectedPaymentElement().parents( 'li' ).eq( 0 ).find( '.stripe-source-errors' );
+
+ if ( ! e.error ) {
+ $( errorContainer ).html( '' );
+ return;
+ }
+
+ console.log( e.error.message ); // Leave for troubleshooting.
+ $( errorContainer ).html( '<ul class="woocommerce_error woocommerce-error wc-stripe-error"><li /></ul>' );
+ $( errorContainer ).find( 'li' ).text( e.error.message ); // Prevent XSS
+ },
+
+ /**
+ * Displays stripe-related errors.
+ *
+ * @param {Event} e The jQuery event.
+ * @param {Object} result The result of Stripe call.
+ */
+ onError: function( e, result ) {
+ var message = result.error.message;
+ var selectedMethodElement = wc_stripe_form.getSelectedPaymentElement().closest( 'li' );
+ var savedTokens = selectedMethodElement.find( '.woocommerce-SavedPaymentMethods-tokenInput' );
+ var errorContainer;
+
+ var prButtonClicked = $( 'body' ).hasClass( 'woocommerce-stripe-prb-clicked' );
+ if ( prButtonClicked ) {
+ // If payment was initiated with a payment request button, display errors in the notices div.
+ $( 'body' ).removeClass( 'woocommerce-stripe-prb-clicked' );
+ errorContainer = $( 'div.woocommerce-notices-wrapper' ).first();
+ } else if ( savedTokens.length ) {
+ // In case there are saved cards too, display the message next to the correct one.
+ var selectedToken = savedTokens.filter( ':checked' );
+
+ if ( selectedToken.closest( '.woocommerce-SavedPaymentMethods-new' ).length ) {
+ // Display the error next to the CC fields if a new card is being entered.
+ errorContainer = $( '#wc-stripe-cc-form .stripe-source-errors' );
+ } else {
+ // Display the error next to the chosen saved card.
+ errorContainer = selectedToken.closest( 'li' ).find( '.stripe-source-errors' );
+ }
+ } else {
+ // When no saved cards are available, display the error next to CC fields.
+ errorContainer = selectedMethodElement.find( '.stripe-source-errors' );
+ }
+
+ /*
+ * If payment method is SEPA and owner name is not completed,
+ * source cannot be created. So we need to show the normal
+ * Billing name is required error message on top of form instead
+ * of inline.
+ */
+ if ( wc_stripe_form.isSepaChosen() ) {
+ if ( 'invalid_owner_name' === result.error.code && wc_stripe_params.hasOwnProperty( result.error.code ) ) {
+ wc_stripe_form.submitError( wc_stripe_params[ result.error.code ] );
+ return;
+ }
+ }
+
+ // Notify users that the email is invalid.
+ if ( 'email_invalid' === result.error.code ) {
+ message = wc_stripe_params.email_invalid;
+ } else if (
+ /*
+ * Customers do not need to know the specifics of the below type of errors
+ * therefore return a generic localizable error message.
+ */
+ 'invalid_request_error' === result.error.type ||
+ 'api_connection_error' === result.error.type ||
+ 'api_error' === result.error.type ||
+ 'authentication_error' === result.error.type ||
+ 'rate_limit_error' === result.error.type
+ ) {
+ message = wc_stripe_params.invalid_request_error;
+ }
+
+ if ( wc_stripe_params.hasOwnProperty(result.error.code) ) {
+ message = wc_stripe_params[ result.error.code ];
+ }
+
+ wc_stripe_form.reset();
+ $( '.woocommerce-NoticeGroup-checkout' ).remove();
+ console.log( result.error.message ); // Leave for troubleshooting.
+ $( errorContainer ).html( '<ul class="woocommerce_error woocommerce-error wc-stripe-error"><li /></ul>' );
+ $( errorContainer ).find( 'li' ).text( message ); // Prevent XSS
+
+ if ( $( '.wc-stripe-error' ).length ) {
+ $( 'html, body' ).animate({
+ scrollTop: ( $( '.wc-stripe-error' ).offset().top - 200 )
+ }, 200 );
+ }
+ wc_stripe_form.unblock();
+ $.unblockUI(); // If arriving via Payment Request Button.
+ },
+
+ /**
+ * Displays an error message in the beginning of the form and scrolls to it.
+ *
+ * @param {Object} error_message An error message jQuery object.
+ */
+ submitError: function( error_message, is_html = false ) {
+ if( ! is_html ) {
+ var error = $( '<div><ul class="woocommerce-error"><li /></ul></div>' );
+ error.find( 'li' ).text( error_message ); // Prevent XSS
+ error_message = error.html();
+ }
+
+ $( '.woocommerce-NoticeGroup-checkout, .woocommerce-error, .woocommerce-message' ).remove();
+ wc_stripe_form.form.prepend( '<div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout">' + error_message + '</div>' );
+ wc_stripe_form.form.removeClass( 'processing' ).unblock();
+ wc_stripe_form.form.find( '.input-text, select, input:checkbox' ).trigger( 'blur' );
+
+ var selector = '';
+
+ if ( $( '#add_payment_method' ).length ) {
+ selector = $( '#add_payment_method' );
+ }
+
+ if ( $( '#order_review' ).length ) {
+ selector = $( '#order_review' );
+ }
+
+ if ( $( 'form.checkout' ).length ) {
+ selector = $( 'form.checkout' );
+ }
+
+ if ( selector.length ) {
+ $( 'html, body' ).animate({
+ scrollTop: ( selector.offset().top - 100 )
+ }, 500 );
+ }
+
+ $( document.body ).trigger( 'checkout_error' );
+ wc_stripe_form.unblock();
+ },
+
+ /**
+ * Handles changes in the hash in order to show a modal for PaymentIntent/SetupIntent confirmations.
+ *
+ * Listens for `hashchange` events and checks for a hash in the following format:
+ * #confirm-pi-<intentClientSecret>:<successRedirectURL>
+ *
+ * If such a hash appears, the partials will be used to call `stripe.handleCardPayment`
+ * in order to allow customers to confirm an 3DS/SCA authorization, or stripe.handleCardSetup if
+ * what needs to be confirmed is a SetupIntent.
+ *
+ * Those redirects/hashes are generated in `WC_Gateway_Stripe::process_payment`.
+ */
+ onHashChange: function() {
+ var partials = window.location.hash.match( /^#?confirm-(pi|si)-([^:]+):(.+)$/ );
+
+ if ( ! partials || 4 > partials.length ) {
+ return;
+ }
+
+ var type = partials[1];
+ var intentClientSecret = partials[2];
+ var redirectURL = decodeURIComponent( partials[3] );
+
+ // Cleanup the URL
+ window.location.hash = '';
+
+ wc_stripe_form.openIntentModal( intentClientSecret, redirectURL, false, 'si' === type );
+ },
+
+ maybeConfirmIntent: function() {
+ if ( ! $( '#stripe-intent-id' ).length || ! $( '#stripe-intent-return' ).length ) {
+ return;
+ }
+
+ var intentSecret = $( '#stripe-intent-id' ).val();
+ var returnURL = $( '#stripe-intent-return' ).val();
+
+ wc_stripe_form.openIntentModal( intentSecret, returnURL, true, false );
+ },
+
+ /**
+ * Opens the modal for PaymentIntent authorizations.
+ *
+ * @param {string} intentClientSecret The client secret of the intent.
+ * @param {string} redirectURL The URL to ping on fail or redirect to on success.
+ * @param {boolean} alwaysRedirect If set to true, an immediate redirect will happen no matter the result.
+ * If not, an error will be displayed on failure.
+ * @param {boolean} isSetupIntent If set to true, ameans that the flow is handling a Setup Intent.
+ * If false, it's a Payment Intent.
+ */
+ openIntentModal: function( intentClientSecret, redirectURL, alwaysRedirect, isSetupIntent ) {
+ stripe[ isSetupIntent ? 'handleCardSetup' : 'handleCardPayment' ]( intentClientSecret )
+ .then( function( response ) {
+ if ( response.error ) {
+ throw response.error;
+ }
+
+ var intent = response[ isSetupIntent ? 'setupIntent' : 'paymentIntent' ];
+ if ( 'requires_capture' !== intent.status && 'succeeded' !== intent.status ) {
+ return;
+ }
+
+ window.location = redirectURL;
+ } )
+ .catch( function( error ) {
+ if ( alwaysRedirect ) {
+ window.location = redirectURL;
+ return;
+ }
+
+ $( document.body ).trigger( 'stripeError', { error: error } );
+ wc_stripe_form.form && wc_stripe_form.form.removeClass( 'processing' );
+
+ // Report back to the server.
+ $.get( redirectURL + '&is_ajax' );
+ } );
+ },
+
+ /**
+ * Prevents the standard behavior of the "Renew Now" button in the
+ * early renewals modal by using AJAX instead of a simple redirect.
+ *
+ * @param {Event} e The event that occured.
+ */
+ onEarlyRenewalSubmit: function( e ) {
+ e.preventDefault();
+
+ $.ajax( {
+ url: $( '#early_renewal_modal_submit' ).attr( 'href' ),
+ method: 'get',
+ success: function( html ) {
+ var response = JSON.parse( html );
+
+ if ( response.stripe_sca_required ) {
+ wc_stripe_form.openIntentModal( response.intent_secret, response.redirect_url, true, false );
+ } else {
+ window.location = response.redirect_url;
+ }
+ },
+ } );
+
+ return false;
+ },
+ };
+
+ wc_stripe_form.init();
+} );