mollie / components-examples Goto Github PK

I try to to add this example but placeholder doesn’t change styles. Any idea?

mollie.createToken().then(function (result) {
var token = result.token;alert(token)
| var error = result.error;

Uncaught TypeError: Cannot read property 'trim' of undefined at e.setCorrectedPasteValue (components.e009e891.js:15) at e.onChange (components.e009e891.js:15) at HTMLInputElement.<anonymous> (components.e009e891.js:1)

PS. Is this the right place for Components issues?

You can create multiple instances of Controller.
We think it can be caused by calling new Mollie() multiple times (e.g. when it's called inside a component inside PWA, and it's not properly destroyed during cleanup).

Original issue report: #24 (comment)
CC: @shershen08

I bounced into a accessibility (= keyboard only) limitation if you have a checkout page with collapsible (display:none) elements.

Assume the page starts with some form elements. After that you have a payment selection, for example ideal and creditcard.

If the creditcard form is collapsed on page load, and after selecting creditcard you display it (using display:block) then you cannot 'tab' beyond the Card holder. Instead you go back to the first form element on the page.

Checking mollie.js it looks that this has to do with mollie.js function reindexFocussableElements which is typically run at page load.

Does this mean that you should mount the creditcard fields every time after selecting the creditcard form,
or is there another way?

Czech language seems missing; is it possible to add?

Hi!
Card number input field allows 16 digits + space + 3 digits.
Is it possible to limit it to 16 digits?
Thank you in advance.

Hey hey 👋🏽

we are integrating Mollie Components into a web application using Turbo Drive – similar to what pjax does IIRC and are observing some technical issues.

Our setup

Users navigate through a multi-step payment process.

graph TD;
    start-->payment-setup;
    payment-setup-->preview;
    preview-->edit-payment;
	edit-payment-->preview

When users navigate from one page to the next, Turbo Drive will asynchronously fetch the subsequent page and only replaces the body while keeping the JS state of the users browser intact. More details about what Turbo Drive exactly does here.

On payment-setup Mollie is initialised, the Card Component is mounted, etc. A reference to the initiated Mollie-object is stored at window.__mollieObj – so it can be reused later when users may need to re-enter their credit card details (in step edit-payment).

// Either retrieve the existing mollie Obj or create new one
window.__mollieObj = window.__mollieObj || Mollie(window.__mollie.profile_id, window.__mollie.config);

For users who navigate through payment-setup->preview->edit-payment the Card Component should be mounted again. At this point window.__mollieObj is pointing to a Mollie-instance and we want to reuse it.

When mounting the Card Component I can observe that each iframe is stuck in the is-loading state like so:

• There are no JS errors in the console.
• The Card Component has been properly unmounted when users navigated away from setup-payment->preview

What I suspect is happening

I can see that new Mollie() registers some EventListeners on the head and body of the Document.

I understand that Turbo Drive will not remove those EventListeners when users navigate from payment-setup->preview.

When users then navigate from preview->edit-payment the old EventListeners are in place and a new Card Component is mounted.

Then something is going wrong :)

To make it really clear how to use test mode, the examples should not omit the testmode parameter.

Mollie.js implementation in Rails 7.x with Stimulus JS Controller raise TypeError: undefined is not an object for each mollie.createComponent if a user is navigating away and back to the checkout page - not browser history back.

Any ideas why this messages appears and how I can solve this issue?

Hi,

Currently, there is no support for changing the font-family in input fields injected by mollie. could you add this to the properties so we can make the font match with the rest of our form?

I'm integrating the mollie components into our React frontend, but I'm running into some issues.

Video explaining the issue: https://d.pr/v/LzSMWr

The console.log you are seeing is from a piece of code that handles the form submission:

  const form = useFormGqlMutationCart(SetMolliePaymentMethodTokenOnCartDocument, {
    mode: 'onChange',
    defaultValues: { code },
    onBeforeSubmit: async (variables) => {
      const result = await mollie?.createToken()
      console.log(result)

      if (!result?.token || result?.error) {
        throw Error(`Error while requesting token`)
      }

      return { ...variables, token: result.token }
    },
  })

If I switch too fast between methods I get the following error:

Uncaught (in promise) MollieComponentsError: Messenger can't be loaded Failed handshake

Any suggestions how we can get this resolved?

I have 2 issues mounting the components on my Woocommerce site.

1. When displayed in the standard woocommerce payment method box, the fields mount on page load (you can see that) but then unmount when the page is fully loaded, leaving me with just the html.

2. If I manually add the html to the top of my checkout form (outside of the payment box) the fields do mount correctly, but all fields have css to hide it:

<input data-component-type="verificationCode" type="text" aria-hidden="true" autocomplete="false" max-length="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important;&quot;" class="mollie-component-hidden-input mollie-component-hidden-input--verificationCode">

Also all fields have no placeholders, except for the expiry date field.

https://ibb.co/ngNyty5

HTML

    <div class="mollie-components">
    <div id="card-number"></div>
    <div id="card-number-error"></div>
  
    <div id="card-holder"></div>
    <div id="card-holder-error"></div>
  
    <div id="expiry-date"></div>
    <div id="expiry-date-error"></div>
  
    <div id="verification-code"></div>
    <div id="verification-code-error"></div>
    </div>

JS

var mollie = Mollie('pfl_xxxxxxxxx', {locale: 'nl_NL', testmode: true});

var cardNumber = mollie.createComponent('cardNumber');
cardNumber.mount('#card-number');

var cardHolder = mollie.createComponent('cardHolder');
cardHolder.mount('#card-holder');

var expiryDate = mollie.createComponent('expiryDate');
expiryDate.mount('#expiry-date');

var verificationCode = mollie.createComponent('verificationCode');
verificationCode.mount('#verification-code');

Hi!

Mollie components have inline style that CSP doesn't allow, even if whitelisting "js.mollie.com" in it (also tried *.mollie.com).

Console message :
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' js.mollie.com

Is there any way to work around this?

Thank you in advance.

Hi Guys,

I have an issue with implementing components into a Vue application.

On first load everything works fine, however if the user navigates to another route and then back again, the form is passing this error on submission:

Not all required components are mounted, see https://docs.mollie.com/guides/mollie-components/reference for more info.

I have tried everything to get this working, including re-mounting the components (but they are already mounted).

For now, I have a very dirty hack that if they get this error I do a location.reload() but I could really do with a proper fix for this.

Here is a loom recording: https://www.loom.com/share/34b681a889e647af949d7269b348a5ed

Attached are some screenshots, or you can see this in the real world here: BlackWolf Checkout