Any chance you could post a Stripe example?

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?

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

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

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',
});

Navigation Menu

Repository navigation

Any chance you could post a Stripe example? #20

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Any chance you could post a Stripe example? #20

Description

Activity

dozoisch commented on May 1, 2017

aacotroneo commented on May 13, 2017

aacotroneo commented on May 13, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions