About paypal-checkout
PayPal Checkout via the npm package "paypal-checkout" offers a streamlined, secure method for integrating PayPal's payment solutions into web applications. This node module allows developers to easily embed PayPal's trusted payment system on their sites, ensuring a smooth transaction experience for users. With the rise of e-commerce, providing a reliable and efficient checkout process is crucial for maintaining customer satisfaction and trust. By using "paypal-checkout", developers can leverage PayPal's sophisticated fraud protection and compliance capabilities, which significantly reduces the complexity of handling online payments securely.
To incorporate PayPal Checkout into your project, you can start by using the command `npm install paypal-checkout`. This simple installation process adds the necessary PayPal integration components to your application, enabling you to utilize various checkout options, including PayPal buttons and localized payment methods. The module supports automatic updates to keep your payment system current with the latest features and security enhancements offered by PayPal. This ensures that your e-commerce platform remains compliant with global payment standards and regulations, providing peace of mind for both developers and end-users.
The benefits of implementing "paypal-checkout" in your web projects are extensive. Not only does it offer a robust environment for handling payments securely, but it also enhances user experience by enabling quick, one-touch purchases through PayPal's One Touch™ technology. This feature allows customers to complete purchases without having to enter their details each time, thereby speeding up the transaction process and increasing conversion rates. Furthermore, with PayPal's wide acceptance, you can cater to a global audience, enhancing the reach and potential growth of your business.
Dependencies
Core dependencies of this npm package and its dev dependencies.
@krakenjs/beaver-logger, @krakenjs/belter, @krakenjs/cross-domain-utils, @krakenjs/jsx-pragmatic, @krakenjs/post-robot, @krakenjs/zalgo-promise, @krakenjs/zoid, @paypal/common-components, @paypal/connect-loader-component, @paypal/funding-components, @paypal/sdk-client, @paypal/sdk-constants, @paypal/sdk-logos, @bunchtogether/vite-plugin-flow, @krakenjs/grumbler-scripts, @krakenjs/eslint-config-grumbler, @krakenjs/sync-browser-mocks, @percy/cli, @percy/playwright, @playwright/test, @vitest/coverage-v8, babel-core, bundlemon, conventional-changelog-cli, cross-env, flow-bin, flow-typed, fs-extra, husky, imagemagick, imgur, jest, karma, karma-coverage, lint-staged, memory-fs, mocha, mocketeer, pixelmatch, playwright, pngjs, prettier, prettier-plugin-sh, puppeteer, serve, vite, vitest
Documentation
A README file for the paypal-checkout code repository. View Code
PayPal Checkout
A set of components allowing easy integration of PayPal Buttons and PayPal Checkout into your site, powered by zoid.
Dev Docs
See developer.paypal.com/docs/checkout
Issues
Please submit any issues about the JS SDK here: https://github.com/paypal/paypal-js/issues
Development
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.
Quick Setup
Set up your env:
npm install
Run tests:
npm test
Run in dev mode:
npm run dev
Testing Tasks
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 |
lint
npm run lint
npm run lint -- --fix
# attempt to automatically fix any problems
Runs eslint using definitions extended from Grumbler-Scripts.
flow
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.
karma
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.
jest-ssr
npm run jest-ssr
Checks for the correct rendering of components on the server-side using Jest.
jest-screenshot
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.
check-size
npm run check-size
Checks to make sure that the compiled & gzipped bundle doesn't exceed the recommended size limit.
Releasing
This package is published weekly, Every Wednesday. Please view our Changelog to stay updated with bug fixes and new features.
Logo Strategy with paypal-sdk-logos
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.