A set of components allowing easy integration of PayPal Buttons and PayPal Checkout into your site, powered by zoid.
-
Do you want the simplest possible PayPal Integration? If so, you should stick with the Basic PayPal Checkout Button which allows you to just drop a button straight into your page. This will allow your customer to pay with PayPal, and we'll notify you when they're done.
-
Do you want a button which gives you finely grained control over your transaction; creating and finalizing transactions from your server side using PayPal's REST api? If so you should use the Advanced Javascript Integration, which will allow you to create and finalize the transaction yourself on your server side using the PayPal Payments REST API.
-
Do you use React.js, Angular.js or Ember.js to render your page? If so, you should use the React.js, Angular.js or Ember.js Elements, which provide native support for each of these frameworks, so you can drop PayPal Buttons in any of your front-end views.
-
Do you have a mark integration? In this case, you should look at the Mark Integration docs to decide how best to integrate PayPal Checkout
-
Add
checkout.v4.js
to your page:<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
-
Drop the following component onto your page:
This component renders a PayPal button onto your page, which will take care of opening up PayPal for you and guiding your customer through the payment process. After the payment is complete, we will notify you using a javascript callback, and you can take your customer to a success page.
Integrate the button component
If you want to use the advanced javascript integrations, you will need a way to create payment tokens on your server side. The simplest way to do this is using the PayPal Payments REST API
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 -g flow-typed
npm install
flow-typed install
Run tests:
npm test
Build checkout.js:
npm run build
To enable output of additional debugging messages to the console, set the data-log-level
attribute of the script element to e.g. info
(default value is warn
):
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4 data-log-level="info"></script>
npm test
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 |
Here is a full list of features provided by this library
This package is published weekly, Every Wednesday. Please view our Changelog to stay updated with bug fixes and new features.