我可以在不使用 Stripe Card Element 的情况下使用 Stripe api答案

【问题标题】：Can I use Stipe api without using Stripe Card Element我可以在不使用 Stripe Card Element 的情况下使用 Stripe api
【发布时间】：2021-11-30 02:26:45
【问题描述】：

我正在使用 Stripe 创建动态支付模块，因为当我使用 Stripe 元素执行此操作时，它工作正常，但当我使用 Input 并提供数据时它无法正常工作。所以我需要问有没有什么方法可以使用 Input 标签并且仍然可以调用 API。如果不能，请给我官方链接。我找不到它。

这是我的带有输入标签的代码

<form onSubmit={handleSubmit}>
      <label htmlFor="name">Full Name</label>
      <input
        id="name"
        required
        placeholder="Jenny Rosen"
        value={name}
        onChange={(e) => {
          setName(e.target.value);
        }}
      />
      <br />
      <label htmlFor="cardNumber">Card Number</label>
      <input
        value={CardNumber}
        maxLength={16}
        onChange={(e) => {
          e.target.value = e.target.value
            .replace(/[^0-9.]/g, "")
            .replace(/(\..*)\./g, "$1");
          setCardNumber(e.target.value);
        }}
        type="text"
        id="cardNumber"
        options={ELEMENT_OPTIONS}
      />
      <br />
      <label htmlFor="expiry">Card Expiration Month</label>
      <input
        type="text"
        value={CardExpiryMonth}
        maxLength={2}
        onChange={(e) => {
          e.target.value = e.target.value
            .replace(/[^0-9.]/g, "")
            .replace(/(\..*)\./g, "$1");
          setCardExpiryMonth(e.target.value);
        }}
        id="expiry"
        options={ELEMENT_OPTIONS}
      />
      <br />
      <label htmlFor="expiry">Card Expiration Year</label>
      <input
        type="text"
        value={CardExpiryYear}
        maxLength={4}
        onChange={(e) => {
          e.target.value = e.target.value
            .replace(/[^0-9.]/g, "")
            .replace(/(\..*)\./g, "$1");
          setCardExpiryYear(e.target.value);
        }}
        id="expiry"
        options={ELEMENT_OPTIONS}
      />
      <br />
      <label htmlFor="cvc">CVC</label>
      <input
        value={CardCVV}
        maxLength={3}
        type="text"
        onChange={(e) => {
          e.target.value = e.target.value
            .replace(/[^0-9.]/g, "")
            .replace(/(\..*)\./g, "$1");
          setCardCVV(e.target.value);
        }}
        id="cvc"
        options={ELEMENT_OPTIONS}
      />
      <br />
      <label htmlFor="postal">Postal Code</label>
      <input
        id="postal"
        required
        placeholder="12345"
        value={postal}
        onChange={(e) => {
          setPostal(e.target.value);
        }}
      />
      <br />
      <label htmlFor="postal">User Name</label>
      <input
        required
        placeholder="user name"
        value={username}
        onChange={(e) => {
          setUsername(e.target.value);
        }}
      />
      <br />
      <label htmlFor="postal">Address</label>
      <input
        required
        placeholder="address"
        value={address}
        onChange={(e) => {
          setAddress(e.target.value);
        }}
      />
      {errorMessage && <ErrorResult data={errorMessage} />}
      {paymentMethod && (
        <Result data={"Got Payment Success: " + paymentMethod}></Result>
      )}
      <button type="submit" disabled={!stripe}>
        Pay
      </button>
    </form>

这就是我调用 API 的方式

const body = { amount: 600, email: "a@gmail.com" };
    const headers = {
      "Content-Type": "application/json",
    };
    let options = {
      method: "POST",
      headers: headers,
      body: JSON.stringify(body),
    };
    const secretKey = await fetch(
      "https://f8d5-45-125-156-6.ngrok.io" + "/api/v1/stripeCheckOut",
      options
    )
      .then((response) => response.json())
      .then(async (res) => {
        console.log("CHECKOUT_RES", res);
        return res.data;
      })
      .catch((error) => {
        console.log("CHECKOUT_error", error);
        return error;
      });

    console.log("CARDBODY", {
      number: CardNumber,
      exp_month: parseInt(CardExpiryMonth),
      exp_year: parseInt(CardExpiryYear),
      cvc: CardCVV,
    });

    // const token = await stripe
    //   .createToken({
    //     card: {
    //       number: CardNumber,
    //       exp_month: CardExpiryMonth,
    //       exp_year: CardExpiryYear,
    //       cvc: CardCVV,
    //     },
    //   })
    //   .then((response) => console.log("TOKEN", response));

    const payload = await stripe.confirmCardPayment(secretKey, {
      payment_method: {
        type: "card",
        card: {
          number: CardNumber,
          exp_month: CardExpiryMonth,
          exp_year: CardExpiryYear,
          cvc: CardCVV,
        },
        billing_details: {
          name: username,
          email: "codentic.user@gmail.com",
          phone: 8460304001,
          address: {
            line1: address,
            postal_code: postal,
          },
        },
      },
    });
    console.log("PaymentMethod", JSON.stringify(payload));
    if (payload.error) {
    } else {
      checkStatus(payload.paymentIntent.id);
      // setPaymentMethod(payload.paymentMethod);
    }

如果我在卡片中使用它

  const card = elements.getElement(CardNumberElement);

    if (card == null) {
      return;
    }

它工作正常。请帮忙

【问题讨论】：

标签： reactjs stripe-payments payment-gateway

【解决方案1】：

您不能将原始卡详细信息传递给 confirmCardPayment 函数。另外值得注意的是，如果您确实找到并构建了一种处理原始卡数据的方法，那么这会将 PCI 合规性负担转移到您和您的团队身上。 0

【讨论】：