Adding 3rd Party Scripts to Meteor App

help
1

I’m trying to add a payment service to my Meteor app. It requires the following…

Header Script

<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="my-website" ></script>

Link

<a href="javascript:void(0)" data-cb-type="checkout" data-cb-plan-id="monthly-plan" >subscribe</a>

Something very easy to do with plain old HTML; not so much with Meteor.

I tried adding the script in the <head> of index.html:

<head>
  <script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="edabit-test"></script>
</head>

<body>
  <div id="App"></div>
</body>

Any standard way of doing this with Meteor?

2

Hi,
I think you should go the NPM way with official chargebee npm package the documentation does not look that bad

2 Likes
3

As far as I can tell, the chargebee NPM package doesn’t handle payments. I just want to trigger their hosted popup form.

4

Question, are you using Blaze or React?

5

I’m using React as my view layer.

6

Bump. Anyone here know how to accept payments with Chargebee in a Meteor app? Should I just hire someone on UpWork to do this?

7

Did you ever figure this one out? I am also working on embedding the chargebee hosted pages into a meteor app. thanks! :slight_smile:

8

The easiest way to load a library at any time is via a function which inserts and HTML selector in the head. I use this a lot for loading/unloading libraries for maps or video players. Here’s an example for CSS, similarly you would do for Javascript libraries and scripts.
Simply put, if you don’t find a library already loaded via an HTML selector, load it.

const addCSS = (css, id) => {
  if (!document.querySelectorAll(`link[id='${id}']`).length) {
    const link = document.createElement('LINK')
    link.rel = 'stylesheet'
    link.href = css
    link.id = id
    link.type = 'text/css'
    document.head.appendChild(link)
  }
}

Here’s an example from the official FB API for Javascript:

if (!document.getElementById('facebook-jssdk')) {
        (function (d, s, id) {
          var js; var fjs = d.getElementsByTagName(s)[0]
          // if (d.getElementById(id)) { return }
          js = d.createElement(s); js.id = id
          js.src = 'https://connect.facebook.net/en_US/sdk.js'
          fjs.parentNode.insertBefore(js, fjs)
        }(document, 'script', 'facebook-jssdk'))
      }