javascript ChargeBee Drop-in checkout + React：误差

mlmc2os5 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(69)

我试图在https://www.chargebee.com/checkout-portal-docs/drop-in-tutorial.html#implementation之后将drop-in checkout添加到react SPA中。我在渲染视图的其余部分之后动态添加chargebee.js，然后调用registerAgain()。

componentDidMount() {
    const el = document.createElement('script');
    el.onload = () => {
        window.Chargebee.registerAgain();
        // this.setState({ chargebeeReady: true });
    };
    el.setAttribute('data-cb-site', 'derp-test');
    el.setAttribute('src', 'https://js.chargebee.com/v2/chargebee.js');
    document.body.appendChild(el);
}

render() {
    // [...]
    <a
        href="javascript:void(0)"
        data-cb-type="checkout"
        data-cb-plan-id="asdf-test"
    >
        Subscribe
    </a>
    // [...]
}

当点击subscribe时，我得到一个错误：

Uncaught TypeError: Cannot read property 'getCart' of null
    at t.a (event-binding.ts:24)
    at Function.value (chargebee.ts:46)
    at HTMLScriptElement.el.onload (Subscribe.js:23)

JavaScript

来源：https://stackoverflow.com/questions/51301563/chargebee-drop-in-checkout-react-error

2条答案

按热度按时间

hs1ihplo1#

当DOMContentLoaded事件被触发时，Chargebee示例将被创建。由于您正在异步加载它，因此示例不会被创建。因此可以使用Chargebee.init（）创建示例。

componentDidMount() {
    const el = document.createElement('script');
    el.onload = () => {
      window.Chargebee.init({
        "site": "derp-test"
      });
      window.Chargebee.registerAgain();
      // this.setState({ chargebeeReady: true });
    };
    el.setAttribute('src', 'https://js.chargebee.com/v2/chargebee.js');
    document.body.appendChild(el);
}

赞(0）回复(0）举报 2023-09-29

oalqel3c2#

<script src="https://js.chargebee.com/v2/chargebee.js"></script>

<script>
      window.addEventListener('load', function () {
     Chargebee.init({
          site: "site_name", // your test site
          publishableKey: "test_"
          })
      Chargebee.registerAgain();

})
    
</script>

赞(0）回复(0）举报 2023-09-29

我来回答

javascript ChargeBee Drop-in checkout + React：误差

2条答案

相关问题

热门标签

最新问答