Accepting online payments with Stripe

Question

So It is my first time using Stripe, the thing I am trying to do is this. I have created a backend for it for testing purposes. But I am having a problem, when I click on the button pay, I am getting this error in the console Uncaught (in promise) IntegrationError: You must provide a Stripe Element or a valid token type to create a Token.. What is causing this error?

Server.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

Payment Form

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 (
             
        Payment Successful!
      
    )
  }

    return (
        <>  
         
             
                
                    
                
             
                
                
                    order total :  ${total}
                
         
        
    )
  }  



export default PaymentForm

Stripe Container

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 (
        
            
        
    )
}
export default StripeContainer

user_12474862 · Answer

Instead of using Tokens & Charges for a new integration, I'd suggest using the newer Payment Intents & Payment Methods APIs, following this guide to accept a payment.

It also looks like you're using the deprecated react-stripe-elements library (deprecation notice), which has be replaced with the @stripe/react-stripe-js library (github, docs).

In either case you need to make sure you initialize Stripe.js with a provider. Using the newer library that looks like this (docs):

const stripePromise = loadStripe('pk_test_123');

const App = () => {
  return (
    
      
    
  );
};

If you want to use the older library, the provider works like this (old docs):

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

const App = () => {
  return (
    
      
    
  );
};

Accepting online payments with Stripe

1 Answers