heymartinadams

To export JavaScript, HTML, or CSS:

1. Visit your Webflow site: https://webflow.com/design/yoursite

2. Press shift + e to open the export window.

3. Open the developer console (e.g. command + option + j in Chrome)

4. Paste the following code into Webflow (yes, Webflow tells you not to paste code in there — the below snippets won’t grant anyone access to your Webflow account):

heymartinadams

Keybase proof

I hereby claim:

• I am heymartinadams on github.
• I am heymartinadams (https://keybase.io/heymartinadams) on keybase.
• I have a public key ASBjZdqMBdjUJrTfeoVWmyy7IvQ2CqTFz8DnOw9jL1CX2go

To claim this, I am signing this object:

heymartinadams

import React from 'react'
import Button from './Button'

export default class Signin extends React.Component {

  setPage = (page) => {
    // Custom nav function here
  }

  validation = () => {

heymartinadams

// Button, stateless functional component
// Pass a special class from parent component (e.g. “capps-button flat”)
// to affect appearance. Otherwise, “capps-button primary” is the default.
import React from 'react'
export default ({ action, className, text }) => (
  <div className={className ? className : 'app-button dark'} onTouchTap={action}>{text}</div>
)

heymartinadams

onToken(token) {
  // This is where token is received, as described in Logic #1
  const userId = this.props.data.user.id
  const stripeToken = token.id
  // Hide or remove button to prevent duplicate purchases
  this.setState({ buttonStyle: 'button hidden' })
  // Logic #2
  this.props.createCard({ variables: { stripeToken, userId } })
    .then(() => {
      console.log('Customer created...')

heymartinadams

import React from 'react'
import StripeCheckout from 'react-stripe-checkout'
import { graphql } from 'react-apollo'
import { userQuery, signinUser } from './graphql/user'
import { createCard, receiveStripeId, createPurchase, checkIfPaid, upgradeApp } from './graphql/purchase'

class Stripe extends React.Component {

  constructor(props) {
    super(props)

heymartinadams

componentDidUpdate(newProps) {
  if (this.props.data.user) {
    const userId = this.props.data.user.id
    if (!this.stripeTokenSubscription && !this.purchaseSubscription) {
      // Logic #5: Create subscription to trigger response once user in User model has been successfully assigned a Stripe customer ID
      this.stripeTokenSubscription = newProps.data.subscribeToMore({
        document: receiveStripeId,
        variables: { userId },
        updateQuery: (previousState, { subscriptionData }) => {
          console.log('Purchasing...')

heymartinadams

componentDidUpdate(newProps) {
  if (this.props.data.user) {
    const userId = this.props.data.user.id
    if (!this.stripeTokenSubscription && !this.purchaseSubscription) {
      // Logic #5: Create subscription to trigger response once user in User model has been successfully assigned a Stripe customer ID
      this.stripeTokenSubscription = newProps.data.subscribeToMore({
        document: receiveStripeId,
        variables: { userId },
        updateQuery: (previousState, { subscriptionData }) => {
          console.log('Purchasing...')

heymartinadams

{
  createdNode{
    id
    amount
    description
    isPaid
    purchaseToUser {
      id
      stripeId
    }

heymartinadams

type User {
  id: ID!
  name: String!
  email: String!
  password: String!
  stripeId: String
  paid: Boolean!
  userToPurchase: [Purchase]
  userToStripeToken: [StripeToken]
}