From 27e08e99ade039b0209d735ea4c992201c3f5d39 Mon Sep 17 00:00:00 2001 From: Remco Tolsma <869674+remcotolsma@users.noreply.github.com> Date: Thu, 30 Nov 2023 15:52:45 +0100 Subject: [PATCH] Script didn't work for me, fix it. --- js/dist/components.js | 202 ++++++++++++++++++++++++------------------ js/src/components.js | 8 +- 2 files changed, 119 insertions(+), 91 deletions(-) diff --git a/js/dist/components.js b/js/dist/components.js index c506ef3..e15f6f3 100644 --- a/js/dist/components.js +++ b/js/dist/components.js @@ -6,151 +6,179 @@ * * @link https://docs.mollie.com/components/overview */ -($ => { - const components = [{ - id: 'card-holder', - label: 'Card Holder', - component: 'cardHolder' - }, { - id: 'card-number', - label: 'Card Number', - component: 'cardNumber' - }, { - id: 'expiry-date', - label: 'Expiry', - component: 'expiryDate' - }, { - id: 'verification-code', - label: 'CVC', - component: 'verificationCode' - }]; - function initMollieComponents(forms) { +( ( $ ) => { + const components = [ + { + id: 'card-holder', + label: 'Card Holder', + component: 'cardHolder' + }, + { + id: 'card-number', + label: 'Card Number', + component: 'cardNumber' + }, + { + id: 'expiry-date', + label: 'Expiry', + component: 'expiryDate' + }, + { + id: 'verification-code', + label: 'CVC', + component: 'verificationCode' + } + ]; + + function initMollieComponents( forms ) { let $cardTokenElements; - if (typeof forms === 'string') { - $cardTokenElements = document.querySelectorAll(forms + ' .pronamic_pay_mollie_card_token'); + + if ( typeof forms === 'string' ) { + $cardTokenElements = document.querySelectorAll( forms + ' .pronamic_pay_mollie_card_token' ); } else { - $cardTokenElements = forms.querySelectorAll('.pronamic_pay_mollie_card_token'); + $cardTokenElements = forms.querySelectorAll( '.pronamic_pay_mollie_card_token' ); } - $cardTokenElements.forEach($cardTokenElement => { + + $cardTokenElements.forEach( ( $cardTokenElement ) => { // Create components. const data = $cardTokenElement.dataset; // Check required Mollie profile ID. - if (!("mollie-profile-id" in data)) { - throw new Error('No Mollie profile ID in element dataset. Unable to load Mollie Components.'); + if ( ! $cardTokenElement.dataset.mollieProfileId ) { + throw new Error( 'No Mollie profile ID in element dataset. Unable to load Mollie Components.' ); + return; } // Initialize Mollie object. - const mollie = Mollie(data['mollie-profile-id'], { - locale: data['mollie-locale'] ?? null, - testmode: "mollie-testmode" in data - }); - let componentsContainer = document.createElement('div'); - componentsContainer.classList.add('mollie-components'); - $cardTokenElement.append(componentsContainer); - components.forEach(component => { + const mollie = Mollie( + $cardTokenElement.dataset.mollieProfileId, + { + locale: $cardTokenElement.dataset.mollieLocale ?? null, + testmode: '1' === $cardTokenElement.dataset.mollieTestmode, + } + ); + + let componentsContainer = document.createElement( 'div' ); + componentsContainer.classList.add( 'mollie-components' ); + + $cardTokenElement.append( componentsContainer ); + + components.forEach( ( component ) => { // Label. - let label = document.createElement('label'); - label.setAttribute('for', component.id); + let label = document.createElement( 'label' ); + label.setAttribute( 'for', component.id ); label.innerText = component.label; // Component container. - let field = document.createElement('div'); - field.setAttribute('id', component.id); - label.append(field); + let field = document.createElement( 'div' ); + field.setAttribute( 'id', component.id ); + + label.append( field ); // Error. - let error = document.createElement('div'); - error.setAttribute('id', component.id + '-error'); - error.setAttribute('role', 'alert'); - error.classList.add('field-error'); - componentsContainer.append(label, error); + let error = document.createElement( 'div' ); + error.setAttribute( 'id', component.id + '-error' ); + error.setAttribute( 'role', 'alert' ); + error.classList.add( 'field-error' ); + + componentsContainer.append( label, error ); // Create and mount component. - let mollieComponent = mollie.createComponent(component.component); - mollieComponent.mount('#' + component.id); + let mollieComponent = mollie.createComponent( component.component ); + + mollieComponent.mount( '#' + component.id ); // Handle errors. - mollieComponent.addEventListener('change', event => { + mollieComponent.addEventListener( 'change', ( event ) => { // Add error. - if (event.error && event.touched) { + if ( event.error && event.touched ) { error.textContent = event.error; - label.classList.add('is-invalid'); + + label.classList.add( 'is-invalid' ); + return; } // Remove error. error.textContent = ''; - label.classList.remove('is-invalid'); - }); - }); + + label.classList.remove( 'is-invalid' ); + } ); + } ); // Create Mollie token on checkout submit. - const form = $cardTokenElement.closest('form'); - form.addEventListener('submit', async e => { + const form = $cardTokenElement.closest( 'form' ); + + form.addEventListener( 'submit', async ( e ) => { // Check existing card token input. - let cardTokenInput = form.querySelector('input[name="pronamic_pay_mollie_card_token"]'); - if (cardTokenInput) { + let cardTokenInput = form.querySelector( 'input[name="pronamic_pay_mollie_card_token"]' ); + + if ( cardTokenInput ) { return; } + e.preventDefault(); // Create token. - const { - token, - error - } = await mollie.createToken(); - if (error) { - throw new Error(error.message || ''); + const { token, error } = await mollie.createToken(); + + if ( error ) { + throw new Error( error.message || '' ); } // Add token to form. - const tokenInput = document.createElement('input'); - tokenInput.setAttribute('type', 'hidden'); - tokenInput.setAttribute('name', 'pronamic_pay_mollie_card_token'); - tokenInput.setAttribute('value', token); - form.append(tokenInput); - if (false !== form.dispatchEvent(new Event('pronamic_pay_mollie_components_card_token_added', { - cancelable: true - }))) { + const tokenInput = document.createElement( 'input' ); + tokenInput.setAttribute( 'type', 'hidden' ); + tokenInput.setAttribute( 'name', 'pronamic_pay_mollie_card_token' ); + tokenInput.setAttribute( 'value', token ); + + form.append( tokenInput ); + + if ( false !== form.dispatchEvent( new Event( 'pronamic_pay_mollie_components_card_token_added', { cancelable: true } ) ) ) { // Submit form, now containing the hidden card token field. // form.submit(); — not working with test meta box - form.querySelector('[name="' + e.submitter.name + '"]').click(); + form.querySelector( '[name="' + e.submitter.name + '"]' ).click(); } - }); - }); + } ); + } ); } + function setupWooCommerce() { - const checkoutForm = document.querySelector('form.woocommerce-checkout'); - if (!checkoutForm) { + const checkoutForm = document.querySelector( 'form.woocommerce-checkout' ); + + if ( ! checkoutForm ) { return; } // Init components on updated checkout. - $(document.body).on('updated_checkout', function (e) { - initMollieComponents(checkoutForm); - }); - const $form = $(checkoutForm); + $( document.body ).on( 'updated_checkout', function( e ) { + initMollieComponents( checkoutForm ); + } ); + + const $form = $( checkoutForm ); // Prevent placing order, need to create token first. - $form.on('checkout_place_order_pronamic_pay_credit_card', returnFalse); + $form.on( 'checkout_place_order_pronamic_pay_credit_card', returnFalse ); // Re-enable placing order if card token has been added. - checkoutForm.addEventListener('pronamic_pay_mollie_components_card_token_added', function (e) { + checkoutForm.addEventListener( 'pronamic_pay_mollie_components_card_token_added', function( e ) { e.preventDefault(); - $form.off('checkout_place_order_pronamic_pay_credit_card', returnFalse); + + $form.off( 'checkout_place_order_pronamic_pay_credit_card', returnFalse ); + $form.submit(); - }); + } ); } + function returnFalse() { return false; } // Init Mollie Components. - document.addEventListener('DOMContentLoaded', function (e) { - initMollieComponents('form:not(.woocommerce-checkout)'); - }); + document.addEventListener( 'DOMContentLoaded', function( e ) { + initMollieComponents( 'form:not(.woocommerce-checkout)' ); + } ); + setupWooCommerce(); -})(jQuery); -//# sourceMappingURL=components.js.map \ No newline at end of file +} )( jQuery ); diff --git a/js/src/components.js b/js/src/components.js index af451b5..0021892 100644 --- a/js/src/components.js +++ b/js/src/components.js @@ -44,7 +44,7 @@ const data = $cardTokenElement.dataset; // Check required Mollie profile ID. - if ( ! ( "mollie-profile-id" in data ) ) { + if ( ! $cardTokenElement.dataset.mollieProfileId ) { throw new Error( 'No Mollie profile ID in element dataset. Unable to load Mollie Components.' ); return; @@ -52,10 +52,10 @@ // Initialize Mollie object. const mollie = Mollie( - data['mollie-profile-id'], + $cardTokenElement.dataset.mollieProfileId, { - locale: data['mollie-locale'] ?? null, - testmode: ( "mollie-testmode" in data ), + locale: $cardTokenElement.dataset.mollieLocale ?? null, + testmode: '1' === $cardTokenElement.dataset.mollieTestmode, } );