@chargebee/atomicpricing v0.4.0

Pricify JS

JS wrapper for your Atomic Pricing hosted page

Table of contents

• Get Started
  • Vanilla App
    • Auto bootstrapped (recommended)
    • Controlled Init
  • React
    • Installation
    • Usage
  • Next.js (SSR)
  • Other Popular Frameworks
• Pricify Object
  • Functions
    • init
    • setVisitor
    • setBillingAddress
    • setShippingAddress
    • setQuantity
• Data Attributes
  • Script
  • Pricing Page Div

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

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)

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: 'john.doe@gmail.com',
  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: 'john.doe@gmail.com',
  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)

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: 'john.doe@gmail.com',
  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: 'john.doe@gmail.com',
  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)

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: 'john.doe@gmail.com',
  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: 'john.doe@gmail.com',
  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.

Data attributes

Script (for vanilla integration)

Pricing Page Div