CODEWITHSUNDEEP
node.jsreact-nativestripe-payments
Boss Nass
Boss Nass

Reputation: 3522

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>
    )
  }
}

Upvotes: 0

Views: 1525

Answers (1)

itsmepetrov
itsmepetrov

Reputation: 21

I believe you make mistake, tipsi-stripe does not support charges. It is just a react-native wrapper for stripe-ios and stripe-android native libraries which used to generate tokens in your iOS/Android application.

To make a charge you should send received token to your own server:

Once you've securely collected and tokenized your customer's credit card using Checkout or Elements, you can charge the card. Unlike collection, which occurs in the browser, charge attempts are made from your server, normally using one of our client libraries. If you haven't already, install the library for your favorite language now. This tutorial shows code for Ruby, PHP, Python, and Node, but we also have libraries for Java and Go.

Upvotes: 2

Related Questions