Memberpress, stripe elements css customizations

[ericgauvin]

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. https://js.stripe.com/v3/?ver=1.5.3 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:
…/site/web/app/plugins/memberpress/app/gateways/MeprStripeGateway.php

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,
…/site/web/app/plugins/memberpress/app/gateways/stripe/create_token.js

“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 = MeprStripeGateway.style; 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 = MeprStripeGateway.style;