Mollie Components support added in 2.1.0 but no documentation on this

[matt-adigital]

Description

Used the example template which comes with the plugin and then tweaked some styles, this just submits through to Mollie where you still have to select your payment method though. Can the example template please be updated to show a Mollie Components approach or to have this detailed in the readme file under a front end code heading? How much twig vs js is needed for this approach. Thanks.

Steps to reproduce

1. Install Mollie Plus after plugin version 2.1.0
2. Copy example template to front end
3. Test checkout and still having to select payment method offsite instead of onsite after submitting the form

[WHITE-developer]

Hi,

We where still working on updating the docs.

Things to do to make the Mollie components work:

• Register this assetbundle to your template (just pushed 2.1.2 where the external mollie.js file is also included in this bundle)

• Your payment form should have the following id: paymentForm

• Your payment form content should be wrapped with a div with class ".mollie-plus-form" and the following data attributes: data-payment-form-namespace="{{ gateway.handle|commercepaymentFormNamespace }}" data-profile-id="{{ parseEnv(gateway.getProfileId) }}" data-test-mode="{{ parseEnv(gateway.testMode) }}" data-locale="" -> one of these strings en_US nl_NL nl_BE fr_FR fr_BE de_DE de_AT de_CH es_ES ca_ES pt_PT it_IT nb_NO sv_SE fi_FI da_DK is_IS hu_HU pl_PL lv_LV lt_LT. data-payment-namespace="paymentForm-{{ handle }}"

• Next you should add the following fields to your payment form

                      <div class="row">
                          <div class="form-group form-group--card-holder">
                              <label class="label" for="card-holder">{{ "Name"|t }}</label>
                              <div id="card-holder"></div>
                              <div
                                      id="card-holder-error"
                                      class="field-error"
                                      role="alert"
                              ></div>
                          </div>
                      </div>
  
                      <div class="row">
                          <div class="form-group form-group--card-number">
                              <label class="label" for="card-number">{{ "Card number"|t }}</label>
                              <div id="card-number"></div>
                              <div
                                      id="card-number-error"
                                      class="field-error"
                                      role="alert"
                              ></div>
                          </div>
                      </div>
  
                      <div class="row">
                          <div class="form-group form-group--expiry-date">
                              <label class="label" for="expiry-date">{{ "Expiry date"|t }}</label>
                              <div id="expiry-date"></div>
                              <div
                                      id="expiry-date-error"
                                      class="field-error"
                                      role="alert"
                              ></div>
                          </div>
  
                          <div class="form-group form-group--verification-code">
                              <label class="label" for="verification-code">{{ "CVC"|t }}</label>
                              <div id="verification-code"></div>
                              <div
                                      id="verification-code-error"
                                      class="field-error"
                                      role="alert"
                              ></div>
                          </div>
                      </div>
                  </div>

              You should also still add field that includes your payment method.

  But the example template is also up to date to work with the mollie components, and it's styling is based on the example templates of Craft Commerce and tailwindCss but could be styled with normall CSS also ofcource.

  As you still have to select a payment method I guess you didn't add the paymentMethod input

[matt-adigital]

Thank you very much for updating the documentation and providing those instructions. Could the changes in the release you pushed also be applied to the v1 branch? The site we are using is on Craft 3 currently. Thanks!

[WHITE-developer]

Hey,

The changes have already been made on the v1. If you are on Craft 3 you also don't need the data namespace object's as this is a Craft 4 change