Javascript Integration for PayPal Button and PayPal Checkout
Clone or download
mcntsh refactor(publishing): fixing postversion script to push both tags and…
… release commit (#941)

* refactor(publishing): Splitting up publish and version logic

* refactor(publishing): Adding publish message

* refactor(publishing): Adding generated changelog

* refactor(publishing): Clean up

* refactor(publishing): Cleaning up the Changelog a bit

* refactor(publishing): Documentation for releases and contributing

* refactor(publishing): post-version script will push to paypal repo

* refactor(publishing): fixing postversion script to push both tags and release commit
Latest commit a528d3d Nov 9, 2018
Permalink
Failed to load latest commit information.
.github Update ISSUE_TEMPLATE.md Oct 5, 2017
demo style(card-demo): Cleaning up the card demo (#904) Oct 23, 2018
dist chore(release): 4.0.233 🎉 Nov 7, 2018
docs Update documentation (#887) Oct 10, 2018
scripts refactor(publishing): fixing postversion script to push both tags and… Nov 9, 2018
src Add ancestry.com to venmo blacklist Nov 8, 2018
test fix(callback-api): Call onError when the prop catches an error (#908) Oct 25, 2018
.babelrc Only use babel-browser for src Aug 9, 2018
.editorconfig feat(editorconfig): Add editor config Jul 1, 2016
.eslintignore Add dist and node_modules to .eslintignore Jan 25, 2018
.eslintrc.js Namespace and export globals Apr 27, 2018
.flowconfig Switch to zoid Oct 30, 2018
.gitignore Add DS_Store to gitignore Mar 20, 2017
.npmrc refactor(publishing): Splitting up publish/version logic and automati… Nov 7, 2018
.travis.yml Remove flow-typed from postinstall Feb 15, 2018
CHANGELOG.md chore(release): 4.0.233 🎉 Nov 7, 2018
CONTRIBUTING.md refactor(publishing): Splitting up publish/version logic and automati… Nov 7, 2018
LICENSE.txt Update LICENSE.txt Nov 21, 2016
README.md refactor(publishing): Splitting up publish/version logic and automati… Nov 7, 2018
SECURITY.md Update SECURITY.md to reference bug bounty program (Issue #314) (#327) May 9, 2017
__sdk__.js gql query for epm to enable card (#720) Jun 20, 2018
fastpublish.sh xcomponent to zoid cleanup Nov 1, 2018
globals.js Switch to zoid Oct 30, 2018
index.js fixing flow config May 25, 2018
karma.conf.js Namespace and export globals Apr 27, 2018
package.json chore(commitizen): Add commitizen packages for commit message convent… Nov 9, 2018
quickbuild.sh xcomponent to zoid cleanup Nov 1, 2018
webpack-dev-server.config.js chore: add webpack dev server command to build and watch checkout code ( May 8, 2018
webpack.base.config.js Namespace and export globals Apr 27, 2018
webpack.button.config.js Namespace and export globals Apr 27, 2018
webpack.button.render.config.js Feature: Inline guest (#758) Aug 13, 2018
webpack.config.js Add __DEBUG__ compile-time global Sep 7, 2018

README.md

PayPal Checkout

Gitter chat Build Status dependencies Status devDependencies Status

A set of components allowing easy integration of PayPal Buttons and PayPal Checkout into your site, powered by zoid.


HowTo Videos

Try it in our Demo App

Learn more in our Dev Docs

Upgrade your classic PayPal integration

Deep Dive in our YouTube Training

Demo App Source


Which Integration is right for me?

  • 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

Create a PayPal REST Application

Usage

  1. Add checkout.v4.js to your page:

    <script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
  2. Drop the following component onto your page:

PayPal Checkout Button

PayPal Button

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


Integrating with the PayPal REST API

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

Integrating with the PayPal REST API


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 -g flow-typed
npm install
flow-typed install

Run tests:

npm test

Build checkout.js:

npm run build

Debugging messages

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>

Test Tasks

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

Features

Here is a full list of features provided by this library

Releasing

This package is published weekly, Every Wednesday. Please view our Changelog to stay updated with bug fixes and new features.