Adding custom style to Stripe Element plugin

Duke S.
Topic Author
Offline
Junior Member

More

4 years 8 months ago - 4 years 8 months ago #127402 by Duke S.

Adding custom style to Stripe Element plugin was created 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:

Code:

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:
stripe.com/docs/stripe-js/elements/quickstart

Last edit: 4 years 8 months ago by Duke S..

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

Tuan Pham Ngoc
Offline
Administrator

More

4 years 8 months 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 Member

More

4 years 8 months 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
Offline
Administrator

More

4 years 8 months 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.

Powered by Kunena Forum

Adding custom style to Stripe Element plugin

Support

Documentation

Information

Connect Us