Question

我正在使用React Native实现Stripe Payment Gateway，并且正在使用react-native-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，并且已实现与示例中所示相同的方式。

我不介意尝试笨拙的图书馆，但我希望从信用卡和借记卡中进行条纹支付，而不是从Apple支付或Goolge支付中获取支付。

这是第一次请指导我

Answer 1

Tipsy是Stripe API集成的推荐[1]第三方库，它确实支持令牌化信用卡[0]。

由于PCI合规性要求[2]，建议您不要直接调用令牌化URL，而要使用Stripe提供的Mobile SDK [3]，tips以此为基础。

[0]（https://tipsi.github.io/tipsi-stripe/docs/token.html）
[1]（https://stripe.com/docs/libraries#react）
[2]（https://stripe.com/docs/security#validating-pci-compliance）
[3]（https://stripe.com/docs/mobile/ios）

Answer 2

这是我遇到的与按揭付款相关的视频，也许可以帮上忙，它已经在世博会上亮相，但我们至少可以有个主意

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

反应本机条纹支付网关

2 个答案: