Skip to content

Commit

Permalink
Script didn't work for me, fix it.
Browse files Browse the repository at this point in the history
  • Loading branch information
@remcotolsma
remcotolsma committed Nov 30, 2023
1 parent bf47a2e commit 27e08e9
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 91 deletions.
202 changes: 115 additions & 87 deletions js/dist/components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
} )( jQuery );
8 changes: 4 additions & 4 deletions js/src/components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,18 +44,18 @@
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;
}

// 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,
}
);

Expand Down

0 comments on commit 27e08e9

Please sign in to comment.