search

mollie / spree-mollie-gateway

Mollie payments for Spree Commerce.
https://www.mollie.com
16 stars 23 forks source link

Mollie's payment methods don't show in store front #94

Open githubble01 opened 3 years ago

githubble01 commented 3 years ago

Hi!

I just set up Mollie according to the README. When selecting the Mollie radio button the payment method part of the screen is empty. The log log/mollie.log is empty. Same result when deployed locally and to heroku.

Screen shot image

Gem file

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'

gem 'spree', '~> 4.1'
gem 'spree_auth_devise', '~> 4.1'
gem 'spree_gateway', '~> 3.7'
gem 'spree_mollie_gateway'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.3'
# Use sqlite3 as the database for Active Record
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem "pg", "~> 1.2"

Cheers, Georg

mPanasiewicz commented 3 years ago

The same thing in my store

Oldharlem commented 3 years ago

Please make sure you have payment methods enabled in your mollie dashboard. This usually causes this issue.

githubble01 commented 3 years ago

Please make sure you have payment methods enabled in your mollie dashboard. This usually causes this issue.

Thanks for responding. Perhaps a clarification is needed here. I use the test API key so according to the mollie docs it should work. Several payment methods are enabled.

The status of the account is "waiting for verification payment", so the live API key is not available.

githubble01 commented 3 years ago

@mPanasiewicz: Have you managed to get any further in your troubleshooting? I've contacted mollie customer support asking them to verify my account as I see no trace of activity, neither in the local logs nor in de mollie dashboard.

Oldharlem commented 3 years ago

Hi @githubble01 ,

Can you try the following curl request on your local installation and post the response:

curl "http://localhost:3000/api/v1/mollie/methods" \
     -H 'Content-Type: application/json; charset=utf-8'

Furthermore can you try to obtain the payment methods through the API without spree using the cURL request example from the docs: https://docs.mollie.com/reference/v2/methods-api/list-methods

curl -X GET https://api.mollie.com/v2/methods?include=pricing \
   -H "Authorization: Bearer test_dHar4XY7LxsDOtmnkVtjNVWXLSlXsM"

Please provide your own api key in the request and share the outcome.

It should contain a methods node including all the possible payment methods for your API key.

If the response has a 401 status there is something wrong with your key.

If the methods node is empty you do not have any activated payment methods in your account.

Awaiting your response.

githubble01 commented 3 years ago

Hi @Oldharlem,

Bedankt for picking this up.

I followed your instructions, and presented the result below.

First some observations that might be of importance.

  1. When starting the spree store locally today, two payment types were visible (Credit card and PayPal), please find screen dump below. At the time of submitting this issue, no payment method was displayed.
  2. When applying the wrong API key in the spree administration today, an exception was thrown at the front-end clearly stating the source of the error. Great! At the time of submitting this issue, no error message was displayed.
  3. It's unclear why only two payment methods are visible since I've activated virtually all payment methods (all of which have the status "pending-onboarding" in the response of the mollie API). For instance "Ideal" is not visible in the front-end even though I specified the Netherlands as billing address. Any thoughts?
  4. In the mollie developer section, I suspect Profile ID and Partner ID have been added without me actively doing so.
  5. Calling the mollie through spree API gives 15 payment methods. Calling the mollie without spree gives 13 payment methods.

Can you try the following curl request on your local installation and post the response:

curl --header "X-Spree-Token: MY_USERS_SPREE_TOKEN" http://localhost:3000/api/v1/mollie/methods

Result (15 payment methods):

[
  {
    "resource": "method",
    "id": "ideal",
    "description": "iDEAL",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "50000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/ideal.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/ideal%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/ideal.svg"
    },
    "status": "pending-boarding",
    "issuers": [
      {
        "resource": "issuer",
        "id": "ideal_ABNANL2A",
        "name": "ABN AMRO",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/ABNANL2A.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/ABNANL2A%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/ABNANL2A.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_INGBNL2A",
        "name": "ING",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/INGBNL2A.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/INGBNL2A%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/INGBNL2A.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_RABONL2U",
        "name": "Rabobank",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/RABONL2U.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/RABONL2U%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/RABONL2U.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_ASNBNL21",
        "name": "ASN Bank",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/ASNBNL21.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/ASNBNL21%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/ASNBNL21.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_BUNQNL2A",
        "name": "bunq",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/BUNQNL2A.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/BUNQNL2A%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/BUNQNL2A.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_HANDNL2A",
        "name": "Handelsbanken",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/HANDNL2A.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/HANDNL2A%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/HANDNL2A.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_KNABNL2H",
        "name": "Knab",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/KNABNL2H.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/KNABNL2H%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/KNABNL2H.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_MOYONL21",
        "name": "Moneyou",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/MOYONL21.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/MOYONL21%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/MOYONL21.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_RBRBNL21",
        "name": "RegioBank",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/RBRBNL21.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/RBRBNL21%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/RBRBNL21.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_SNSBNL2A",
        "name": "SNS",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/SNSBNL2A.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/SNSBNL2A%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/SNSBNL2A.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_TRIONL2U",
        "name": "Triodos Bank",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/TRIONL2U.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/TRIONL2U%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/TRIONL2U.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "ideal_FVLBNL22",
        "name": "van Lanschot",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/ideal-issuers/FVLBNL22.png",
          "size2x": "https://www.mollie.com/external/icons/ideal-issuers/FVLBNL22%402x.png",
          "svg": "https://www.mollie.com/external/icons/ideal-issuers/FVLBNL22.svg"
        }
      }
    ],
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/ideal",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "creditcard",
    "description": "Credit card",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "2000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/creditcard.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/creditcard%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/creditcard.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/creditcard",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "klarnapaylater",
    "description": "Pay later.",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "10000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/klarnapaylater.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/klarnapaylater%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/klarnapaylater.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/klarnapaylater",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "paypal",
    "description": "PayPal",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": null,
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/paypal.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/paypal%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/paypal.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/paypal",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "banktransfer",
    "description": "Bank transfer",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "1000000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/banktransfer.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/banktransfer%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/banktransfer.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/banktransfer",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "sofort",
    "description": "SOFORT Banking",
    "minimum_amount": {
      "value": "0.10",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "50000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/sofort.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/sofort%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/sofort.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/sofort",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "giftcard",
    "description": "Gift cards",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": null,
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/giftcard.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/giftcard%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/giftcard.svg"
    },
    "status": null,
    "issuers": [],
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/giftcard",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "klarnasliceit",
    "description": "Slice it.",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "10000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/klarnasliceit.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/klarnasliceit%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/klarnasliceit.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/klarnasliceit",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "bancontact",
    "description": "Bancontact",
    "minimum_amount": {
      "value": "0.02",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "50000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/bancontact.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/bancontact%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/bancontact.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/bancontact",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "eps",
    "description": "eps",
    "minimum_amount": {
      "value": "1.00",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "50000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/eps.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/eps%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/eps.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/eps",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "giropay",
    "description": "Giropay",
    "minimum_amount": {
      "value": "1.00",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "10000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/giropay.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/giropay%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/giropay.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/giropay",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "przelewy24",
    "description": "Przelewy24",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "12815.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/przelewy24.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/przelewy24%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/przelewy24.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/przelewy24",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "kbc",
    "description": "KBC/CBC Payment Button",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "50000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/kbc.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/kbc%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/kbc.svg"
    },
    "status": "pending-boarding",
    "issuers": [
      {
        "resource": "issuer",
        "id": "cbc",
        "name": "CBC",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/kbc-issuers/cbc.png",
          "size2x": "https://www.mollie.com/external/icons/kbc-issuers/cbc%402x.png",
          "svg": "https://www.mollie.com/external/icons/kbc-issuers/cbc.svg"
        }
      },
      {
        "resource": "issuer",
        "id": "kbc",
        "name": "KBC",
        "image": {
          "size1x": "https://www.mollie.com/external/icons/kbc-issuers/kbc.png",
          "size2x": "https://www.mollie.com/external/icons/kbc-issuers/kbc%402x.png",
          "svg": "https://www.mollie.com/external/icons/kbc-issuers/kbc.svg"
        }
      }
    ],
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/kbc",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "belfius",
    "description": "Belfius Pay Button",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "50000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/belfius.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/belfius%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/belfius.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/belfius",
        "type": "application/hal+json"
      }
    }
  },
  {
    "resource": "method",
    "id": "inghomepay",
    "description": "ING Home'Pay",
    "minimum_amount": {
      "value": "0.01",
      "currency": "EUR"
    },
    "maximum_amount": {
      "value": "50000.00",
      "currency": "EUR"
    },
    "image": {
      "size1x": "https://www.mollie.com/external/icons/payment-methods/inghomepay.png",
      "size2x": "https://www.mollie.com/external/icons/payment-methods/inghomepay%402x.png",
      "svg": "https://www.mollie.com/external/icons/payment-methods/inghomepay.svg"
    },
    "status": "pending-boarding",
    "_links": {
      "self": {
        "href": "https://api.mollie.com/v2/methods/inghomepay",
        "type": "application/hal+json"
      }
    }
  }
]

Furthermore can you try to obtain the payment methods through the API without spree using the cURL request example from > the docs: https://docs.mollie.com/reference/v2/methods-api/list-methods

curl -X GET https://api.mollie.com/v2/methods?include=pricing \
-H "Authorization: Bearer test_MY_OWN_API_KEY"

Result (13 payment methods):

{
  "_embedded": {
    "methods": [
      {
        "resource": "method",
        "id": "ideal",
        "description": "iDEAL",
        "minimumAmount": {
          "value": "0.01",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "50000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/ideal.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/ideal%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/ideal.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Netherlands",
            "fixed": {
              "value": "0.29",
              "currency": "EUR"
            },
            "variable": "0"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/ideal",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "creditcard",
        "description": "Credit card",
        "minimumAmount": {
          "value": "0.01",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "2000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/creditcard.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/creditcard%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/creditcard.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "American Express (intra-EEA)",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "2.8",
            "feeRegion": "amex-intra-eea"
          },
          {
            "description": "Commercial \u0026 non-European cards",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "2.8",
            "feeRegion": "other"
          },
          {
            "description": "Domestic",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "1.8",
            "feeRegion": "domestic"
          },
          {
            "description": "European cards",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "1.8",
            "feeRegion": "eu-cards"
          },
          {
            "description": "European commercial cards",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "2.8",
            "feeRegion": "intra-eu-corporate"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/creditcard",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "paypal",
        "description": "PayPal",
        "minimumAmount": {
          "value": "0.01",
          "currency": "EUR"
        },
        "maximumAmount": null,
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/paypal.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/paypal%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/paypal.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Worldwide",
            "fixed": {
              "value": "0.10",
              "currency": "EUR"
            },
            "variable": "0"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/paypal",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "banktransfer",
        "description": "Bank transfer",
        "minimumAmount": {
          "value": "0.01",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "1000000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/banktransfer.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/banktransfer%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/banktransfer.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Europe",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "0"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/banktransfer",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "sofort",
        "description": "SOFORT Banking",
        "minimumAmount": {
          "value": "0.10",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "50000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/sofort.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/sofort%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/sofort.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Adult",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "3.7"
          },
          {
            "description": "Digital",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "1.6"
          },
          {
            "description": "Europe",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "0.9"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/sofort",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "giftcard",
        "description": "Gift cards",
        "minimumAmount": {
          "value": "0.01",
          "currency": "EUR"
        },
        "maximumAmount": null,
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/giftcard.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/giftcard%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/giftcard.svg"
        },
        "status": null,
        "pricing": [
          {
            "description": "Netherlands",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "0"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/giftcard",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "bancontact",
        "description": "Bancontact",
        "minimumAmount": {
          "value": "0.02",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "50000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/bancontact.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/bancontact%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/bancontact.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Belgium",
            "fixed": {
              "value": "0.39",
              "currency": "EUR"
            },
            "variable": "0"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/bancontact",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "eps",
        "description": "eps",
        "minimumAmount": {
          "value": "1.00",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "50000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/eps.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/eps%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/eps.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Austria",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "1.5"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/eps",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "giropay",
        "description": "Giropay",
        "minimumAmount": {
          "value": "1.00",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "10000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/giropay.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/giropay%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/giropay.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Germany",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "1.5"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/giropay",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "przelewy24",
        "description": "Przelewy24",
        "minimumAmount": {
          "value": "0.01",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "12815.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/przelewy24.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/przelewy24%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/przelewy24.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Poland",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "2.2"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/przelewy24",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "kbc",
        "description": "KBC/CBC Payment Button",
        "minimumAmount": {
          "value": "0.01",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "50000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/kbc.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/kbc%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/kbc.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Belgium",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "0.9"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/kbc",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "belfius",
        "description": "Belfius Pay Button",
        "minimumAmount": {
          "value": "0.01",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "50000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/belfius.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/belfius%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/belfius.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Belgium",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "0.9"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/belfius",
            "type": "application/hal+json"
          }
        }
      },
      {
        "resource": "method",
        "id": "inghomepay",
        "description": "ING Home\u0027Pay",
        "minimumAmount": {
          "value": "0.01",
          "currency": "EUR"
        },
        "maximumAmount": {
          "value": "50000.00",
          "currency": "EUR"
        },
        "image": {
          "size1x": "https://www.mollie.com/external/icons/payment-methods/inghomepay.png",
          "size2x": "https://www.mollie.com/external/icons/payment-methods/inghomepay%402x.png",
          "svg": "https://www.mollie.com/external/icons/payment-methods/inghomepay.svg"
        },
        "status": "pending-boarding",
        "pricing": [
          {
            "description": "Belgium",
            "fixed": {
              "value": "0.25",
              "currency": "EUR"
            },
            "variable": "0.9"
          }
        ],
        "_links": {
          "self": {
            "href": "https://api.mollie.com/v2/methods/inghomepay",
            "type": "application/hal+json"
          }
        }
      }
    ]
  },
  "count": 13,
  "_links": {
    "documentation": {
      "href": "https://docs.mollie.com/reference/v2/methods-api/list-methods",
      "type": "text/html"
    },
    "self": {
      "href": "https://api.mollie.com/v2/methods?include=pricing",
      "type": "application/hal+json"
    }
  }
}

image

githubble01 commented 3 years ago

Hi @Oldharlem,

Wondering if my answer was of any help and if you've had the chance to look into it.

Oldharlem commented 3 years ago

Hi @Oldharlem,

Wondering if my answer was of any help and if you've had the chance to look into it.

I have read your reply and thanks for taking the effort. From the 'raw' responses the requests produced I can conclude that your installation is without error, which is great news.

What is left for us to check is controller logic, view logic and conflicting gems.

Could you share your payment state checkout view html code? Could you also share any checkouts_controller overrides if applied? And lastly, could you provide insights into your gemfile?

Awaiting your response.

githubble01 commented 3 years ago

Could you share your payment state checkout view html code?


<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html lang="en"><!--<![endif]-->
<head data-hook="inside_head">
    <title>Spree Commerce Demo Shop - Spree Demo Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta name="keywords" content="Spree Commerce Demo Shop" />
    <meta name="description" content="Spree Commerce is an open source Ecommerce framework decision makers want, developers enjoy." />
    <link href="http://demo.spreecommerce.org:3000/checkout" rel="canonical" />
    <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-92e86d463e909754599d66730477622cd3dd0b9bff58c47c9c38bebceb8073e5.ico" />
    <link rel="stylesheet" media="screen" href="/assets/spree/frontend/address_book.self-847fe16ca4c890c738d088c972d94632a17728971b99747f1f2a72ca3f92ad76.css?body=1" data-turbolinks-track="reload" />
    <link rel="stylesheet" media="screen" href="/assets/spree/frontend/application.self-296f681260c41bd259f7aab123ac55681a2bfe6155dabe4745622d5d8a5e385c.css?body=1" data-turbolinks-track="reload" />
    <link rel="stylesheet" media="screen" href="/assets/spree/frontend.self-a31f28b94d98bb7de4c6c8b6bb3ffc8db779aee2865477f600c499ead36ee0f0.css?body=1" data-turbolinks-track="reload" />
    <link rel="stylesheet" media="screen" href="/assets/spree/frontend/all.self-33fc4a513acb9a5f3fd4ba26b89c94184e5d028c4bd40eee6736d3ccfea5c140.css?body=1" data-turbolinks-track="reload" />
    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="LtZaizRqEie4rG2d4TdL+v5dm5I4X9E4cFIuN+GWEEt5m5ac9GyXlmBPx19/MhwKk3GpiIYL5cZXZ+xzGbk8SA==" />
    <script>
  SpreePaths = {"mounted_at":"/","admin":"admin/"}
</script>

    <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/accounting.min.self-8999e7719b846e414b2c86188ebf9d9dd765bde57a76a6d45b2682d967466085.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/popper.self-55bd1408b0e4ff3edf21524b78fbe2266615c8015ce0e5f0828089b1de27d63c.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/bootstrap.self-91405a85c7ea7ffc2407472f08a86cd29ba078b4e18f962931a4cf3270a7ba4d.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/jquery.payment.self-38d1c43bb5a79a62bce3ec642fe216db420582062f0990bb7ce095fe9698a834.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/jsuri.self-32d1bf44ffa16da5b2ea10c661f790bf0944362395283a91baf62d43407f10ba.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree.self-5eec2c12ba7879d5e1f943e0fd22ca5e5624a05978aec3e14591e97fd695741f.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/polyfill.min.self-e8ee7479fa6c7392aa1840f78b8295acfed0f07a372d0d987eed2563a49938e8.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/fetch.umd.self-9a0c4301b6e804a7a808eb69694ed08567605811ae9bef1d3f19c88e20bdec92.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/api/main.self-f0dcf94e8fe95fd33b1ea0ca6ffc53c7491aaca4f269dd72636498536d432cf2.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/lazysizes.config.self-5d62d6703258b43ba2822c75a3b25c2d42ce9decceb208dcd0f673e375d1f971.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/lazysizes.min.self-9875bdc89c4ed630a4ebf0b4bc8bdafb5b4b7659afc427dca008a206cf94309a.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/account.self-8cc506a5cf01b0be84d9abab678ade2678d24b3318c1f421255ae003c3ef9438.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/api_tokens.self-60c61dc9b299edafe0bcc567a5182888d9d68846840b17260844eb3b33545339.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/carousel-noconflict.self-df491c46a58c069f6beef8dc638ca14411ce7b1d70265e99c1f3310e139852e6.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/coupon_manager.self-c15cff91a69df883ca252c1f96ea642192a5120de01a4b18d2eadba45d02ecfb.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/cart.self-d63ebf5161f1ad031986e4fca1320a7853234d4411c4676cc76d85f9a130c920.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/checkout.self-ba367a95290fb39cf73a8f7e46709bef44df590480641c64940ffa2d9c8b0081.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/checkout/address.self-91b2295526d0398661aca1b0f5125b6da7e67e1e7a6e3f194d5377839fd826c2.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/checkout/address_book.self-ecd4e7294714b3f436b74c8664de578b80714145ee2c02d4a1304906fc75913c.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/checkout/payment.self-d82d8920e85174f9921bfc20176f0620cd437c87b55a958d7b07cc67d369304c.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/checkout/shipment.self-99f30431ca3bb5e6ab94e2f6cf4a9b0c083e961040b8ca680d55fbc2a7199131.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/viewport.self-fb8f8cf7ff40ddc2f5ce04ebb5d8bbecbb1e5fb2bdf61aa257dfc24b244f37e2.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/home/product_carousels.self-71f96b6410e6f50bcb3a5ca99346bdbe6d9409a6db7186a1a91a8a35ca87662c.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/layouts/spree_application.self-5c8dec6d771249374e65526be23380cb72425fb21e5c4f9949142bf5855b1d9e.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/product/related.self-7766429534748deb468ed18c25a92a2f1113bad961fef36501d1ca4628871eca.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/api/storefront/cart.self-144e882556e7350e40dd4ea5458ca7aa6aaf19039ef0f4d31bb2e796ec83d4ae.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/shared/product_added_modal.self-ba1ed7c0f7971d073b88b345f42ac05fb409f7c578cb79ee638f6223a576fd25.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/products/cart_form.self-623415f8bda4bb189a6d2fc740e55f40a7bf06d761fab94a2df4c32c64d9b4b8.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/products/description.self-eb79673954bae78fcccad27417899a628ce7fd018b64cf4addb251d921e272b7.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/products/index.self-0576df4e2655e407b6734884a5dd2d0bd687a8fd04906160d2dbab1b75ae5ed6.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/products/modal_carousel.self-2522d5a127757f475efcd0dbe765c5b4be45dabb08d6c4ea2b05c315a5567a37.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/shared/carousel.self-8f7b034d5ac3d5cf37ee24ec42717ace6d0cc2363a11d1e6377505d94c106234.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/shared/carousel/single.self-bb1016940ab270f14564f087f2bfbc1b4769c7d24fb0d2270384647dff1900da.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/shared/carousel/swipes.self-f091281bfb506cf68aa8f103829d5cb0a20016cab0c6dde33c5d38b006920798.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/shared/carousel/thumbnails.self-9ccf5c92ba47222f2963934efd693988dbf95d51d6ad767a88fae580356626a6.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/shared/delete_address_popup.self-4c417ccbb8e88cb806f46bd3adc49cf32542002cc8ccd658db34f54f6ad26a23.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/shared/mobile_navigation.self-2a6a92b7897ad76c4c22a33008c67572a7fe10473e4f32d04bbaa508e4ec7c61.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/shared/nav_bar.self-3b513c8147c16bcd85353eb31c2fac0c0f82417e89ad9618696b24b56d80e6c8.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/views/spree/shared/quantity_select.self-c1c8ad3b3356d9f84c0ac5947fb36c8c9fe55196295d801b27b686f9fd61e8ae.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/turbolinks_scroll_fix.self-548f5d12f6125f35ed3e431923af083a88777813482a09edb846380281c783f9.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend.self-dfa587a08699bcfaa751ad85d042dc202aa6cc134743fda866ba5b679ee53783.js?body=1" defer="defer" data-turbolinks-track="reload"></script>
    <script src="/assets/spree/frontend/all.self-cb715ade8208ca614adcefe484df803bed6d65b27b52ba06264930b4627dcfd7.js?body=1" defer="defer" data-turbolinks-track="reload"></script>

</head>
<body class="one-col" id="checkout-page" data-hook="body">
<div id="spree-header">
    <header id="header" class="d-flex align-items-center header-spree border-bottom">
        <div class="container position-relative">
            <div class="position-absolute checkout-header-link">
                <a class="d-none d-sm-inline text-uppercase" data-method="get" href="/cart">
                    <svg xmlns="http://www.w3.org/2000/svg" height="14px" viewBox="0 0 11.344 21.156" width="7px" class="spree-icon spree-icon-arrow spree-icon-arrow-left"><path d="m42.617 25.669a.685.685 0 0 0 .968 0 .685.685 0 0 0 0-.968l-8.515-8.516 8.516-8.516a.685.685 0 0 0 -.968-.968l-9.017 9a.685.685 0 0 0 0 .968z" fill="currentColor" transform="matrix(-1 0 0 -1 44.744 26.869)"></path></svg>

                    <span class="checkout-header-link-text">back to the cart</span>
                </a>
                <a class="d-sm-none text-uppercase" data-method="get" href="/cart">
                    <svg xmlns="http://www.w3.org/2000/svg" height="14px" viewBox="0 0 11.344 21.156" width="7px" class="spree-icon spree-icon-arrow spree-icon-arrow-left"><path d="m42.617 25.669a.685.685 0 0 0 .968 0 .685.685 0 0 0 0-.968l-8.515-8.516 8.516-8.516a.685.685 0 0 0 -.968-.968l-9.017 9a.685.685 0 0 0 0 .968z" fill="currentColor" transform="matrix(-1 0 0 -1 44.744 26.869)"></path></svg>

                    <span class="checkout-header-link-text">Back</span>
                </a>      </div>
            <div class="d-flex flex-nowrap align-items-center justify-content-center">
                <figure class="logo flex-grow-0 flex-xl-grow-0 order-xl-0 header-spree-fluid-logo m-0">
                    <a aria-label="Spree Demo Site" data-method="get" href="/"><img alt="Spree Demo Site" title="Spree Demo Site" src="/assets/logo/spree_50-0ae687ccd486b63b01687b1df9e5394430f6fce3ab40c28250b179be4363ddc1.png" /></a>
                </figure>
            </div>
        </div>
    </header>
</div>

<div id="overlay" class="overlay"></div>

<div data-hook>
    <main id="content" data-hook>

        <div id="checkout" class="container checkout" data-hook>

            <div class="row align-items-center flex-column checkout-header" data-hook="checkout_header">
                <div class="text-uppercase checkout-header-title">
                    <h1 data-hook="checkout_title">Checkout</h1>
                </div>
                <div class="checkout-progress" data-hook="checkout_progress">
                    <ul class="nav justify-content-between checkout-progress-steps" id="checkout-step-payment"><li class="text-uppercase nav-item completed first"><a class="d-flex flex-column align-items-center" data-method="get" href="/checkout/address"><span class="checkout-progress-steps-image checkout-progress-steps-image--full"></span>Address</a></li>
                        <li class="text-uppercase nav-item completed"><a class="d-flex flex-column align-items-center" data-method="get" href="/checkout/delivery"><span class="checkout-progress-steps-image checkout-progress-steps-image--full"></span>Delivery</a></li>
                        <li class="text-uppercase nav-item active last"><a class="d-flex flex-column align-items-center active"><span class="checkout-progress-steps-image checkout-progress-steps-image--full"></span>Payment</a></li></ul><div class="checkout-progress-steps-line state-payment"><hr /><hr /></div>
                </div>
            </div>

            <div class="row checkout-content" data-hook="checkout_content">
                <form class="w-100 d-lg-flex align-items-lg-baseline  flex-wrap position-relative" id="checkout_form_payment" action="/checkout/update/payment" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="2fc9Q7W4HL2mIKmfHK3wVclRKsV/qTlfiFfsH9sUDu/6FRaSIM33x0STU6srA0Bv7/sxiIhscAF6AGcQSGj2iQ==" />
                    <div class="col-lg-6" data-hook="checkout_form_wrapper">
                        <input type="hidden" value="10" name="order[state_lock_version]" id="order_state_lock_version" />
                        <div id="payment" data-hook>
                            <p class="payment-type checkout-content-header">
                                PAYMENT TYPE
                            </p>

                            <div data-hook="checkout_payment_step">

                                <ul id="payment-method-fields" class="list-unstyled position-relative" data-hook>
                                    <li class="radio">
                                        <label class="form-check-label spree-radio-label payment-option">
                                            <input type="radio" name="order[payments_attributes][][payment_method_id]" id="order_payments_attributes__payment_method_id_2" value="2" checked="checked" />
                                            <span class="spree-radio-label-custom-input"></span>
                                            Credit Card
                                        </label>        </li>
                                    <li class="radio">
                                        <label class="form-check-label spree-radio-label payment-option">
                                            <input type="radio" name="order[payments_attributes][][payment_method_id]" id="order_payments_attributes__payment_method_id_4" value="4" />
                                            <span class="spree-radio-label-custom-input"></span>
                                            Mollie
                                        </label>        </li>
                                </ul>

                                <div class="payment-sources">

                                    <ul id="payment-methods" class="list-unstyled position-relative mb-0 payment-sources-add-form" data-hook>
                                        <li id="payment_method_2" class="" data-hook>
                                            <fieldset>
                                                <div class="payment-gateway">

                                                    <div class="payment-gateway-fields">
                                                        <div class="mb-4 payment-gateway-field checkout-content-inner-field">
                                                            <input type="text" name="payment_source[2][name]" id="name_on_card" value="georg törnqvist" class="spree-flat-input" placeholder="Name on card" />
                                                        </div>

                                                        <div class="mb-4 payment-gateway-field checkout-content-inner-field" data-hook="card_number">
                                                            <input type="text" name="payment_source[2][number]" id="card_number" value="" class="spree-flat-input cardNumber" size="19" maxlength="19" autocomplete="off" placeholder="Card Number" />
                                                            <span id="card_type" style="display:none;">
        ( <span id="looks_like" >Card type is <span id="type"></span></span>
          <span id="unrecognized">Unrecognized card type</span>
        )
      </span>
                                                        </div>
                                                        <div class="payment-gateway-half-fields d-flex justify-content-between">
                                                            <div class="payment-gateway-field checkout-content-inner-field" data-hook="card_expiration">
                                                                <input type="text" name="payment_source[2][expiry]" id="card_expiry" value="" class="spree-flat-input cardExpiry" placeholder="MM / YY" />
                                                            </div>
                                                            <div class="payment-gateway-field checkout-content-inner-field" data-hook="card_code">
                                                                <input type="text" name="payment_source[2][verification_value]" id="card_code" value="" class="spree-flat-input cardCode" size="5" placeholder="CVV" />
                                                            </div>
                                                        </div>

                                                        <input type="hidden" name="payment_source[2][cc_type]" id="cc_type" value="" class="ccType" />
                                                    </div>
                                                </div>

                                            </fieldset>
                                        </li>
                                        <li id="payment_method_4" class="last" data-hook>
                                            <fieldset>
                                                <ul class="list-group">
                                                    <div class="radio list-group-item">

                                                        <label>
                                                            <input class="js-mollie-payment-method" type="radio" value="creditcard" name="payment_source[4][payment_method_name]" id="payment_source_4_payment_method_name_creditcard" />
                                                            <img src="https://www.mollie.com/external/icons/payment-methods/creditcard.png" />
                                                            Credit card
                                                        </label>

                                                    </div>
                                                    <div class="radio list-group-item">

                                                        <label>
                                                            <input class="js-mollie-payment-method" type="radio" value="paypal" name="payment_source[4][payment_method_name]" id="payment_source_4_payment_method_name_paypal" />
                                                            <img src="https://www.mollie.com/external/icons/payment-methods/paypal.png" />
                                                            PayPal
                                                        </label>

                                                    </div>
                                                </ul>

                                                <script type="text/javascript" charset="utf-8">
    /**
     * Make sure the issuer select boxes are disabled by default to prevent empty issuer submissions.
     */
    var paymentMethodRadioElements = document.querySelectorAll('.js-mollie-payment-method');

    function disableAllIssuerSelectBoxes() {
        var issuerSelectElements = document.querySelectorAll('.js-mollie-issuers');
        for (var i = 0; i < issuerSelectElements.length; i++) {
            issuerSelectElements[i].setAttribute('disabled', 'true');
        }
    }

    for (var i = 0; i < paymentMethodRadioElements.length; i++) {
        paymentMethodRadioElements[i].addEventListener('change', function (e) {
            disableAllIssuerSelectBoxes();
            var issuerSelect = document.querySelector('[data-method="' + e.target.value + '"]');
            if (issuerSelect) {
                issuerSelect.removeAttribute('disabled');
            }
        });
    }
</script>

                                                <style type="text/css">
  .mollie-issuer-list {
    margin-top: 15px;
  }

  .mollie-issuer-list[disabled] {
    display: none;
  }
</style>
                                            </fieldset>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div id="checkout-summary" class="col-md-12 col-lg-auto" data-hook="checkout_summary_box">
                        <div class="checkout-summary-container position-sticky">
                            <div class="checkout-content-summary">
                                <h3 class="text-uppercase text-center checkout-content-summary-header">Order Summary</h3>
                                <div class="w-100 text-uppercase checkout-content-summary-table" data-hook="order_summary">
                                    <div class="d-table-cell">Subtotal:</div>
                                    <div class="d-table-cell text-right">$147.98</div>

                                    <div class="d-table-cell">Shipping:</div>
                                    <div class="d-table-cell text-right"
                                         data-hook='shipping-total'
                                         data-currency='$'
                                         thousands-separator=','
                                         decimal-mark='.'
                                         precision='2'
                                    >
                                        $5.00
                                    </div>

                                    <div class="d-table-cell">Promotion (free shipping):</div>
                                    <div class="d-table-cell text-right">
                                        -$5.00
                                    </div>

                                    <div class="checkout-content-summary-table-order-total">
                                        <div class="d-table-cell">Total:</div>
                                        <div class="d-table-cell text-right">
        <span id='summary-order-total' data-currency="$">
          $147.98
        </span>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div data-hook="buttons">
                                <input type="submit" name="commit" value="Save and Continue" class="btn btn-primary text-uppercase font-weight-bold w-100 checkout-content-save-continue-button" data-disable-with="Save and Continue" />
                            </div>
                        </div>
                    </div>
                </form>  </div>
        </div>

        <script>
  window.addEventListener('DOMContentLoaded', function() {
    Spree.current_order_id = "R968359393"
    Spree.current_order_token = "EFy450sx7D_2MedXSxgv6Q1602765014553"
  })
</script>

    </main>

</div>

<div class="border-top footer-spree-copyright">
    <div class="container">
        <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center py-3 footer-spree-copyright-content">
            <div>Designed and developed by</div>
            <div class="mb-1 mb-lg-0">
                <a target="blank" aria-label="Go to Spark Solutions" rel="follow" href="https://sparksolutions.co/">
                    <img class="footer-spree-copyright-logo-spark mx-2" alt="Spree Commerce &amp; Ruby on Rails developers" title="Spree Commerce &amp; Ruby on Rails developers" src="/assets/spark-logo@3x-9355f05da321d3e5fca20ae091dd6750de1dc395658ccb020db44d1c8106c19c.png" />
                </a>      </div>
            <div class="d-none d-lg-inline-block mr-2">|</div>
            <div>
                © 2020
                <a href="https://demo.spreecommerce.org">Spree Demo Site</a>.
                All rights reserved.
            </div>
        </div>
    </div>
</div>

<script>
  window.addEventListener('turbolinks:load', function() {
      Spree.translations = {"coupon_code_applied":"The coupon code was successfully applied to your order.","coupon_code_removed":"The coupon code was successfully removed from your order.","coupon_code_error_icon":"/assets/error-da45849628b080464441ec34889d6e7d039b4ef8179094304b1f3af165b6d849.svg"}
  });
</script>

</body>
</html>

Could you also share any checkouts_controller overrides if applied?

No overrides applied. This is a clean spree set-up created according to the guide on spreecommerce.com 20 days ago. If you like, I can provide a link to the source code.

And lastly, could you provide insights into your gemfile?


source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.2'

gem 'spree', '~> 4.1' gem 'spree_auth_devise', '~> 4.1' gem 'spree_gateway', '~> 3.7'

gem 'spree_mollie_gateway'

Bundle edge Rails instead: gem 'rails', github: 'rails/rails'

gem 'rails', '~> 6.0.3', '>= 6.0.3.4'

Use sqlite3 as the database for Active Record

gem 'sqlite3', '~> 1.4'

Use Puma as the app server

gem 'puma', '~> 4.1'

Use SCSS for stylesheets

gem 'sass-rails', '>= 6'

Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker

gem 'webpacker', '~> 4.0'

Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

gem 'turbolinks', '~> 5'

Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder

gem 'jbuilder', '~> 2.7'

Use Redis adapter to run Action Cable in production

gem 'redis', '~> 4.0'

Use Active Model has_secure_password

gem 'bcrypt', '~> 3.1.7'

Use Active Storage variant

gem 'image_processing', '~> 1.2'

Reduces boot times through caching; required in config/boot.rb

gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do

Call 'byebug' anywhere in the code to stop execution and get a debugger console

gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end

group :development do

Access an interactive console on exception pages or by calling 'console' anywhere in the code.

gem 'web-console', '>= 3.3.0' gem 'listen', '~> 3.2'

Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring

gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end

group :test do

Adds support for Capybara system testing and selenium driver

gem 'capybara', '>= 2.15' gem 'selenium-webdriver'

Easy installation and use of web drivers to run system tests with browsers

gem 'webdrivers' end

Windows does not include zoneinfo files, so bundle the tzinfo-data gem

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

githubble01 commented 3 years ago

@Oldharlem : Just checking in.. If you need any more information, please let me know 😃.