Skip to content
No description, website, or topics provided.
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
modals close button changed to div Feb 24, 2020
shopify-plus
src
styles removed custom css for merchant rusty root Jul 17, 2019
.DS_Store after language config added Nov 11, 2019
.babelrc babel config fixed Aug 28, 2019
.gitignore
.gitlab-ci.yml
.htmllintrc linting with gulp fixed Sep 6, 2019
README.md
gulpfile.js
package-lock.json
package.json bumped js version to: 5.1.9 Feb 19, 2020
release_history.json
update_history.json
widget-options.md updated readme and options Aug 12, 2019

README.md

Description

This javascript can be used for putting Sezzle's widget in websites.

Getting Started

  1. You will need edit access to your website's code.
  2. Open up your preferred code editor (or through your admin platform).
  3. Open your site in another tab.
  4. Open up and sign in to your Sezzle Merchant Dashboard.
  5. Have your Sezzle merchant ID handy. Your Sezzle merchant ID can be found in your Sezzle Merchant Dashboard under Settings > Business.

Integration

To integrate Sezzle's widget - follow the below steps. You can also request Sezzle integrates the widget for you at no charge through the Merchant Dashboard Setup Checklist. Setup Checklist > Add Widgets to Product Pages. Current turnaround time is 7 business days.

  1. Add this to the header (<head>) of your website OR at the bottom of your cart and product files - replacing the with your Sezzle merchant ID. <script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid=<your-sezzle-merchant-id-here>"></script>

  2. Identify your targetXPath and renderToPath using the guide below.

targetXPath is the path to the element in your webpage from where the product price would be picked up from.

renderToPath is the path to the element in your webpage where the Sezzle widget will be rendered to. This is relative to targetXPath.

What is a path? A path is used to reach an element in the document. A path has the following rules:

  1. Each element can be accessed by classname, id or tag.
  2. Parent and child elements are separated by /.
  3. Current path is accessed by ..
  4. Going up a parent is by ...

Example: If targetXPath is #foo/.bar - This will look for an element with id foo and then an element with class bar inside that element's children. If renderToPath is . - This will render the widget in the same element as the price element. If renderToPath is .. - This will render the widget one parent above the price element. If renderToPath is ../.. - This will render the widget two parents above the price element. If renderToPath is ../../.my-render-element - This will render the widget two parents above the price element in an element with the class my-render-element.

  1. Add the following code at the end of your product and cart files, replacing the <path-to-price-element> and <relative-path-to-element-to-which-to-render-this-widget> with your chosen path.
<script>
  document.sezzleConfig = {
		targetXPath: '<path-to-price-element>',
    renderToPath: '<relative-path-to-element-to-which-to-render-this-widget>',
  }
</script>
<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid=<your-sezzle-merchant-id-here>"></script>
  1. Usinig the language feature is pretty simple. You can pass either a string or a function (which returns a string). Right now we support only english ('en') or french ('fr'). An example would help you understand this better.

    Using as String:

  <script>
    document.sezzleConfig = {
      targetXPath: '<path-to-price-element>',
      renderToPath: '<relative-path-to-element-to-which-to-render-this-widget>',
      language:'fr'
    }
  </script>
  <script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid=<your-sezzle-merchant-id-here>"></script>
 Using as function:
  <script>
    document.sezzleConfig = {
      targetXPath: '<path-to-price-element>',
      renderToPath: '<relative-path-to-element-to-which-to-render-this-widget>',
      language:function(){
        if (<your-logic>){
          return 'en'
        }
        return 'fr'

      }
    }
  </script>
  <script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid=<your-sezzle-merchant-id-here>"></script>

For further customization and more details, please check the options at click here

Note that if you want to use a grayscale Sezzle logo put

https://d3svog4tlx445w.cloudfront.net/branding/Sezzle-logos/png/Sezzle-logo-all-black-sm-100w.png

into the imageUrl to override the default color logo.

If you run into any issues please contact merchantsupport@sezzle.com, or request Sezzle to add the widgets for you through your Merchant Dashboard > Setup Checklist > Add Widgets to Product Pages.

You can’t perform that action at this time.