@paypal/checkout-components
Advanced tools
PayPal Checkout components, for integrating checkout products.
A set of components allowing easy integration of PayPal Buttons and PayPal Checkout into your site, powered by zoid.
See developer.paypal.com/docs/checkout
Please feel free to follow the Contribution Guidelines to contribute to this repository. PRs are welcome, but for major changes please raise an issue first.
Set up your env:
npm install
Run tests:
npm test
Run in dev mode:
npm run dev
npm test
Runs all testing tasks lint, flow, karma, jest-ssr, jest-screenshot, & check-size.
| Flags | Description |
|---|---|
| --clear-cache | Clear Babel Loader and PhantomJS cache |
| --debug | Debug mode. PhantomJS, Karma, and CheckoutJS |
| --quick | Fastest testing. Minimal output, no coverage |
| --browser | Choose Browser |
npm run lint
npm run lint -- --fix
# attempt to automatically fix any problems
Runs eslint using definitions extended from Grumbler-Scripts.
npm run flow
Checks for typing issues using Flow. Prior to running this task, flow-typed should be run to generate type interfaces for the various 3rd-party libraries we use.
npm run karma
npm run karma -- --keep-open
# keeps the test browser window open to allow debugging
npm run karma -- --capture-console
# dumps the browser's console output into the terminal
Runs Karma tests using the Mocha framework. Responsible for running the test/e2e & test/integration directories.
npm run jest-ssr
Checks for the correct rendering of components on the server-side using Jest.
npm run jest-screenshot
Uses Puppeteer & Jest to take screenshots and checks against existing views to look for discrepancies. Tests are defined in test/screenshot/config.js.
npm run check-size
Checks to make sure that the compiled & gzipped bundle doesn't exceed the recommended size limit.
This package is published weekly, Every Wednesday. Please view our Changelog to stay updated with bug fixes and new features.
Our usage of svg logos is optimized for performance. Here's how it works for the two-phased render for the Buttons component:
First Render - Buttons are first rendered on the client-side inside an <iframe> tag using the code bundled inside the JS SDK script. This <iframe> tag has no src attribute at this point in the rendering life cycle. We leverage the __WEB__ global variable to determine if we are rendering client-side or server-side. The __WEB__ global variable will equal true when rendering client-side. To minimize the bundle size of the JS SDK script, we load these svg logos from the www.paypalobjects.com CDN as external images (ex: <PayPalLogoExternalImage />).
Second Render - The second phase of rendering happens on the server-side. This <iframe> tag is fully rendered by setting the src attribute and making an http request to the server to populate the contents which are securely hosted by PayPal's servers on www.paypal.com. The same code in this repo is used to render the buttons on the server-side. To ensure there are no issues with the logos, we have decided to inline the svg code for this server-side render (ex: <PayPalLogoInlineSVG />). The __WEB__ global variable is set to false to control what code executes during the server render.
FAQs
PayPal Checkout components, for integrating checkout products.
The npm package @paypal/checkout-components receives a total of 502 weekly downloads. As such, @paypal/checkout-components popularity was classified as not popular.
We found that @paypal/checkout-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.