Error: TypeError: undefined is not an object (evaluating 'import_util.inspect.custom')

[kamph488]

I'm running into this error each time and can't figure out what the problem is.

TypeError: undefined is not an object (evaluating 'import_util.inspect.custom')

I've created the following code:

import React from 'react';
import { createMollieClient } from '@mollie/api-client';

const PaymentButton: React.FC = () => {
  const handleClick = async () => {
    try {
      const mollie = createMollieClient({ apiKey: 'test_xxxxx' });

      const payment = await mollie.payments.create({
        amount: {
          currency: 'EUR',
          value: '10.00'
        },
        description: 'Testbetaling',
        redirectUrl: 'https://example.com/redirect'
      });

      console.log('Payment created:', payment);
      // Voer hier eventuele verdere acties uit, bijvoorbeeld het doorsturen van de gebruiker naar de betaalpagina
    } catch (error) {
      console.error('Error creating payment:', error);
      // Voer hier eventuele foutafhandeling uit
    }
  };

  return (
    <button onClick={handleClick}>Doe een betaling</button>
  );
};

export default PaymentButton;

Of course with a test api key from Mollie. When I comment out the lineconst mollie = createMollieClient({ apiKey: 'test_xxxxx' }); the error is gone..

Please help.

[fjbender]

Your const PaymentButton has me worried you're doing something potentially dangerous, ie. exposing your API Key to the Client. I recommend you review https://github.com/mollie/mollie-api-node?tab=readme-ov-file#a-note-on-use-outside-of-nodejs.

I recommend the following:

• Move API Interaction to the Backend: The secure way to handle payments with Mollie (or any other payment processor) is to make API calls from your backend server. This way, the API key stays secure on the server, and the frontend only interacts with your backend to initiate actions.
• Create a Secure Endpoint: In your backend, create an endpoint that handles payment creation. The frontend can send a request to this endpoint when the user clicks the payment button. The backend then uses the API key to interact with Mollie's API, creates the payment, and sends the necessary payment information (like the redirect URL) back to the frontend.