Sunday 21 May 2017

react native tipsi-stripe creating charge

I am using the tipsi-stripe package, which seems to be working for rendering a card form, and returning a token, though when I attempt to charge the token I am getting the below error

Error: TypeError: Cannot read property 'create' of undefined
    at CardFormScreen._callee$ (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:90793:46)
    at tryCatch (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:34658:40)
    at Generator.invoke [as _invoke] (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:34846:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:34683:21)
    at tryCatch (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:34658:40)
    at invoke (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:34716:20)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:34724:13
    at tryCallOne (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:34365:12)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:34451:15
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true:18908:19

CODE:

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import stripe from 'tipsi-stripe'
import Button from '../Components/Button'
import RoundedButton from '../Components/RoundedButton'
import testID from '../Config/testID'
import styles from '../Components/Styles/RoundedButtonStyle'
import { Colors } from '../Themes/'

export default class CardFormScreen extends Component {
  state = {
    loading: false,
    token: null
  }

  handleCardPayPress = async () => {
    try {
      this.setState({
        loading: true,
        token: null
      })
      const token = await stripe.paymentRequestWithCardForm({
        smsAutofillDisabled: true, // iOS only
        // requiredBillingAddressFields: 'full',
        card: {
          country: 'AU'
        },
        theme: {
          primaryBackgroundColor: Colors.background, // used as main background
          secondaryBackgroundColor: Colors.white,
          primaryForegroundColor: Colors.teal,
          secondaryForegroundColor: Colors.teal,
          accentColor: Colors.teal, // used on card image
          errorColor: Colors.error
        }
      })
      console.log('Result:', token) // eslint-disable-line no-console
      if (token) {
        stripe.charges.create({
          amount: 1000,
          currency: "aud",
          description: "Example charge",
          source: token,
        })
      };
      this.setState({
        loading: false,
        token
      })
    } catch (error) {
      console.log('Error:', error) // eslint-disable-line no-console
      this.setState({
        loading: false
      })
    }
  }

  render () {
    const { loading, token } = this.state

    return (
      <View style={styles.container}>
      {!token &&
        <Button
          style={styles.button}
          text='ENTER CARD DETAILS'
          loading={loading}
          onPress={this.handleCardPayPress}
          {...testID('cardFormButton')}
        />
      }
      <View
          style={styles.token}
          {...testID('cardFormToken')}>
          {token &&
            <RoundedButton text='TOP UP ACCOUNT' />
          }
        </View>
      </View>
    )
  }
}



via Paul 'Whippet' McGuane

No comments:

Post a Comment