How can I fix the Stripe.js error caused by using a Payment Element with createPaymentMethod?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm encountering the following error in my JS console when clicking the submit button on my form that uses a Stripe Payment Element:

JAVASCRIPT
[Error] Unhandled Promise Rejection: IntegrationError: Invalid value for createPaymentMethod: card was 'payment' Element, which cannot be used to create card PaymentMethods. (anonymous function) (checkout2.js:44)

This error occurs only in the console with no corresponding server errors, and it prevents the form from submitting a POST request to Stripe. I've included the relevant files below for reference.

checkout2.js:

JAVASCRIPT
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('publishable key goes here (removed for the sake of the StackOverflow question)');

const appearance = {
  theme: 'night',
  variables: {
    colorPrimary: 'rgb(75, 67, 188)',
    fontFamily: 'Ideal Sans, system-ui, sans-serif',
    borderRadius: '5px',
  }
};

const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};
let clientSecret; // declare clientSecret outside the fetch callback
let elements; // declare elements outside the fetch callback

fetch('/secret')
  .then(response => response.json())
  .then(data => {
    clientSecret = data.client_secret;
    elements = stripe.elements({ clientSecret, appearance });
    const paymentElement = elements.create('payment', options);
    paymentElement.mount('#payment-element');
  });

// Handle form submission
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  if (!clientSecret || !elements) {
    console.error('Client secret or elements not loaded yet');
    return;
  }
  // Get the payment element
  const paymentElement = elements.getElement('payment');
  // Create a PaymentMethod
  const { paymentMethod, error } = await stripe.createPaymentMethod({
    type: 'card',
    card: paymentElement,
  });
  if (error) {
    // Handle error
    console.log(error);
  } else {
    const result = await stripe.confirmCardPayment(clientSecret, {
      payment_method: paymentMethod.id,
    });
    if (result.error) {
      // Handle error
      document.getElementById('error-message').innerText = result.error.message;
    } else {
      // Handle successful payment
      console.log('Payment successful!');
    }
  }
});

server.js:

JAVASCRIPT
import { createRequire } from 'module';
const require = createRequire(import.meta.url);

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const express = require('express');
const app = express();

const stripe = require('stripe')('secret key would be here, but removed for StackOverflow');

app.use(express.static('public'));

app.get('/secret', async (req, res) => {
  const paymentIntent = await stripe.paymentIntents.create({
    amount: 1099,
    currency: 'usd',
    automatic_payment_methods: {
      enabled: true,
    },
  });
  res.json({ client_secret: paymentIntent.client_secret });
});

app.listen(3000, () => {
  console.log('Server started on port 3000. Open http://localhost:3000 in your browser to view the public directory.');
});

index.html:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stripe Payment</title>
  <script src="https://js.stripe.com/v3/"></script>
  <style>
    body {
      background-color: #000000;
    }

    #payment-form {
      margin-left: 100px;
      margin-right: 100px;
    }

    #submit {
      margin-top: 30px;
      height: 40px;
      width: 175px;
      font-size: 20px;
      background-color: rgb(55, 48, 163);
      color: #ffffff;
      border: 0px;
      border-radius: 5px;
      cursor: pointer;
    }

    #submit:hover {
      background-color: rgb(75, 67, 188);
    }
  </style>
</head>
<body>
  <form id="payment-form">
    <div id="payment-element">
      <!-- Elements will create form elements here -->
    </div>
    <button id="submit">Submit</button>
    <div id="error-message">
      <!-- Display error message to your customers here -->
    </div>
  </form>
  <script src="../js/checkout2.js"></script>
</body>
</html>

The error shows up when I click 'Submit' on the HTML page, causing the form to fail entirely. According to accepted answers, the issue arises from calling stripe.createPaymentMethod() with a Payment Element using type: 'card'.

Based on the Stripe guidelines, the Payment Element is a unified UI component and should be used with stripe.confirmPayment() instead of stripe.createPaymentMethod().

I would appreciate guidance on how to modify my code to resolve this error and correctly process the payment using the Payment Element.

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

The error occurs because you’re trying to call stripe.createPaymentMethod() with a Payment Element. The Payment Element (created with elements.create('payment')) is a unified element and isn’t designed to be used with createPaymentMethod() when passing type: 'card'. Instead, when using the Payment Element, you should use stripe.confirmPayment() (or stripe.confirmPayment with your chosen PaymentIntent confirmation method) which handles the Payment Element correctly.

What’s Happening

Your code is doing this:

JS
const { paymentMethod, error } = await stripe.createPaymentMethod({
  type: 'card',
  card: paymentElement,
});

Here, the Payment Element isn’t a valid source for creating a card PaymentMethod. When you pass it to createPaymentMethod({ type: 'card', card: paymentElement }), Stripe throws an IntegrationError because the Payment Element (of type "payment") is not a proper card element.

How to Fix It

Since you’re using the Payment Element, you should confirm the PaymentIntent using stripe.confirmPayment(). For example, change your form submission handler to call stripe.confirmPayment() and pass the elements instead of trying to create a PaymentMethod manually:

JAVASCRIPT
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  if (!clientSecret || !elements) {
    console.error('Client secret or elements not loaded yet');
    return;
  }

  // Confirm the payment using the Payment Element.
  const { error } = await stripe.confirmPayment({
    // Passing the elements object automatically uses the mounted Payment Element.
    elements,
    confirmParams: {
      // Optionally, you can pass additional parameters like return_url if needed.
      return_url: 'https://your-website.com/checkout-success',
    },
  });

  if (error) {
    // Handle error (for example, display error message to your customer)
    document.getElementById('error-message').innerText = error.message;
  } else {
    // Payment succeeded, handle accordingly.
    console.log('Payment successful!');
  }
});

With this approach, Stripe will take charge of creating the PaymentMethod behind the scenes using the Payment Element that you mounted.

Summary

Issue: You're calling stripe.createPaymentMethod() with a Payment Element using type: 'card'.
Fix: Use stripe.confirmPayment() with your elements object since the Payment Element is not meant for creating a PaymentMethod directly.

This change should resolve the error in your JS console and allow the form to work correctly.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by MartianProbe123 • 2 months ago

With type: 'card' in stripe.createPaymentMethod(), it only allows Card Element, not Payment Element. Payment Element supports multiple payment methods whereas Card Element only supports card payment method. If you wish to integrate with card payment method only, I'd recommend checking Card Element integration guide here: https://docs.stripe.com/payments/card-element

For Payment Element integration, here's the guide to follow: https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements

No comments yet.

Discussion

No comments yet.

How can I fix the Stripe.js error caused by using a Payment Element with createPaymentMethod?

2 Answers

What’s Happening

How to Fix It

Summary

Discussion

Similar Posts

Stripe Checkout Integration: Resolving Network and CORS Errors on Redirect