使用 Stripe 接受在线支付

Question

所以这是我第一次使用 Stripe，我想做的就是这个。我为它创建了一个后端用于测试目的。但是我遇到了一个问题，当我点击支付按钮时，我在控制台Uncaught (in promise) IntegrationError: You must provide a Stripe Element or a valid token type to create a Token. 中收到此错误。是什么导致了这个错误？

服务器.js

require("dotenv").config({ path: "./config.env" });
const express = require("express");
const app = express();
const bodyParser = require('body-parser')
const postCharge = require('./routes/stripe')
const router = express.Router()
const cors = require("cors")

app.use(express.json());
app.use(cors());


router.post('/stripe/charge', postCharge)
router.all('*', (_, res) =>
  res.json({ message: 'please make a POST request to /stripe/charge' })
)
app.use((_, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  )
  next()
})
app.use(bodyParser.json())
app.use('/payment',router)

app.get('*', (_, res) => {
  res.sendFile(path.resolve(__dirname, '../audible/public/index.html'))


const PORT = process.env.PORT || 5000;

const server = app.listen(PORT, () =>
  console.log(`Sever running on port ${PORT}`)
);

Stripe.js

const stripe = require('stripe')(process.env.STRIPE_SECRET_TEST)

async function postCharge(req, res) {
  try {
    const { amount, source, receipt_email } = req.body

    const charge = await stripe.charges.create({
      amount,
      currency: 'usd',
      source,
      receipt_email
    })

    if (!charge) throw new Error('charge unsuccessful')

    res.status(200).json({
      message: 'charge posted successfully',
      charge
    })
  } catch (error) {
    res.status(500).json({
      message: error.message
    })
  }
}

module.exports = postCharge

付款表格

import React,{useContext, useState} from 'react'
import {CardElement, useStripe, useElements } from"@stripe/react-stripe-js"
import { CartContext } from '../../context/cart'
import axios from 'axios'
import {  useHistory } from "react-router-dom";


const CARD_OPTIONS={
    base: {
        color: '#303238',
        fontSize: '16px',
        fontFamily: '"Open Sans", sans-serif',
        fontSmoothing: 'antialiased',
        '::placeholder': {
          color: '#CFD7DF',
        },
      },
      invalid: {
        color: '#e5424d',
        ':focus': {
          color: '#303238',
        },
      },
}
const PaymentForm = () => {
  const { total} = useContext(CartContext)
  const stripe = useStripe();
  const [receiptUrl, setReceiptUrl] = useState('')
  const history = useHistory()
  const {clearCart} = useContext(CartContext)
  const elements = useElements()

  const handleSubmit = async event => {
    event.preventDefault()
    const cardElement = elements.getElement(CardElement);
    const { token } = await stripe.createToken()

    const order = await axios.post('http://localhost:5000/api/stripe/charge', {
      amount: 1000,
      source: token,
      card: cardElement,
      receipt_email: 'customer@example.com'
      
    })
    setReceiptUrl(order.data.charge.receipt_url)
  }
  if (receiptUrl){
    history.push('/');
    clearCart();
    return (
      <div className="success">       
        <h2>Payment Successful!</h2>
      </div>
    )
  }

    return (
        <>  
         <form onSubmit={handleSubmit}>
             <fieldset className='form_group'>
                <div className='formRow'>
                    <CardElement options={CARD_OPTIONS} />
                </div>
             </fieldset>
                <button type='submit' className=''>Pay</button>
                <h3>
                    order total : <span> ${total}</span>
                </h3>
         </form>
        </>
    )
  }  



export default PaymentForm

条带容器

import React from 'react'
import {loadStripe} from '@stripe/stripe-js'
import {Elements, } from '@stripe/react-stripe-js'
import PaymentForm from './PaymentForm'
const PUBLIC_KEY="pk_test_51IaINYEqJWuHZaMS8NbdFT8M7ssdvFXOqBO8gwn1MjQCJ9Mq5kYdraTFG4Y28i9xLtaWKJanVLLbjlrduQKHv00uJ0WbJnu"

const stripeTestPromise = loadStripe(PUBLIC_KEY)
const StripeContainer = () => {
    return (
        <Elements stripe={stripeTestPromise}>
            <PaymentForm   />
        </Elements>
    )
}
export default StripeContainer

Answer 1

我建议不要使用令牌和费用进行新的集成，而是使用更新的支付意图和支付方法 API，遵循 this guide to accept a payment。

您似乎也在使用已弃用的 react-stripe-elements 库 (deprecation notice)，它已被 @stripe/react-stripe-js 库（github、docs）替换。

在任何一种情况下，您都需要确保使用提供程序初始化 Stripe.js。使用如下所示的新库 (docs)：

const stripePromise = loadStripe('pk_test_123');

const App = () => {
  return (
    <Elements stripe={stripePromise}>
      <MyCheckoutForm />
    </Elements>
  );
};

如果您想使用较旧的库，提供程序的工作方式如下 (old docs)：

import {StripeProvider} from 'react-stripe-elements';
import MyStoreCheckout from './MyStoreCheckout';

const App = () => {
  return (
    <StripeProvider apiKey="pk_test_12345">
      <MyStoreCheckout />
    </StripeProvider>
  );
};