我们可以从Stripe iframe获取卡信息吗？

Question

此问题仅供研究用途

目前我正在使用Stripe来做支付功能。但我想知道当用户在前端输入卡信息时是否可以从 Stripes iframe 获取卡信息。因为我可以从浏览器检查中看到该信息。 谢谢

// 1. My checkout page

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);

export const Checkout = () => {
  //....
  return (
    stripeSession?.session && (
      <Elements options={options} stripe={stripePromise}>
        <CheckoutForm
          totalPrice={calculateOrderAmount(
            stripeSession?.productInfo?.price || 0,
            stripeSession?.productInfo?.quantity || 1
          )}
          isUpdatingPaymentIntent={isLoading}
          isLoading={isLoading}
          setIsLoading={setIsLoading}
          stripeCustomer={stripeSession?.customer}
          userId={userId}
        />
      </Elements>
    )
  );
};

// 2. My Form


export const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit: SubmitHandler<TFormValue> = async (data, event) => {
    if (!stripe || !elements || !isValidStripe) return;
    event?.preventDefault?.();
    // get user card info from here ?
    await handlePayment(data);
    setIsLoading(false);
  };

  return (
    <FormProvider {...methods}>
      <StyledForm id="payment-form" onSubmit={methods.handleSubmit(handleSubmit)}>
        <PaymentElement id="payment-element" options={paymentElementOptions} />
        <StyledButton id="payment-submit-button" disabled={isDisabled} onClick={methods.handleSubmit(handleSubmit)}>
          <span>Pay ${totalPrice}</span>
        </StyledButton>
      </StyledForm>
    </FormProvider>
  );
};

Answer 1

这是不可能的，因为浏览器中的安全性会阻止访问跨域 iframe。