For my last project, I’m using PayPal to process user’s subscriptions. I use Cypress to write end-to-end tests that I run in my dev environment after deploying changes. There are a few challenges trying to test the subscription flow with PayPal using Cypress.
Note: Cypress discourages including 3rd party services in a test. But I think that an end-to-end test should reproduce a user’s interaction as close as possible. Is very important for the checkout flow to test that the integration with PayPal is working properly.
Use PayPal buttons
Without entering into too many details, there are two simple ways to integrate PayPal. One is to create the order or subscription agreement in the backend using PayPal’s API and redirect the user to the returned URL to complete the checkout at PayPal. This method has a catch: you cannot use that URL in an iframe. PayPal will “exit” the iframe by redirecting the user in the main frame. Since Cypress actually runs everything inside an iframe, even if you redirect the user and you don’t use iframes in your code, when testing PayPal will see that it’s inside one and will “exit”, making it impossible to continue running Cypress commands to complete the flow.
The second option is to use PayPal JS SDK (or its React package), which render an iframe that shows buttons which trigger a new popup window to complete the flow. With some workarounds and a few anti-patterns, we can successfully use Cypress with this alternative.
Tweaking Cypress
By default and for security reasons, browsers restrict access to windows with a different origin. So in order to interact with these, we will need to disable this restriction first. In your cypress.json file add:
{
"chromeWebSecurity": false
}Interacting with PayPal
Because of these iframes and popups now flying around, it’s not very straightforward to find a way to go through the flow with Cypress. I’ve created a few helper commands to make it easier. They allow to:
- Click on the button rendered by PayPal inside its iframe
- Capture the popup window that opens when clicking the button
- Sign in (checking if it needs to sign in at all, if it’s a 2 step sign in flow, or 1 step)
- Interact with any element in the popup
Important: make sure you are using PayPal’s sandbox when running these commands
Usage example
With this commands, you can easily write a test like I did for my subscription flow:
Check out my latest product: InCircl — An internal communications platform for medium/large organizations.
