Skip to content
Weekly Payment Method Integration Documentation
JavaScript HTML CSS Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
html
lib
src
test
.editorconfig
.gitignore
.jscsrc
Gruntfile.js
README.md
cdn.php
composer.json
composer.lock
deploy-cdn.sh
flexprice.css
flexprice.js
package.json
yarn.lock

README.md

Weekly Payment Widget

JS for placement of FlexShopper weekly price on ecommerce stores implementing the FlexShopper plugin Examples

Usage

Place script in header and configure FlexPay Widget with options:

    <script type="text/javascript" src="http://cdn.flexprice.com/flexprice.js"></script>
    <script type="application/javascript">
        var _FP = new _FlexPrice({
            productSelector: '.product',
            priceSelector: '.price'
        });
    </script>

Configuration Options

Required
  • productSelector - Selects the product container or containers
  • priceSelector - Selects the element containing the price relative to the product container
Optional:
  • targetSelector - Selects the element which will be used as the target for insertion - widget is inserted as the last child of the target's parent, defaults to the "priceSelector" option
  • size - Set the size of the plugin labels (XS,SM,MD, and AUTO), default AUTO
  • autoInject - Automatically inject widget on page load. If disabled, widget must be injected manually using inject() call.
  • debug - Enable debug mode, default false

Note: The priceSelector and targetSelector elements must be children of the productSelector. If you are configuring a single product using the FlexPrice widget then the productSelector can be simply set to the body tag.

Configuration Examples:

Inject On Multiple Products
    <script type="application/javascript">
    new _FlexPrice({
        productSelector: '.sub-category-items .row'
        ,priceSelector: '.price'
        ,size: 'MD'
    });
    </script>
Inject On Single Product with size
    <script type="application/javascript">
        var _FP = new _FlexPrice({
            size: 'SM' // 'AUTO', 'MD', 'SM', or 'XS'
            productSelector: '#product-main-content',
            targetSelector: 'input.add-cart'
        });
    </script>
Custom injection target selector (useful for product detail pages):
    <script type="application/javascript">
        var _FP = new _FlexPrice({
            productSelector: '#product-main-content',
            priceSelector: '#reg_price',
            targetSelector: 'input.add-cart'
        });
    </script>
Injection with placeholder:

Step 1: Add Placeholder HTML

<div class="fs-placeholder"><div style="display: none"></div></div>

Step 2: Configure & Use Plugin

    <script type="application/javascript">
        var _FP = new _FlexPrice({
            productSelector: '#some-container',
            priceSelector: '.price',
            targetSelector: '.fs-placeholder div'
        });
    </script>
You can’t perform that action at this time.