Adding custom style to Stripe Element plugin

  • Duke S.
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
More
1 week 1 day ago - 1 week 1 day ago #127402 by Duke S.
I'm building a site that serves disabled people, so accessibility is important. The Stripe website describes that Stripe Element can be styled using Javascript as follows:
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

Where in the scheme of the stripe plugin code is the best place to inject this custom js snippet so it will apply to the plugin's code.
See Javascript Tab on this page for recommended implementation:
https://stripe.com/docs/stripe-js/elements/quickstart
Last edit: 1 week 1 day ago by Duke S..

Please Log in or Create an account to join the conversation.

  • Tuan Pham Ngoc
  • Away
  • Administrator
  • Administrator
More
1 week 18 hours ago #127407 by Tuan Pham Ngoc
Replied by Tuan Pham Ngoc on topic Adding custom style to Stripe Element plugin
Hello

The code for stripe card element can be found on layout file. Depends on the registration type you are using, you can modify code of following files:

- components/com_eventbooking/themes/default/register/default.php
- components/com_eventbooking/themes/default/register/group_billing.php
- components/com_eventbooking/themes/default/register/cart.php

(Search for var style = in the code and you will see it)

Regards,

Tuan
The following user(s) said Thank You: Duke S.

Please Log in or Create an account to join the conversation.

  • Duke S.
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
More
1 week 7 hours ago #127414 by Duke S.
Replied by Duke S. on topic Adding custom style to Stripe Element plugin
My hero - Thank you!!!!!!!!!!

Please Log in or Create an account to join the conversation.

  • Tuan Pham Ngoc
  • Away
  • Administrator
  • Administrator
More
1 week 1 hour ago #127416 by Tuan Pham Ngoc
Replied by Tuan Pham Ngoc on topic Adding custom style to Stripe Element plugin
You're welcome :). Please remember that one the modification is done, you should move the modified file to PATH_TO_TEMPLATE/html/com_eventbooking/register folder so that the change won't be lost when you update to future releases of the extension

Regards,

Tuan
The following user(s) said Thank You: Duke S.

Please Log in or Create an account to join the conversation.