反应原生tipi条纹创造充电

时间:2017-05-21 13:46:57

标签: node.js react-native stripe-payments

我正在使用tipsi-stripe包,它似乎用于呈现卡片形式,并返回令牌,但是当我尝试对令牌充电时,我收到以下错误

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

1 个答案:

答案 0 :(得分:2)

我相信你犯了错误,tipsi-stripe不支持指控。它只是 stripe-ios stripe-android 本机库的react-native包装器,用于在iOS / Android应用程序中生成令牌。

收取费用you should send received token to your own server

  

一旦您安全地收集并标记了您客户的信用   使用Checkout或Elements的卡,您可以为卡充电。不像   收集,发生在浏览器中,收费尝试来自   您的服务器,通常使用我们的客户端库之一。如果你   还没有,现在就安装你最喜欢的语言库。   本教程展示了Ruby,PHP,Python和Node的代码,但我们也是   拥有Java和Go的库。