Enhanced Stripe Elements Styling Options

This new integration will allow the ability to define css in existing style sheets or in style tags. The following css styles are supported (as defined by Stripe):

font-family, font-size, font-smoothing, font-style, font-variant, font-weight, icon-color, line-height, letter-spacing, text-align, text-decoration, text-shadow, text-transform, and color.

You can further define each action as a style in the #[div-id] .mm-stripe-elements-container .[action] where [div-id] can be #mm_field_cc_number_div, #mm_field_cc_cvv_div, or #mm_field_cc_exp_div and action can be base, invalid, or complete.

Example:

#mm_field_cc_number_div .mm-stripe-elements-container .complete {
    font-size: 42px;
    font-family: Verdana;
    color: yellow;
    line-height: 50px;
} 

Adding Placeholder to Stripe Fields

Placeholder text within the fields can be placed using this CSS:

#mm_field_cc_number_div .mm-stripe-elements-container .base {
  content: "Card Number";
}
#mm_field_cc_exp_div .mm-stripe-elements-container .base {
  content: "Expiration";
}
#mm_field_cc_cvv_div .mm-stripe-elements-container .base {
  content: "Security Code";
}

Certain elements can be adjusted around the field. Here are more examples:

.StripeElement {
    background: #fafafa;
    box-shadow: 0px 0px 0px #fff;
    height: 53px;
    border-radius: 0px 0px 0px 0px;
    width: 100% !important;
    animation: 0s ease 0s 1 normal none running none;
    border: 1px solid rgb(228, 228, 228) !important;
    padding: 14px 8px;
}