1. Home
  2. Marketing & eCommerce
  3. Stripe
  4. Customizing The Stripe Widget
  1. Home
  2. Marketing & eCommerce
  3. Customizing The Stripe Widget

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 paramters 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
  • get_user=0 – Show full form with all fields

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:

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

Related Articles