🔌 APIs & SDKsStripe

Question about client-side use of stripe

Freshabout 21 hours ago

Mar 14, 20260 views

Confidence Score53%

53%

Problem

Pardon the potential newbie question here, but, I'm wanting to create a token based off card data, without using the `stripe.js` code, and do it 100% in JS + React. So in one of my components, I do this: [code block] And I get this error: [code block] I'm assuming this is because I'm in a strictly client-side only environment here. But surely there has to be a way where I can take credit card information filled into a form, and generate a token based off that, in a PCI-compliant way? Full code: [code block]

Error Output

Error: require(...).createServer is not a function

Unverified for your environment

Select your OS to check compatibility.

Your OS

OS version

Product version

1 Fix

Canonical Fix

Unverified Fix

New Fix – Awaiting Verification

Implement Stripe.js for PCI Compliance

Medium Risk

The error occurs because the attempt to create a token from card data directly in a client-side React application without using Stripe.js is not compliant with PCI standards. Stripe.js is designed to securely handle sensitive card information and create tokens without exposing card data to your server.

Awaiting Verification

Be the first to verify this fix

1
Install Stripe.js
Ensure that you have Stripe.js included in your project. This library is essential for securely handling card information.
html
```
<script src='https://js.stripe.com/v3/'></script>
```
2
Initialize Stripe
In your React component, initialize Stripe with your publishable key. This will allow you to create tokens securely.
javascript
```
const stripe = Stripe('your-publishable-key');
```
3
Create a Card Element
Use Stripe's Card Element to collect card details. This ensures that card data is handled securely and complies with PCI regulations.
javascript
```
const cardElement = elements.create('card');
cardElement.mount('#card-element');
```
4
Handle Form Submission
On form submission, use Stripe.js to create a token from the card details entered by the user. This token can then be sent to your server for processing.
javascript
```
stripe.createToken(cardElement).then(function(result) {
  if (result.error) {
    // Handle error
  } else {
    // Send token to your server
  }
});
```
5
Send Token to Your Server
Once you have the token, send it to your server for further processing, such as creating a charge or saving it for future use.
javascript
```
fetch('/your-server-endpoint', {
  method: 'POST',
  body: JSON.stringify({ token: result.token.id }),
  headers: { 'Content-Type': 'application/json' }
});
```

Validation

To confirm the fix worked, test the form by entering valid card details. Ensure that a token is created successfully and that it is sent to your server without any errors. Verify that the server processes the token correctly.

Environment

Submitted by

Alex Chen

2450 rep

Question about client-side use of stripe

Problem

Error Output

1 Fix

Implement Stripe.js for PCI Compliance

Install Stripe.js

Initialize Stripe

Create a Card Element

Handle Form Submission

Send Token to Your Server

Validation

Environment

Submitted by

Tags