给联署材料定价

联合来文包装 充电器定价表。 。 。 .

⚠️ 折旧

此软件包已贬值,不会收到任何进一步的更新. 迁移到 充电蜂.js 定价表 换句话说.

目录

• 开始
  • 香草AP
    • 自动拖入( 建议)
    • 受控输入
  • 反应
    • 安装
    • 使用量
  • Next.js (瑞典语)
  • 其他民众框架
• 给对象定价
  • 职能
    • 输入
    • 打开定价页
    • 访问器
    • 组合键 地址
    • 套装 地址
    • 数量
    • 商业实体
    • 设置
    • 订阅属性
• 数据属性
  • 脚本
  • 定价页面

开始

香草AP

自动拖入( 建议)

<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>

受控输入

<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>

反应( CSR)

安装

npm install --save @chargebee/atomicpricing

使用量

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 (瑞典语)

注意, 您需要挂载潜水器, 然后调用 Pricify init 以防止水分错误

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>
      )}
  )
}

其他大众框架

很快会有更多例子出现!

给对象定价

职能

init

3⁄4 ̄ ̧漯B.

openPricingPage

此功能打开了定价页面响应的定价页面. 当您想要使用会话上下文打开定价页面时,此函数是有用的 。 调用此函数时, 请确定设置 data-pricify-integrationtype="api" 在定价页div中.

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

setVisitor

设定这些访问者属性为定价页面上下文, 并将其传递给 Chargebee 退出 。 访客被转换为客户,从而根据Courgebee客户记录中支持的内容来遵循属性. (所有这些都是可选的)

Note: setVisitor只能用于为新客户设置属性.

examples

为嵌入在一页的所有定价页面设置访问者属性 。 如果您的页面中只有一个定价页面嵌入, 或者您需要为所有定价页面设置相同的访问者属性, 您可以使用此选项 .

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

如果您需要设置特定定价页面的访客属性, 您可以通过额外的属性 siteId 财务报告和审定财务报表 pricingPageId 作为设置 Visitor 函数的选项.

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

Pricify.setVisitor(data, options);

Pro Tip: 您可以通过在您的充电蜂账户中检查出字段设置( 配置充电蜂 > 检查和自我服务门户 > 字段) 来控制充电蜂检查出字段的行为 。 您可以以下列方式配置字段:

• Use as Hidden Parameter数字 :
  • 退出时不显示字段 .
  • 通过 setVisitor () 传递的值被存储到字段
• Read-only数字 :
  • 退出时可见字段
  • 字段预填有设置的 Visitor () 值 .
  • 用户无法编辑这些值 .
• Show数字 :
  • 退出时可见字段
  • 字段预填有设置的 Visitor () 值 .
  • 用户可以编辑这些值.

setBillingAddress

将计费地址设置为定价页面上下文,并传递给Chargebee检查出账. 账单地址在结账时保存在客户记录上. (所有这些都是可选的)

Note: setBillingAddress只能用于为新客户设置属性. 原子定价目前不支持更新已有客户/订阅.

examples

为嵌入在一页的所有定价页面设置访问者属性 。 如果您的页面中只有一个定价页面嵌入, 或者您需要为所有定价页面设置相同的访问者属性, 您可以使用此选项 .

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

如果您需要为嵌入的特定定价页面设置计费属性, 您可以通过额外的属性 siteId 财务报告和审定财务报表 pricingPageId 作为设置 BillingAddress 函数的选项.

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

将运入地址设置为定价页面上下文, 并将其传递给Chargebee的检查。 发货地址在结账时保存在客户记录上 (所有这些都是可选的)

Note: setShippingAddress只能用于设置新订阅的属性. 原子定价目前不支持更新已有客户/订阅.

examples

为嵌入在一页的所有定价页面设置访问者属性 。 如果您的页面中只有一个定价页面嵌入, 或者您需要为所有定价页面设置相同的访问者属性, 您可以使用此选项 .

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

如果您需要设置特定定价页面的传输属性, 您可以通过额外的属性 siteId 财务报告和审定财务报表 pricingPageId 作为设置ShippingAddress 函数的选项.

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

在定价页上设定所有基于数量计划的初始数量.

examples

设置嵌入单页的所有定价页面的数量 。 如果您的页面中只有一个定价页面嵌入, 或者您需要为您的所有定价页面设置相同的数量, 您可以使用此页面 .

Pricify.setQuantity(10);

如果您需要设置嵌入的特定定价页面的数量, 您可以通过额外的属性 siteId 财务报告和审定财务报表 pricingPageId 作为设置数量函数的选项.

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

Pricify.setQuantity(quantity, options);

Pro Tip: 一旦您将初始数量设定为设定的数量( ), 请考虑使用数量滑动器来进行客户控制 。 这种数量滑动器可以通过原子定价上的计划设置来切换.

• 启用滑动器时,最初应用了设定为"数量"的量组,但用户仍然可以使用滑动器来调整.
• 如果滑动器被禁用, 将直接使用设置为数量( ) 的数量 .

setBusinessEntity

设置企业实体的定价页面,然后将其传递给Chargebee的检查。 商业实体在离职结束时被保存在客户和订阅记录上.

examples

设置嵌入单页的所有定价页面的商业实体 。 如果您的页面中只有一个定价页面嵌入, 或者您需要为您的所有定价页面设置相同的商业实体, 您可以使用此选项 .

Pricify.setBusinessEntity('business_entity_id');

如果您需要设置嵌入特定定价页面的商业实体, 您可以通过额外的属性 siteId 财务报告和审定财务报表 pricingPageId 作为设置商业实体函数的选项.

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

Pricify.setBusinessEntity(businessEntityId, options);

setPriceVariant

设置 价格变式 在定价页上显示的计划。 如果指定 PRICE_VARIANT_ID 计划不可用,使用计划的默认价格变体。 如果没有默认价格变体,则计划不显示在定价页上.

实例

您可以以两种方式使用此功能:

只指定价格变量

1. 设价变相.

Pricify.setPriceVariant('PRICE_VARIANT_ID');

替换 PRICE_VARIANT_ID 与"Courgebee Billing"中价格变体的ID.

2. 通过调用渲染定价页面 openPricingPage() 或者说 init()。 。 。 .

指定价格变量和定价页

1. 设置定价页和价格变量以显示.

const priceVariantId = 'PRICE_VARIANT_ID';
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setPriceVariant(priceVariantId, options);

替换 PRICE_VARIANT_ID 与"Courgebee Billing"中价格变体的ID.

2. 通过调用渲染定价页面 openPricingPage() 或者说 init()。 。 。 .

setSubscriptionAttributes

在定价页面上下文中设置订阅级别属性,并转发给Chargebee的取出. 这些属性与Courgebee的订阅记录相关,并将被用在通过取出创建新订阅时.

注:设置订阅属性 只设置新订阅的自定义字段.

Note: 设定订阅属性 只能用于为新订阅设置属性.

examples

为所有嵌入单页的定价页面设置订阅属性 。 如果您的页面中只有一个定价页面嵌入, 或者您需要为所有定价页面设置相同的订阅属性, 您可以使用此选项 .

Pricify.setSubscriptionAttributes({
  customFields: {
    cf_field_name: 'field_value',
  },
});

如果您需要为嵌入的特定定价页面设置订阅属性, 您可以通过额外的属性 siteId 财务报告和审定财务报表 pricingPageId 作为设置 Visitor 函数的选项.

const data = {
  customFields: {
    cf_field_name: 'field_value',
  },
};

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

Pricify.setSubscriptionAttributes(data, options);

数据属性

脚本(用于香草整合)

定价页面