文章/答案/技术大牛

发布

问反应本地Stripe支付网关
EN

Stack Overflow用户

提问于 2018-10-26 07:43:33

回答 2查看 3.5K关注 0票数 3

我正在使用api本机实现Stripe支付网关，并且我使用的是api本机-stripe-api。

import React, { Component } from "react";
import {
  Text,
  View,
  Image,
  TouchableOpacity,
  I18nManager,
  AsyncStorage,
  
} from "react-native";
import {
  Container,
  Right,
  Item,
  Input,
  Header,
  Left,
  Body,
  Title,
  Form
} from "native-base";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Ionicons from "react-native-vector-icons/Ionicons";
// Screen Styles
import styles from "../Theme/Styles/Signin";
import Logo from "../image/qualpros.png";
import axios from "axios";
import AwesomeAlert from "react-native-awesome-alerts";
import Stripe from "react-native-stripe-api";

class Stripedemo extends Component {
  static navigationOptions = {
    header: null,
    showAlert: false,
    message: ""
  };

  state = {
    data: [],
    number: null,
    expmonth: null,
    expyear: null,
    cvc: null
  };

  

  payme(comp) {
    
    var cardDetails = {
      "card[number]": "4242424242424242",
      "card[exp_month]": "09",
      "card[exp_year]": "2023",
      "card[cvc]": "123"
    };

    var formBody = [];
    for (var property in cardDetails) {
      var encodedKey = encodeURIComponent(property);
      var encodedValue = encodeURIComponent(cardDetails[property]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

    return fetch('https://api.stripe.com/v1/tokens', {
        method: 'post',
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Bearer ' + '<My_Secret_key>'
      },
      body: formBody
    });
    
  }

  constructor(props) {
    super(props);
    this.state = { showAlert: false };
  }

  showAlert = () => {
    this.setState({
      showAlert: true
    });
  };

  hideAlert = () => {
    this.setState({
      showAlert: false
    });
  };

  render() {
    return (
      <Container>
        <Header style={styles.header}>
          <Left style={styles.left}>
            <TouchableOpacity
              style={styles.backArrow}
              onPress={() => this.props.navigation.navigate("ProfileScreen")}
            >
              <FontAwesome
                name={I18nManager.isRTL ? "angle-right" : "angle-left"}
                size={30}
                color="#6f6f6f"
              />
            </TouchableOpacity>
          </Left>
          <Body style={styles.body} />
          <Right style={styles.right} />
        </Header>
        <View style={styles.logosec}>
          <Image source={Logo} style={styles.logostyle} />
        </View>
        <Form style={styles.form}>
          <Item rounded style={styles.inputStyle}>
            <Input
              textAlign={I18nManager.isRTL ? "right" : "left"}
              placeholder="number"
              value={"4242 4242 4242 4242"}
              style={styles.inputmain}
              onChangeText={number => {
                this.setState({ number });
              }}
              autoCapitalize="none"
            />
          </Item>
          <Item rounded style={styles.inputStyle}>
            <Input
              textAlign={I18nManager.isRTL ? "right" : "left"}
              placeholder="expmonth"
              value={"09"}
              style={styles.inputmain}
              onChangeText={expmonth => {
                this.setState({ expmonth });
              }}
              autoCapitalize="none"
            />
          </Item>
          <Item rounded style={styles.inputStyle}>
            <Input
              textAlign={I18nManager.isRTL ? "right" : "left"}
              placeholder="expyear"
              value={"18"}
              style={styles.inputmain}
              onChangeText={expyear => {
                this.setState({ expyear });
              }}
              autoCapitalize="none"
            />
          </Item>
          <Item rounded style={styles.inputStyle}>
            <Input
              textAlign={I18nManager.isRTL ? "right" : "left"}
              placeholder="cvc"
              value={"111"}
              style={styles.inputmain}
              onChangeText={cvc => {
                this.setState({ cvc });
              }}
              autoCapitalize="none"
            />
          </Item>

          <TouchableOpacity
            info
            style={styles.signInbtn}
            onPress={this.payme.bind(this)}
          >
            <Text autoCapitalize="words" style={styles.buttongetstarted}>
              Add Card
            </Text>
          </TouchableOpacity>
        </Form>
        <View style={styles.bottomView} />

        <AwesomeAlert
          show={this.state.showAlert}
          showProgress={false}
          title="QualPros!"
          message={this.state.message}
          closeOnTouchOutside={true}
          closeOnHardwareBackPress={false}
          showConfirmButton={true}
          confirmText="Ok"
          confirmButtonColor="#d91009"
          onConfirmPressed={() => {
            this.hideAlert();
          }}
        />
      </Container>
    );
  }
}
export default Stripedemo;

上面是我同样的代码。

我从这段代码中得到了错误404，实现方式与示例中显示的相同。

我不介意尝试一下喝醉的图书馆，但是我想要信用卡和借记卡的Stripe付款，而不是从Apple pay或Goolge pay。

这是第一次请引导我

react-native

stripe-payments

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-26 08:32:19

Tipsy是用于Stripe集成的recommended1第三方库，它确实支持令牌化信用卡。

由于PCI遵从requirement2，不建议直接调用令牌化URL，但是要使用StripeProvidMobileSDK3，tipsi是在此基础上构建的。

票数 1

Stack Overflow用户

发布于 2019-11-27 07:13:45

这是我所看到的与刺激付款有关的视频，也许这能帮上忙，它是在世博会上，但我们至少可以有一个想法。

https://www.youtube.com/watch?v=Dzq1zDlZVUg

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53003828

复制

相似问题

问反应本地Stripe支付网关
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应本地Stripe支付网关EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应本地Stripe支付网关
EN