javascript - 在条纹反应中创建客户

Question

我正在尝试将条带 api 集成到我的反应前端。我现在无法使其成为客户对象，因为我希望它能够定期付款和管理帐户。我已经使用条带中的令牌发布方法使其工作。我在下面附上了代码。

import React, { useState } from "react";
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
// import AddressSection from './AddressSection';
import { CardElement, injectStripe } from "react-stripe-elements";
import LoaderButton from "./LoaderButton";
import { useFormFields } from "../libs/hooksLib";
import "./BillingForm.css";

function BillingForm({ isLoading, onSubmit, ...props }) {
  const [fields, handleFieldChange] = useFormFields({
    name: "",
    address_line1: "",
    address_city: "",
    address_state: ""
  });
  const [isProcessing, setIsProcessing] = useState(false);
  const [isCardComplete, setIsCardComplete] = useState(false);

  isLoading = isProcessing || isLoading;

  function validateForm() {
    return (
      fields.name !== "" &&
      fields.address_line1 !== "" &&
      fields.address_city !== "" &&
      fields.address_state !== "" &&
      isCardComplete 
    );
  }

  async function handleSubmitClick(event) {
    event.preventDefault();

    setIsProcessing(true);

    const { token, error } = await props.stripe.createToken({ name: fields.name, address_line1: fields.address_line1, address_city: fields.address_city, address_state: fields.address_state });

    setIsProcessing(false);

    onSubmit({ token, error });
  }

  return (


    <div>
    <form className="BillingForm" onSubmit={handleSubmitClick}>

        <div className="Add_card_details">
            Add Payment Details
        </div>

      <FormGroup bsSize="large" controlId="name">
        <ControlLabel>Cardholder's name</ControlLabel>
        <FormControl
          type="text"
          value={fields.name}
          onChange={handleFieldChange}
          placeholder="Name on the card"
        />
      </FormGroup>

      <ControlLabel>Credit Card Info</ControlLabel>
      <CardElement
        className="card-field"
        onChange={e => setIsCardComplete(e.complete)}
        style={{
          base: { fontSize: "18px", fontFamily: '"Open Sans", sans-serif' }
        }}
      />

      <FormGroup bsSize="large" controlId="address_line1">
        <ControlLabel>Address Line</ControlLabel>
        <FormControl
          type="text"
          value={fields.address_line1}
          onChange={handleFieldChange}
          placeholder="1614 Santa Monica Blvd"
        />
      </FormGroup>

      <FormGroup bsSize="large" controlId="address_city">
        <ControlLabel>Address City</ControlLabel>
        <FormControl
          type="text"
          value={fields.address_city}
          onChange={handleFieldChange}
          placeholder="Los Angeles"
        />
      </FormGroup>

      <FormGroup bsSize="large" controlId="address_state">
        <ControlLabel>Address State</ControlLabel>
        <FormControl
          type="text"
          value={fields.address_state}
          onChange={handleFieldChange}
          placeholder="CA"
        />
      </FormGroup>


      <LoaderButton
        block
        type="submit"
        bsSize="large"
        isLoading={isLoading}
        disabled={!validateForm()}
      >
        Save
      </LoaderButton>

    </form>

    </div>
  );
}

export default injectStripe(BillingForm);

和

import React, { useState } from "react";
import { API } from "aws-amplify";
import { Elements, StripeProvider } from "react-stripe-elements";
import BillingForm from "../components/BillingForm";
import config from "../config";
import "./Settings.css";

export default function Settings(props) {
  const [isLoading, setIsLoading] = useState(false);

  function billUser(details) {
    return ;
  }

  async function handleFormSubmit({ token, error }) {
    if (error) {
      alert(error);
      return;
    }

    setIsLoading(true);

    try {
      await billUser({
        source: token.id
      });

      alert("Your card has been charged successfully!");
      props.history.push("/dashboard");
    } catch (e) {
      alert(e);
      setIsLoading(false);
    }
  }

  return (
    <div className="Settings">
      <StripeProvider apiKey={config.STRIPE_KEY}>
        <Elements>
          <BillingForm
            isLoading={isLoading}
            onSubmit={handleFormSubmit}
          />
        </Elements>
      </StripeProvider>
    </div>
  );
}

我尝试将 props.stripe.createToken 更改为 props.stripe.customers.create ，这给我带来了无法调用 .create 的错误。如果有人有任何想法，将不胜感激。

标签： javascriptreactjsstripe-payments