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

Posted 2023-03-22

【中文标题】我可以在不使用 Stripe Card Element 的情况下使用 Stripe api

【英文标题】：Can I use Stipe api without using Stripe Card Element

【发布时间】：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: "[e-mail]" ;
    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: "[e-mail]",
          phone: [phone],
          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;
    

它工作正常。请帮忙

【参考方案1】：

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