PayPal Checkout

[![build status][build-badge]][build] [![code coverage][coverage-badge]][coverage] [![npm version][version-badge]][package] [![apache license][license-badge]][license]

[build-badge]: https://img.shields.io/github/actions/workflow/status/paypal/paypal-checkout-components/main.yml?branch=main&logo=github&style=flat-square [build]: https://github.com/paypal/paypal-checkout-components/actions?query=workflow%3Abuild [coverage-badge]: https://img.shields.io/codecov/c/github/paypal/paypal-checkout-components.svg?style=flat-square [coverage]: https://codecov.io/github/paypal/paypal-checkout-components/ [version-badge]: https://img.shields.io/npm/v/@paypal/checkout-components.svg?style=flat-square [package]: https://www.npmjs.com/package/@paypal/checkout-components [license-badge]: https://img.shields.io/npm/l/@paypal/checkout-components.svg?style=flat-square [license]: https://github.com/paypal/paypal-checkout-components/blob/main/LICENSE

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