Payment form style customization options

Created on 6 October 2022, about 2 years ago
Updated 16 February 2023, almost 2 years ago

Problem/Motivation

The SqPaymentForm fields do not match the style of other form inputs in my site's theme. The Javascript that comes with the module to implement SqPaymentForm has all the credit card input configuration hard-coded with no easy way to customise it short of overriding the entire JS file with your own version through a form alter hook to swap out the stock one. This would not be a good solution as then any future updates to the module that affect the Javascript would not take effect, plus it makes no sense when the only thing that you might want to customize is the styles of the inputs.

Steps to reproduce

Results may vary depending on your front end theme, but use this module on almost any Drupal site and go through the checkout process. There's a good chance the credit card form fields just won't quite match.

Proposed resolution

The SqPaymentForm Javascript provides everything needed to customize the styles, as noted in this blog article - https://developer.squareup.com/blog/design-your-custom-payment-form-with... - and also detailed in the Web payments SDK documentation. It's just a matter of setting up a means by which the code in the Javascript can have some customization data passed to it to use by some means or another.

One solution, therefore, would be to provide an admin form that lets you specify values for the inputClass and inputStyles options for each form input. It's already passing configuration into the Javascript via drupalSettings, so this could be added there. Then the Javascript would just need to have some variables with default values that could be overridden with any provided customizations.

It would be nice of there was a simple way to extend Drupal's javascript behaviours or something, but I've yet to see a way to do that - somebody please tell me if I'm missing something.

Remaining tasks

Come up with a patch to provide the desired customizations.

User interface changes

Update to the square admin config form to include input style customization options.

API changes

None.

Data model changes

None.

Feature request
Status

Active

Version

1.7

Component

User interface

Created by

🇨🇦Canada teknocat

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024