javascript - 无法将 JS 文件导入 TSX 文件
问题描述
大家好,我是 React 的新手。我正在使用 typescript 构建我的 react 应用程序,并希望添加 Stripe 来进行在线支付。但是我找不到关于stripe的打字稿教程,所以我尝试使用javascript来编写stripe部分。但是当我触发条纹时。出现以下错误:
参考 stackOverFlow 上的其他解决方案,我使用了不同的导入方法,例如
import stripe from './stripe';
import * as stripe from './stripe';
但他们都不能解决我的问题。
我的代码有什么问题?
以下是代码: 对于 Stripe 文件:
import React from 'react'
import { Element } from "@stripe/react-stripe-js"
import { loadStripe } from '@stripe/stripe-js'
import "./Stripe.css"
const PaymentForm = require ('./PaymentForm.js')
const PUBLIC_KEY = "pk_test_XXXXXXX"
const stripeTestPromise = loadStripe(PUBLIC_KEY)
export default function Stripe() {
return (
<Element stripe={stripeTestPromise}>
<PaymentForm />
</Element>
)
}
对于 paymentFrom 文件:
import React, { useState } from 'react'
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
import * as axios from 'axios'
import "./Stripe.css"
const CARD_OPTIONS = {
iconStyle: "solid",
style: {
base: {
iconColor: "#c4f0ff",
color:"fff",
fontWeight: 500,
fontSize: "16px",
fontSmoothing:"antialiased",
},
invaild: {
iconColor: "#ffc7ee",
color: "ffc7ee"
}
}
}
export default function PaymentForm() {
const [success, setSuccess] = useState(false)
const stripe = useStripe()
const elements = useElements()
const handleSubmit = async (e) => {
e.preventDefault()
const { error, paymentMethod } = await stripe.createPaymentMethod({
type: "card",
card: elements.getElement(CardElement)
})
if (!error) {
try {
const { id } = paymentMethod
const response = await axios.post('http://localhost:8080/checkout', {
amount: 500,
id
})
if (response.data.success) {
console.log('Successful payment')
setSuccess(true)
}
} catch (error) {
console.log('Error', error)
}
} else {
console.log(error.message)
}
}
return (
<div>
{!success ?
<form onSubmit={handleSubmit}>
<fieldset className="FormGroup">
<div className="FormRow">
<CardElement options={CARD_OPTIONS} />
</div>
</fieldset>
<button>Pay</button>
</form >
:
<div>
<h2>You just bought a sweet saptula</h2>
</div>
}
</div>
)
}
解决方案
我想发表评论,但我没有这样做的声誉,所以我将提交一个答案:
如果您尝试按照文档插入元素提供程序, 则需要以这种方式插入提供程序:
import {Elements} from '@stripe/react-stripe-js';
你正在像这样导入这个
import {Element} from '@stripe/react-stripe-js';
您要导入的元素可能是接口或其他对象,而不是您想要的提供者
推荐阅读
- python - 使用离散字符串 x 轴平滑 matplotlib 图?
- node.js - NestJs 是否支持客户端的 RabbitMQ 超时增加?
- home-assistant - 家庭助手Mqtt更新后切换奇怪
- r - 如何通过在R中一次只取两个值的函数循环向量?
- sql - 根据每个 ID 的另一列的值查找一个列的两个值
- numpy - Numpy 改进或避免循环
- c++ - 找到最小的正数
- javascript - 更新 JSON 文件写入在 NodeJS 中不起作用
- javascript - 如何让 A 和 B 并行运行?
- react-native - 我们可以传递隐藏在 React Native 中的 id 吗?