I'm using headless Craft CMS + Craft Commerce 3 + Stripe for Craft Commerce plugin to create the webshop. My frontend is decoupled and built in Nuxt.js.

I need to implement the payment form with the iDEAL payment method.

I'm getting the following error when trying to submit the payment form from the frontend "The PaymentMethod provided (ideal) is not allowed for this PaymentIntent. Please attach a PaymentMethod of one of the following types: card. Alternatively, update the allowed payment_method_types for this PaymentIntent to include "ideal"."

Can you please tell me what is the issue here ?

my code for the frontend:

  // Create a Stripe client.
  const stripe = await loadStripe(
  // Create an instance of Elements.
  const elements = stripe.elements()

  const options = {
    // Custom styling can be passed to options when creating an Element.
    style: {
      base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4',
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a',

  // Create an instance of the iDEAL Element.
  const idealBank = elements.create('idealBank', options)

  // Add an instance of the idealBank Element into
  // the `ideal-bank-element` <div>.

  idealBank.on('change', function (event) {
    const displayError = document.getElementById('card-errors')
    if (event.error) {
      displayError.textContent = event.error.message
    } else {
      displayError.textContent = ''

  // Create a source or display an error when the form is submitted.
  const form = document.getElementById('payment_form')

  form.addEventListener('submit', (event) => {

    const paymentData = {
      billing_details: {
        email: this.customerEmail,

    console.log('payment data', paymentData)

    // https://stripe.com/docs/js/payment_methods/create_payment_method
      .createPaymentMethod('ideal', idealBank, paymentData)
      .then(async (result) => {
        if (result.error) {
          // Inform the user if there was an error.
          const errorElement = document.getElementById('card-errors')
          errorElement.textContent = result.error.message
        } else {
          // Insert the token ID into the form so it gets submitted to the server
          const form = document.getElementById('payment_form')
          const hiddenInput = document.createElement('input')
          hiddenInput.setAttribute('type', 'hidden')
          hiddenInput.setAttribute('name', 'paymentMethodId') // This is the only thing that needs to be submitted to the craft server.
          hiddenInput.setAttribute('value', result.paymentMethod.id)

          const inputs = document.getElementById('payment_form').elements
          const payload = {       
            email: inputs.namedItem('email').value,
            gatewayId: inputs.namedItem('gatewayId').value,
            paymentMethodId: inputs.namedItem('paymentMethodId').value, 

          const paymentMethodResponse = await this.$store.dispatch(


my craft gateway configuration: enter image description here

This site is temporarily in read only mode and not accepting new answers.

Browse other questions tagged .