<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
body{
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
}

.pricing-table{
  display: flex;
  flex-direction: row;
  
  h1{
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 1.8em;
  }
  .tier{
    text-align: center;
    padding: 10px;
    margin-right: 20px;
  }
}
button{
  margin-top: 20px;
  background: #3434bb;
  color: white;
  padding: 8px 18px;
  border: none;
  line-height: 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

function Pricing({pricingPlans, onPlanSelect, stripePublishableKey}){
  return <div className="pricing-table">{pricingPlans.data.map(({id, interval, amount, product: {name}})=>{
      return <div className="tier" key={id}>
        <h1>{name}</h1>
        <h4>${amount/100}/{interval}</h4>
        <button onClick={onPlanSelect(id)}>Get Started</button>
      </div>
    })}</div>
}


//use your REST API to get this payload
const examplePlansPayload = {"object":"list","data":[{"id":"plan_FwyicZBCJq9Uhz","object":"plan","active":true,"aggregate_usage":null,"amount":5000,"amount_decimal":"5000","billing_scheme":"per_unit","created":1570487589,"currency":"usd","interval":"month","interval_count":1,"livemode":false,"metadata":{},"nickname":null,"product":{"id":"prod_FwyiuhfWdtFUou","object":"product","active":true,"attributes":[],"caption":null,"created":1570487589,"deactivate_on":[],"description":null,"images":[],"livemode":false,"metadata":{},"name":"AcmeBot Basic","package_dimensions":null,"shippable":null,"statement_descriptor":null,"type":"service","unit_label":null,"updated":1570487589,"url":null},"tiers":null,"tiers_mode":null,"transform_usage":null,"trial_period_days":null,"usage_type":"licensed"},{"id":"plan_FwyijZeEarmyyv","object":"plan","active":true,"aggregate_usage":null,"amount":30000,"amount_decimal":"30000","billing_scheme":"per_unit","created":1570487589,"currency":"usd","interval":"month","interval_count":1,"livemode":false,"metadata":{},"nickname":null,"product":{"id":"prod_Fwyi4n2KOrU4U2","object":"product","active":true,"attributes":[],"caption":null,"created":1570487589,"deactivate_on":[],"description":null,"images":[],"livemode":false,"metadata":{},"name":"AcmeBot Premium","package_dimensions":null,"shippable":null,"statement_descriptor":null,"type":"service","unit_label":null,"updated":1570487589,"url":null},"tiers":null,"tiers_mode":null,"transform_usage":null,"trial_period_days":null,"usage_type":"licensed"}],"has_more":false,"url":"/v1/plans"}

ReactDOM.render(
  <Pricing onPlanSelect={(plan_id) => () => {alert("render checkout for " + plan_id)}}pricingPlans={examplePlansPayload} stripePublishableKey="asdasd"/>,
  document.getElementById('root')
);