Artifact Content
Not logged in

Artifact a7d523802554e7355f3742e0c305a5e5a6a9ba80:

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import PayButton from 'components/PayButton/PayButton'

import classNames from 'classnames/bind'
import styles from './Button.scss'
const cx = classNames.bind(styles)

export default class Button extends Component {
  // TODO config is not in the context anymore
  static contextTypes = {
    config: PropTypes.object

  render () {
    const config = this.context.config

    return (
      <div className='panel panel-default'>
        <div className='panel-body'>
          <h2>Pay Button</h2>
            Pay Button is the best payment flow, on web and mobile.
            Pay Button builds on top of ILP to provide your users with a streamlined,
            payment experience that is constantly improving.
          <div className='row'>
            <div className='col-sm-6'>
              <p>Try the demo below</p>
                <PayButton destination={config.ledgerUri + '/accounts/bob'} amount='10'
                  currencyCode='USD' countryCode='US'>Make Payment</PayButton>
          <div className='row'>
            <div className='col-sm-12'>
              <p>You can integrate Pay Button using the code below.</p>
              <p>As we release new Pay Button features, we'll automatically roll
              them out to your existing integration, so that you will always be
              using our latest technology without needing to change a thing.</p>
                  '<script src=""></script>\n\n' +

                  '<script>\n' +
                  'window.addEventListener("message", () => {\n' +
                  '  document.getElementsByName("payments_polyfill")[0].remove();\n' +
                  '});\n\n' +
                  'function makePayment(amount) {\n' +
                  '  navigator.requestPayment(["interledger"], {\n' +
                  '    amount: amount,\n' +
                  '    currencyCode: "USD",\n' +
                  '    countryCode: "US"\n' +
                  '  }, {\n' +
                  '    interledger: {\n' +
                  '      account: "' + config.ledgerUri + '/accounts/bob"\n' +
                  '    }\n' +
                  '  });\n' +
                  '};\n' +
                  '</script>\n\n' +

                  '<button onclick="makePayment(10)">Make Payment</button>'
              <h3>Configuration Options</h3>
              <table className={cx('table')}>
                    <td>The amount to be sent</td>
                    <td>The currency code</td>
                    <td>The country code</td>