反应原生tipsi-stripe产生电荷答案

【问题标题】：react native tipsi-stripe creating charge反应原生tipsi-stripe产生电荷
【发布时间】：2017-10-21 05:06:32
【问题描述】：

我正在使用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

代码：

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

【问题讨论】：

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

【解决方案1】：

相信你搞错了，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 的库。

【讨论】：