Servicebot - Embed Demo - Pricing Embed + Checkout Embed - Francis

index.html

<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700|Open+Sans:300,400,700" rel="stylesheet">

<div id="servicebot-tiers-embed"></div>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://servicebot.io/js/servicebot-tiers-embed.js" type="text/javascript"></script>
<script  type="text/javascript">
    Servicebot.Tiers({
        templateId : 2,
        url : "https://demo2018.serviceshop.io",
        selector : document.getElementById('servicebot-tiers-embed'),
        handleResponse : (response) => {
            //Response function, you can put redirect logic or app integration logic here
        },
        forceCard : false, //set to true if you want credit card to be a required field for the customer
        setPassword : false //set to true if you want customer to fill out a password
    })
</script>

servicebot-embed-demo-pricing-embed-checkout-embed-francis.markdown

Servicebot - Embed Demo - Pricing Embed + Checkout Embed - Francis

A Pen by Ka Sy on CodePen.

License.

style.scss

/** Responsive Breakpoints **/
@mixin breakpoint($point) {
  @if $point == FourK {
    @media (max-width: 1600px) {
      @content;
    }
  } @else if $point == TwoK {
    @media (max-width: 1250px) {
      @content;
    }
  } @else if $point == Retina {
    @media (max-width: 650px) {
      @content;
    }
  } @else if $point == FullHD {
    @media (max-width: 1080px) {
      @content;
    }
  } @else if $point == iPad {
    @media (max-width: 768px) {
      @content;
    }
  } @else if $point == iPhone {
    @media (max-width: 411px) {
      @content;
    }
  }
}

/** Pricing Embed Top level Element **/
#servicebot-tiers-embed {
  /** Quick Styling By SCSS Variables Starts**/
  // Fonts
  // You will need to use a font that is available to your website.
  $custom-font: "Open Sans", "Arial";
  $custom-title-font: "Merriweather", "Arial";
  // Colors
  $color-primary: #000000;
  $color-secondary: #000000;
  $color-success: black;
  $color-light: white;
  $color-dark: gray;
  // Font Sizes
  $fs-billing-selector: 13px;
  $fs-billing-name: 20px;
  $fs-billing-price: 40px;
  $fs-billing-unit: 16px;
  $fs-features: 14px;
  // Checkout Embed
  $label-color: #000000;
  $button-color: #000000;
  /** Quick Styling By SCSS Variables Ends **/

  /** Billing Type Selector Styling Ends **/
  .servicebot-billing-type-selector {
    font-family: $custom-font;
    @include breakpoint(iPad) {
    }

    ul._selector {
      font-size: $fs-billing-selector;
      border-radius: 0;
      background: #fff;
      padding: {
        top: 10px;
        bottom: 10px;
        left: 20px;
        right: 20px;
      }

      li._interval {
        &:hover {
        }

        &._selected {
          box-shadow: none;
          border-radius: 2px;
          background-color: $color-primary;
        }
      }
    }
  }
  /** Billing Type Selector Styling Ends**/

  /** Pricing Table Styling Starts **/
  .servicebot-pricing-table {
    border-color: $color-primary;

    @include breakpoint(iPad) {
    }

    ._tier {
      //each pricing column

      @include breakpoint(iPad) {
      }

      ._name {
        font-family: $custom-title-font;
        font-size: $fs-billing-name;
        color: $color-light;
        background-color: $color-primary;
      }

      ._price {
        font-size: $fs-billing-price;
        color: $color-primary;

        ._interval-name {
          font-size: $fs-billing-unit;
        }
      }

      ul._feature-list {
        margin-bottom: 40px;

        ._item {
          font-size: $fs-features;
          font-weight: 100;
          padding: 16px 0;
        }
      }

      button._select-tier {
        //select button
        box-shadow: none;
        color: #000000;
        border-color: #000000;
        font-size: 14px;
      }
    }
  }
  /** Pricing Table Styling Ends **/

  /** Checkout Embeddables **/
  .servicebot--embeddable.custom {
    &.servicebot--request-user-form-wrapper {

      .rf--form-wrapper {
        border-color: $color-primary;
      }

      ._heading-wrapper{
        h2{
          color: $color-primary;
        }
      }
      ._content_wrapper{}

      label{
      }
      input{
      }
      .addon-checkbox-widget-default-value-wrapper{

        .addon-checkbox-widget-default-value{

          .request-form-toggle-option-wrapper{

            .form-group.form-group-flex{
            }

            .slideToggle{
              .checkbox, input{
              }
            }
          }

          & > .form-input-flex{

          }
        }

        .iconToggleField{

          &.active{
            span.itf-icon{
            }
          }
        }
      }

    }

    .rf--form-wrapper{
      form{
        button.buttons{
          background-color: $color-primary;
        }
      }
    }
  }

  .servicebot--rf-embeddable.custom {
    &.servicebot--request-user-form-wrapper {
    }

    .rf--form-wrapper {
      &.summary-shown {

      }

      .rf--form {

        .rf--form-heading {}

        .rf--form-content {

          .rf--basic-info {}

          .divider {}

          .rf--form-elements {
            .rf--body {
              form {
                .rf--form-inner {
                  ._heading-wrapper {
                    background-color: #ececec;
                    h2 {}
                  }
                  .rf--summary {
                    background-color: white;
                    h4 {color: $label-color;}
                    h5 {color: $label-color;}
                    .subscription-pricing, .fe--total-price-wrapper {}
                    .fe--base-price-value, .fe--total-price-value {color: $label-color;}
                    .fe--total-price-wrapper {}
                    .fe--total-price-label h5 {color: $label-color !important;}
                    .fe--total-price-value {}
                  }
                  ._content_wrapper {}
                  &._step-0 {}
                  &._step-1 {
                    ._content_wrapper {
                    }
                  }
                }
                .sb-form-group {
                  label {color: $label-color;}
                  .form-input-flex {
                    input {
                      &.form-control {
                        &.has-error {}
                      }
                    }
                    .form-error {}
                  }
                }
                button {
                  &.buttons {
                  }
                  &._text {
                    color: $label-color !important;
                  }
                }
              }
            }
          }
        }
      }
    }
    .sb-form-group {
      .form-error {}
    }
    .button-wrapper{
      .buttons{
        &._next{}
      }
    }

    #card-element{
      h5{color: $label-color;}
      .StripeElement{
        .ElementsApp{
          .InputElement{
          }
        }
      }
    }
  }
  /** Checkout Embeddables Ends **/
}