https://github.com/leojuriolli7/cypress-stripe-elements
Cypress Plugin for filling Stripe Elements inside an iframe.
https://github.com/leojuriolli7/cypress-stripe-elements
cypress e2e plugin stripe stripe-elements testing
Last synced: 9 months ago
JSON representation
Cypress Plugin for filling Stripe Elements inside an iframe.
- Host: GitHub
- URL: https://github.com/leojuriolli7/cypress-stripe-elements
- Owner: leojuriolli7
- License: mit
- Created: 2025-08-30T17:53:51.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-30T18:45:46.000Z (10 months ago)
- Last Synced: 2025-08-30T19:31:35.224Z (10 months ago)
- Topics: cypress, e2e, plugin, stripe, stripe-elements, testing
- Language: TypeScript
- Homepage:
- Size: 27.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cypress-stripe-elements
A Cypress plugin that provides a command to easily fill Stripe Elements inputs within iframes. Without `cy.wait()` hacks or else.
## Installation
```bash
npm install --save-dev cypress-stripe-elements
# or
yarn add --dev cypress-stripe-elements
# or
pnpm install --save-dev cypress-stripe-elements
```
Set `{ "chromeWebSecurity": false }` in your `cypress.config.js` file, or the plugin will not work:
```js
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
chromeWebSecurity: false,
},
});
```
Import the plugin in your Cypress support file:
```js
// cypress/support/e2e.js
import "cypress-stripe-elements";
```
### TypeScript
If you encounter type errors, make sure to include the following `types` in your `tsconfig.json` file:
```json
{
"compilerOptions": {
"types": ["cypress", "cypress-stripe-elements"]
}
}
```
## Usage
This package provides a `cy.fillStripeElement(name, value)` command. It works with every Stripe Element that renders a text input.
### How it works
The `fillStripeElement` command targets Stripe Elements inputs via their `name` attribute (e.g., `input[name="number"]` for Credit Card number input). While some field names are typed for common PaymentElement fields (`number`, `cvc`, `expiry`) and LinkAuthenticationElement (`email`), you can pass any name string to support any text input field from Stripe's iframes.
### Basic Usage
```js
cy.fillStripeElement("number", "4242424242424242"); // Fill Credit Card number field
cy.fillStripeElement("expiry", "0442"); // Fill CC Expiry field
cy.fillStripeElement("cvc", "424");
cy.fillStripeElement("email", "test@example.com");
```
### Working with Multiple Iframes
When you have multiple Stripe Elements on a page (e.g., PaymentElement + LinkAuthenticationElement), use Cypress's `within()` command to scope your interactions to the correct iframe:
```js
// E-mail input is in the LinkAuthenticationElement iframe
cy.getBySelector("PaymentForm-LinkAuthenticationElement").within(() => {
cy.fillStripeElement("email", "placeholder@mail.com");
});
// Card inputs are in the PaymentElement iframe
cy.getBySelector("PaymentForm-PaymentElement").within(() => {
cy.fillStripeElement("number", "4242424242424242");
cy.fillStripeElement("expiry", "0442");
cy.fillStripeElement("cvc", "424");
});
cy.getBySelector("PaymentForm-SubmitButton").click();
```
### Complete Example
Given a form component like this:
```tsx
Submit
```
Your Cypress test would look like:
```js
describe("Payment Form", () => {
it("successfully fills payment information", () => {
cy.visit("/payment");
// Fill email in LinkAuthenticationElement
cy.getBySelector("PaymentForm-LinkElement").within(() => {
cy.fillStripeElement("email", "test@example.com");
});
// Fill card details in PaymentElement
cy.getBySelector("PaymentForm-PaymentElementContainer").within(() => {
cy.fillStripeElement("number", "4242424242424242");
cy.fillStripeElement("expiry", "0442");
cy.fillStripeElement("cvc", "424");
});
cy.getBySelector("PaymentForm-SubmitButton").click();
// Assert success state
cy.contains("Payment successful").should("be.visible");
});
});
```
## Credits
This library is based on and heavily inspired by [`cypress-plugin-stripe-elements`](https://github.com/dbalatero/cypress-plugin-stripe-elements) by [@dbalatero](https://github.com/dbalatero). The original library was unmaintained, and this version includes fixes for updated Stripe Element selectors and modern Cypress compatibility.
## License
MIT