Customizing The Stripe Widget

By using custom CSS you are able to modify some of the Stripe form layouts to make it fit with your brand by changing background colors, text, and more. Here, we’re providing a “starting” custom CSS file to help you get started with some working examples.

Download the CSS Template or if you already have your own styling sheet, then you can copy/paste the CSS elements that you are targeting from below:

Step 1 Elements

Remember, the widget that the Stripe code snippet generates is a three step process. In Step 1, it will collect the customer’s information, specifically their Full Name, Email Address, and Phone Number (Optional).

Element Names

#sf_form_step1 {
}
#sf_step1_ttl1 {
}
#sf_step1_ttl2 {
}
#sf_fullname_lbl {
}
#sf_fullname {
}
#sf_email_lbl {
}
#sf_email {
}
#sf_phone1_lbl {
}
#sf_phone1 {
}
#sf_btn_go_step2{
}
#sf_btn_go_step2:after{
}

Here, we’ll be changing some of the text and background colors on certain elements by applying simple CSS:

You can also change the button text using the following css code:

#sf_btn_go_step2:after {
content: 'Continue' !important;
}

Step 2 Elements

In Step 2, it will collect the customer’s credit card information along with any coupon code (if applicable) before processing the payment.

Element Names

#sf_form_step2 {
}
#sf_step2_ttl1 {
}
#sf_step2_ttl2 {
}
#sf_edit_profile_lnk {
}
#sf_prodName {
}
#sf_prodPrice {
}
#sf_bump_prodName {
}
#sf_bump_prodPrice {
}
#sf_total_lbl:after{
}
#sf_total {
}
#sf_totalPrice {
}
#sf_coupon_lbl {
}
#sf_coupon {
}
#sf_coupon_message {
}
#sf_bump_cb {
}
#sf_bump_div_descr {
}
#sf_btnSubmit  {
}
.sf_setupFee_lbl:after {
}
#sf_price_lbl:after {
}
#sf_discount_lbl:after {
}
#sf_tax_lbl:after {
}

Again, we’re just changing some of the text and background colors:

Additionally you can change any of the labels. For example, if you want to replace the “Total:” text with “Total Charges For Today:” instead, you can do so by adding the following:

#sf_total_lbl:after {
    content: 'Total Charges For Today:' !important;
}

Step 3 Elements

Finally, on the third step, it will ask the customer to create a username and password.

Element Names

#sf_form_step3{
}
#sf_step3_ttl1{
}
#sf_step3_ttl2{
}
#sf_step3_headline{
}
#sf_step3_description{
}
#sf_login_lbl{
}
#sf_login{
}
#sf_password_lbl{
}
#sf_password{
}
#sf_password_reqirements{
}
#sf_btn_finish{
}

Just like in the previous steps, we want everything to be consistent, as consistency is key!

Other Elements

These elements include the error, success, and disclaimer messages (if any).

Element Names

#sf_error{
}
#sf_disclaimer{
}
#sf_success{
}
#sf_success_message{
}

And by adding a touch of color can make all the difference:

Allowed URL Parameters

The following parameters allow you to change some functionality of the Stripe widget:

• loc={location id} – This is used to specify the location where users will be created if it is not already specified under your Stripe settings.
• use_cpn=0 – Hide coupon field
• use_phone=0 – Hide phone field
• phone_required=1 – Make the phone field required
• get_user=0 – Show full form with all fields
• themer_loc=12345 – Uses a location ID to display theme colors
• v=v2 – As we update the widget, you can specify which version to use
• loc_fields=company,address,city,state,zip – For location purchases, allows you to request additional info after purchase
• user_fields=address,city,state,zip,country – For individual purchases, allows you to request additional info before purchase
• use_lang_select=1 - Adds a Language selection field to the Step 3 of the V2 version of widget
• lang=en-en - Used in combination with language selection, will default the selection to the specified language
• disclaimer_as_bill_agreement=1 - Used with associated disclaimer copy to display a required checkbox before a user can proceed with checkout

For instance, If you’d like to remove the coupon field from the widget, you can pass “&use_cpn=0 ” as a parameter at the very end of the opening script tag. Using a code snippet example, below you can see what that might look like:

Custom Meta Tags

In addition to being able to specify custom meta tags to be constant with a product and sent to Stripe, you also have the ability to send in more “dynamic” custom meta tags via URL parameters.

You will need to append the URL with a parameter of mt and pass its value in this format: sub,sub_key,sub_value;cus,cus_key,cus_value

• sub – This assigns the metatag to the subscription details
• sub_key – Name of the meta tag that will be added to the subscription record
• sub_value – Value for the meta tag that will be added to the subscription record
• cus – This assigns the metatag to the subscription details
• cus_key – Name of the meta tag that will be added to the subscription record
• cus_value – Value for the meta tag that will be added to the subscription record

Example of how it would look, if you wanted to track a referrer and a campaign:

https://www.yourwebsite.com/stripeform_snippet.html?mt=sub,affiliate,John_smith;cus,campaign,facebook

This would be added to Stripe and presented as below:

For questions or assistance, please contact LSVT Support at support@lightspeedvt.com