Any chance you could post a Stripe example?

[zeg-io]

I'm a bit confused on the examples.

I created a Stripe.jsx file:

import React, { Component } from 'react'
import makeAsyncScriptLoader from 'react-async-script'

class Stripe extends Component {
  constructor () {
    super()
    this.state = {
      message: 'INIT...'
    }
  }
  stripeJSLoaded (msg) {
    console.info('loaded.')
    this.setState({ message: 'Loaded.' })
  }
  render () {
    return (
      <div>{this.state.message}</div>
    )
  }
}

const callbackName = 'stripeJSLoaded'
const URL = 'https://js.stripe.com/v3/'
const globalName = 'stripe'

export default makeAsyncScriptLoader(Stripe, URL, {
  callbackName,
  globalName
})

Within the App.jsx I'm loading it:

import Stripe from './Stripe'
...
  onLoad () {
    console.log('script loaded')
  }
...

and rendering it:

<Stripe asyncScriptOnLoad={ this.onLoad } />

I get 'INIT...' on the screen, but nothing in the console or elsewhere.

At this point I'm just trying to get ANYTHING to load and then change some status to let me know it did it, let alone using that script.

Help?

[dozoisch]

I'll try it as soon as possible and get back to you!

[aacotroneo]

Stripe does not have a global callback, so remove the callbackName option and the loaded will be called as soon as the script loads.

[aacotroneo]

By reading the source code, I think it goes like this:

class StripeCardComponent extends React.Component {
    componentWillReceiveProps(props) {
        if(!this.props.Stripe && props.Stripe) {
                   console.log('Got Stripe - 1 time only as next time it will come in the constructor')
       }

    render() {
       if(this.props.Stripe) { then you have it}  
    }
};

export default makeAsyncScriptLoader(StripeCardComponent, "https://js.stripe.com/v3/", {
    globalName: 'Stripe',
});