Skip to content

Credit Card

boxblinkracer edited this page May 18, 2021 · 3 revisions

The credit card is probably one of the easiest and most common used payment method. Using this payment method doesn't require lots of configuration.

Still it's possible to use it in 2 different ways.

Simple Credit Card

If you do not have enabled the "Credit Card Components", Mollie will automatically redirect the user to the external Mollie payment page, where he will enter the credit card data.

The shop does not know anything about the data.

Use this as a simple plug and play solution to provide credit card payments.

Credit Card Components

If you don't want to redirect your customer to an external page to enter the credit card data, you can also show that option directly in your shop.

Enable the "Credit Card Components" in the Mollie plugin configuration, clear your caches and also generate the theme.

Now the payment selection in Shopware will instantly show a form to enter data if credit card is selected. Validation will happen immediately when the customer tries to submit the credit card payment method.

If everything succeeds, the Mollie plugin will automatically use the entered credit card when the customer places his order.

If the data is somehow gone, missing or invalid, the default payment page of Mollie will be shown, where he can add the credit card data one more time.

Troubleshooting

Credit Card Components can't be entered

If a non-Mollie payment method is selected and the customer switches to Mollie credit card (with components enabled) the data cannot be entered in the fields in some circumstances. However, if the page is reloaded, it might work in the end. In addition to this, there could be this error in the console of the browser: "Uncaught ReferenceError: Mollie is not defined".

There can be 2 root causes for this:

  • The Shopware template "shipping_payment.tpl" has been overwritten/extended or modified in the custom Theme of your shop.
  • The template has been changed so that the "shipping_payment.tpl" file of the Mollie plugin is not used at all anymore

Reason:

The Mollie plugin adds a Mollie.js file in "shipping_payment.tpl", which is required for the Javascript functionality. If the template is not correctly integrated, this file is not loaded immediately when the payment selection changes. When changing to Credit Card, the Mollie.js is already required right before the "components.tpl" would load it again. If a full page reload is done, then everything is already existing, and thus its working correctly.

Solution:

Make sure to include the original block with {$ smarty.block.parent} when extending the "frontend_index_content" block in the "shipping_payment.tpl" template, as this is the only way to ensure that other templates that extend this block can also be loaded.

Clone this wiki locally