Memberpress, stripe elements css customizations

I’m using Stripe within the Memberpress plugin. I want to make customizations to the checkout form elements according the the stripe docs. The memberpress plugin is handling the stripe.js, so is there a way for me to modify the css via my js in sage?

UPDATE: Currently trying to add some javascript into a route and I get 'Stripe' is not defined, so seems like an asset order problem. appears to be loading before .../dist/scripts/main.js.

UPDATE (SOLUTION FOR NOW): there’s an unfinished filter in the memberpress plugin

The filter is in this file:

wp_localize_script('stripe-create-token', 'MeprStripeGateway', array('public_key' => $this->settings->public_key, 'style' => MeprHooks::apply_filters('mepr-stripe-checkout-element-style', array('base' => array()))));

add_filter('mepr-stripe-checkout-element-style', function () {
    return array(
        "lineHeight" => "30px", 
        "fontFamily" => "proxima-nova, sans-serif", 
        "fontSize" => "16px",

It’s for modifying this,

“card_style.base”, which are the styles you can learn about in the stripe docs.

Unfortunately, I think you will need to add card_style.base =; right after var card_style.

// TODO: Before we launch this we need to make this part configurable using wp_localize_script or something
var card_style = {
  base: {
    lineHeight: '30px',
    fontFamily: 'proxima-nova, sans-serif',
card_style.base =;

This topic was automatically closed after 42 days. New replies are no longer allowed.