PayPal Checkout

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

---

Try it in our Demo App

Learn more in our Dev Docs

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

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

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

Run tests:

gulp test

Build checkout.js:

gulp 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

gulp 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

• Http (AJAX) Helper functions