React coinbase widget

coinbase-widget-hacky.jsx

import React, { Component, PropTypes } from 'react'

class CoinbaseWidget extends Component {
  constructor (props) {
    super(props)
    this.onMessage = this.onMessage.bind(this)
  }

  componentDidMount () {
    window.addEventListener('message', this.onMessage, false)
    const script = document.createElement('script')
    script.setAttribute('src', `https://buy.coinbase.com/static/widget.js?${Date.now()}`)
    document.body.appendChild(script)
    this.script = script
  }

  componentWillReceiveProps ({ open }) {
    if (open && !this.props.open && this.link) {
      this.link.click()
    }
  }

  componentWillUnmount () {
    window.removeEventListener('message', this.onMessage)
    this.script = null
  }

  onMessage (e) {
    if (e.origin !== 'https://buy.coinbase.com') return

    if (!e.data || !e.data.status) {
      return console.warn('Unexpected coinbase message format')
    }

    const { onComplete, onCancel } = this.props

    if (e.data.status === 'buy_completed') {
      if (!onComplete) return
      onComplete(e.data)
    } else if (e.data.status === 'buy_canceled') {
      if (!onCancel) return
      onCancel(e.data)
    } else {
      console.warn('Unknown coinbase message status', e.data.status)
    }
  }

  render () {
    const {
      code,
      amount,
      address,
      cryptoCurrency,
      currency,
      state,
      prefill
    } = this.props

    return (
      <a
        ref={(r) => { this.link = r }}
        class='coinbase-widget'
        id='coinbase_widget'
        style={{ display: 'none' }}
        data-address={address || ''}
        data-amount={amount}
        data-code={code}
        data-currency={currency || ''}
        data-crypto_currency={cryptoCurrency}
        data-state={state || ''}
        data-prefill_email={prefill && prefill.email || ''}
        data-prefill_name={prefill && prefill.name || ''}
        data-prefill_phone={prefill && prefill.phone || ''}
        href=''>Buy bitcoin using Coinbase</a>
    )
  }
}

CoinbaseWidget.propTypes = {
  open: PropTypes.bool.isRequired,
  onComplete: PropTypes.func,
  onCancel: PropTypes.func,

  code: PropTypes.string.isRequired,
  amount: PropTypes.number.isRequired,
  cryptoCurrency: PropTypes.oneOf(['BTC', 'ETH']).isRequired,
  address: PropTypes.string,
  currency: PropTypes.string,
  state: PropTypes.string,
  prefill: PropTypes.shape({
    email: PropTypes.string,
    name: PropTypes.string,
    phone: PropTypes.string
  })
}

export default CoinbaseWidget

coinbase-widget.jsx

import React, { Component, PropTypes } from 'react'
import qs from 'querystring'

class CoinbaseWidget extends Component {
  constructor (props) {
    super(props)
    this.onMessage = this.onMessage.bind(this)
  }

  componentDidMount () {
    window.addEventListener('message', this.onMessage, false)
  }

  componentWillUnmount () {
    window.removeEventListener('message', this.onMessage)
  }

  getQueryString () {
    const {
      code,
      amount,
      address,
      cryptoCurrency,
      currency,
      state
    } = this.props
    const prefill = this.props.prefil || {}

    return qs.stringify({
      code,
      amount,
      address,
      crypto_currency: cryptoCurrency,
      currency,
      state,
      prefill_email: prefill.email,
      prefill_name: prefill.name,
      prefill_phone: prefill.phone
    })
  }

  onMessage (e) {
    if (e.origin !== 'https://buy.coinbase.com') return

    if (!e.data || !e.data.status) {
      return console.warn('Unexpected coinbase message format')
    }

    const { onComplete, onCancel } = this.props

    if (e.data.status === 'buy_completed') {
      if (!onComplete) return
      onComplete(e.data)
    } else if (e.data.status === 'buy_canceled') {
      if (!onCancel) return
      onCancel(e.data)
    } else {
      console.warn('Unknown coinbase message status', e.data.status)
    }
  }

  render () {
    if (!this.props.open) return null

    return (
      <iframe
        src={`https://buy.coinbase.com?${this.getQueryString()}`}
        className={this.props.className}
        style={this.props.style} />
    )
  }
}

CoinbaseWidget.propTypes = {
  open: PropTypes.bool.isRequired,
  onComplete: PropTypes.func,
  onCancel: PropTypes.func,

  code: PropTypes.string.isRequired,
  amount: PropTypes.number.isRequired,
  cryptoCurrency: PropTypes.oneOf(['BTC', 'ETH']).isRequired,
  address: PropTypes.string,
  currency: PropTypes.string,
  state: PropTypes.string,
  prefill: PropTypes.shape({
    email: PropTypes.string,
    name: PropTypes.string,
    phone: PropTypes.string
  }),

  style: PropTypes.object,
  className: PropTypes.string
}

CoinbaseWidget.defaultProps = {
  open: false,
  className: 'coinbase-widget',
  style: {
    backgroundColor: 'transparent',
    border: '0 none transparent',
    display: 'block',
    position: 'fixed',
    visibility: 'visible',
    margin: 0,
    padding: 0,
    left: 0,
    top: 0,
    width: '100%',
    height: '100%',
    zIndex: 9999
  }
}

export default CoinbaseWidget