npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@chargebee/atomicpricing

v0.8.2

Published

JS wrapper for your Atomic Pricing hosted page

Downloads

3,899

Readme

Pricify JS

JS wrapper for your Atomic Pricing hosted page

Table of contents

Get Started

Vanilla App

Auto bootstrapped (recommended)

<script
  src="https://js.chargebee.com/atomicpricing/pricify.js"
  data-pricify-auto-bootstrap="true"
></script>
<div
  id="pricify-hosted-pricing-page"
  data-pricify-site="01GV57EG6A1V28QR8KYBK8FE3J"
  data-pricify-pricingpage="01GV57HY1KM0ZVBSMR7SCV6VDF"
></div>

Controlled init

<script src="https://js.chargebee.com/atomicpricing/pricify.js" defer></script>
<script>
  if (
    /**
     * whenever you are ready
     * If you are planning to use onLoad, then use data-pricify-auto-bootstrap="true" instead
     */
  ) {
     window.Pricify.init();
   }
</script>
<div
  id="pricify-hosted-pricing-page"
  data-pricify-site="01GV57EG6A1V28QR8KYBK8FE3J"
  data-pricify-pricingpage="01GV57HY1KM0ZVBSMR7SCV6VDF"
></div>

React (CSR)

Installation

npm install --save @chargebee/atomicpricing

Usage

import Pricify from '@chargebee/atomicpricing';
import { useEffect } from 'react';

export default function PricingPage() {
  useEffect(() => {
    Pricify.init();
  }, []);

  return (
    <div
      id='pricify-hosted-pricing-page'
      data-pricify-site='01GV57EG6A1V28QR8KYBK8FE3J'
      data-pricify-pricingpage='01GV57HY1KM0ZVBSMR7SCV6VDF'
    ></div>
  );
}

Next.js (SSR)

Note that you need to mount the div and then call Pricify init to prevent hydration errors

import Pricify from "@chargebee/atomicpricing";
import { useEffect, useState } from "react";

export default function PricingPage() {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  useEffect(() => {
    if (hasMounted) {
      Pricify.init();
    }
  }, [hasMounted]);

  return (
    <>
      {hasMounted && (
        <div
          id="pricify-hosted-pricing-page"
          data-pricify-site="01GV57EG6A1V28QR8KYBK8FE3J"
          data-pricify-pricingpage="01GV57HY1KM0ZVBSMR7SCV6VDF"
        ></div>
      )}
  )
}

Other popular frameworks

More examples are coming soon !


Pricify Object

Functions

init

This function initialises and renders the Pricify Hosted Page

openPricingPage

This function opens the pricing page from pricing page session response. This function is useful when you want to open the pricing page using session context. When you call this function, make sure you set data-pricify-integrationtype="api" in the pricing page div.

Pricify.openPricingPage({
  pricingPage: function() {
    return fetch('your_backend/generate_pricing_page_session', {
      method: "POST",
      data: data,
    }).then(res => res.json()),
  },
});

setVisitor

Set these visitor attributes to pricing page context and passes it forward to Chargebee checkout. Visitor gets converted to a customer and hence follows attributes based on what is supported in a customer record in Chargebee. (All these are optional)

| Attribute | Required | Type | Description | | :------------- | :------: | :---------------------------: | :--------------------------------------------------------------------------------- | | firstName | false | string | First name | | lastName | false | string | Last name | | email | false | string | The email address | | phone | false | string | The phone number | | company | false | string | The company name | | customFields | false | Map<string, string | number> | Customer custom fields declared in chargebee. Key is of the format cf_field_name |

Note: setVisitor can be used only to set attributes for new customers. Atomic Pricing currently doesn't support updating an existing customer / subscription.

examples

To set visitor attributes for all pricing page embedded in single page. You can use this if you have only one pricing page embedded in your page or you need to set same visitor attributes for all of your pricing pages.

Pricify.setVisitor({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
});

If you need to set visitor attributes for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setVisitor function.

const data = {
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
};
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setVisitor(data, options);

Pro Tip: You can control the behavior of the fields on the Chargebee Checkout by going to Checkout Field settings (Configure Chargebee > Checkout & Self Serve Portal > Fields) in your chargebee account. You can configure the fields in the following way:

  • Use as Hidden Parameter:
    • Fields are not displayed on the checkout.
    • Values passed through setVisitor() are stored against the field
  • Read-only:
    • Fields are visible on the checkout
    • Fields are pre-filled with setVisitor() values.
    • Users cannot edit these values.
  • Show:
    • Fields are visible on the checkout
    • Fields are pre-filled with setVisitor() values.
    • Users can edit these values.

setBillingAddress

Sets the billing address to pricing page context and passes it forward to Chargebee checkout. Billing address gets saved onto the customer record at the end of checkout. (All these are optional)

| Attribute | Required | Type | Description | | :----------------- | :------: | :----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | firstName | false | string | First name | | lastName | false | string | Last name | | email | false | string | The email address | | phone | false | string | The phone number | | company | false | string | The company name | | line1 | false | string | Address line 1 | | line2 | false | string | Address line 2 | | line3 | false | string | Address line 3 | | city | false | string | The name of the city. | | stateCode | false | string | The ISO 3166-2 state/province code without the country prefix. Currently supported for USA, Canada and India. For instance, for Arizona (USA), set state_code as AZ (not US-AZ). For Tamil Nadu (India), set as TN (not IN-TN). For British Columbia (Canada), set as BC (not CA-BC). | | state | false | string | The state/province name. Is set by Chargebee automatically for US, Canada and India If state_code is provided. | | zip | false | string | Zip or postal code. The number of characters is validated according to the rules specified here. | | country | false | string | The address country of the customer. Must be one of ISO 3166 alpha-2 country code. If you have enabled EU VAT in 2021 or later, or have manually enable the Brexit configuration, then XI (the code for United Kingdom -- Northern Ireland) is available as an option. | | validationStatus | false | string | The address verification status. - valid: Address was validated successfully. - partially_valid: The address is valid for taxability but has not been validated for shipping. - invalid: Address is invalid. - not_validated: Address is not yet validated. |

Note: setBillingAddress can be used only to set attributes for new customers. Atomic Pricing currently doesn't support updating an existing customer / subscription.

examples

To set visitor attributes for all pricing page embedded in single page. You can use this if you have only one pricing page embedded in your page or you need to set same visitor attributes for all of your pricing pages.

Pricify.setBillingAddress({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
  city: 'Chennai',
  stateCode: 'TN',
  country: 'IN',
});

If you need to set billing attributes for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setBillingAddress function.

const data = {
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
  city: 'Chennai',
  stateCode: 'TN',
  country: 'IN',
};
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setBillingAddress(data, options);

setShippingAddress

Sets the shipping address to pricing page context and passes it forward to Chargebee checkout. Shipping address gets saved onto the customer record at the end of checkout. (All these are optional)

| Attribute | Required | Type | Description | | :----------------- | :------: | :----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | firstName | false | string | First name | | lastName | false | string | Last name | | email | false | string | The email address | | phone | false | string | The phone number | | company | false | string | The company name | | line1 | false | string | Address line 1 | | line2 | false | string | Address line 2 | | line3 | false | string | Address line 3 | | city | false | string | The name of the city. | | stateCode | false | string | The ISO 3166-2 state/province code without the country prefix. Currently supported for USA, Canada and India. For instance, for Arizona (USA), set state_code as AZ (not US-AZ). For Tamil Nadu (India), set as TN (not IN-TN). For British Columbia (Canada), set as BC (not CA-BC). | | state | false | string | The state/province name. Is set by Chargebee automatically for US, Canada and India If state_code is provided. | | zip | false | string | Zip or postal code. The number of characters is validated according to the rules specified here. | | country | false | string | The address country of the customer. Must be one of ISO 3166 alpha-2 country code. If you have enabled EU VAT in 2021 or later, or have manually enable the Brexit configuration, then XI (the code for United Kingdom -- Northern Ireland) is available as an option. | | validationStatus | false | string | The address verification status. - valid: Address was validated successfully. - partially_valid: The address is valid for taxability but has not been validated for shipping. - invalid: Address is invalid. - not_validated: Address is not yet validated. |

Note: setShippingAddress can be used only to set attributes for new subscriptions. Atomic Pricing currently doesn't support updating an existing customer / subscription.

examples

To set visitor attributes for all pricing page embedded in single page. You can use this if you have only one pricing page embedded in your page or you need to set same visitor attributes for all of your pricing pages.

Pricify.setShippingAddress({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
  city: 'Chennai',
  stateCode: 'TN',
  country: 'IN',
});

If you need to set shipping attributes for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setShippingAddress function.

const data = {
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
  city: 'Chennai',
  stateCode: 'TN',
  country: 'IN',
};
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setShippingAddress(data, options);

setQuantity

Set the initial quantity for all quantity based plans in pricing page.

examples

To set quantity for all pricing page embedded in single page. You can use this if you have only one pricing page embedded in your page or you need to set same quantity for all of your pricing pages.

Pricify.setQuantity(10);

If you need to set quantity for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setQuantity function.

const quantity = 10;
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setQuantity(quantity, options);

Pro Tip: Once you've set the initial quantity with setQuantity(), consider using the quantity slider for added customer control. This quantity slider can be toggled through plan settings on AtomicPricing.

  • When the slider is enabled, the quantity set with setQuantity() is initially applied, but users can still adjust it using the slider.
  • If the slider is disabled, the quantity set with setQuantity() will be used directly for the Checkout.

setBusinessEntity

Sets the business entity to pricing page and passes it forward to Chargebee checkout. Business entity gets saved onto the customer and subscription record at the end of checkout.

examples

To set business entity for all pricing page embedded in single page. You can use this if you have only one pricing page embedded in your page or you need to set same business entity for all of your pricing pages.

Pricify.setBusinessEntity('business_entity_id');

If you need to set business entity for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setBusinessEntity function.

const businessEntityId = 'business_entity_id';
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setBusinessEntity(businessEntityId, options);

Data attributes

Script (for vanilla integration)

| Attribute | Required | Type | Description | | :---------------------------- | :------: | :----: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | data-pricify-auto-bootstrap | false | string | Set it to true if you want the script to render the Pricing page out of the box. If you are not providing this, you need to call window.Pricify.init() when you want the Pricing Page to be rendered |


Pricing Page Div

| Attribute | Required | Type | Description | | :------------------------------------- | :------: | :----: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | data-pricify-site | true | string | Your site id. You can find that in your hosted page link https://hosted.atomicpricing.com/sites/{siteId}/pricing/{pricingPageId} | | data-pricify-pricingpage | true | string | Pricing Page ID. You can find that in your hosted page link https://hosted.atomicpricing.com/sites/{siteId}/pricing/{pricingPageId} | | data-pricify-viewport-width | false | string | Set this property if you want to limit the hosted page width. You can pass in px, em, rem or %. eg: 100%. Keep it empty if you want the hosted page to utilise the available width. | | data-pricify-viewport-height | false | string | Set this property if you want to limit the hosted page height. Keep it empty if you want the hosted page to automatically stretch to fit . You can pass in px, em, rem or %. eg: 100%. Providing this could result in a scroll bar appearing. Hence, we recommend not setting this. | | data-pricify-viewport-defaultheight | false | string | Set this property to set the height of the loader screen till the pricing page is loaded. You need to set this appropriately based on screen size. This is an optional parameter. If not passed takes a default of 600px. | | data-pricify-currency | false | string | Sets the selected currency to the provided currency. eg: USD. If not provided or is invalid, defaults to the first currency | | data-pricify-period | false | string | Sets the period to provided value. eg. If you want to set the selected frequency to 1 month, provide 1 here. If not provided or is invalid, defaults to the first available frequency. If period unit is provided and period is not given, defaults to 1 | | data-pricify-periodunit | false | string | Sets the period to provided value. eg. If you want to set the selected frequency to 1 month, provide month here. If not provided or is invalid, defaults to the first available frequency. | | data-pricify-showcurrencydropdown | false | string | Default true. Pass false to hide currency dropdown. | | data-pricify-autoselectlocalcurrency | false | string | Default false. Pass true to automatically set currency based on the visitors geolocation. For eg: if the user is from US and this flag is set USD will be selected as currency if available in the pricing page. Similarly if another visitor comes from India, then INR would be set. If the currency for the country visitor is from is not available in the pricing page, then the first currency in the currency dropdown would be selected as default. | | data-pricify-integrationtype | false | string | Pass api to open the pricing page using session context. Site id and pricing page id attributes are not applicable when integration type is set to api |