PayPal Plus Integration & Server SDK with TypeScript and React

Integrating PayPal Plus (a German PayPal integration that supports payment via invoice) can be hard with a modern tech stack. The PayPal Server SDK does not include TypeScript types and the PayPal Plus code rendering payment selection is vanilla JS. Here are some hints how to integrate it.

Backend: PayPal Server SDK & TypeScript

1. Install the checkout-server-sdk dependency
2. Add a folder for third party types, add a index.d.ts and configure it in your tsconfig.json as described here
3. For the types itself, you can map the PayPal Order API. To get started, have a look at this repository (however it’s nowhere near complete).

Frontend: PayPal Plus & React

1. Install react-async-script and the corresponding types. This is a good way to load the PayPal JS library.
2. I’d suggest one component for <PaymentMethodSelection/>, one for <PayWithPayPalPlusButton/> and one for <PaymentSuccess/>

PaymentMethodSelection

export const PaymentMethodSelection: React.FC = () => {
  // ... create order, this will return approveUrl ...

  return (
      <PayPalPlus asyncScriptOnLoad={() => {
         window.PAYPAL.apps.PPP({
           approvalUrl: /* ... */,
           useraction: 'continue',
           onContinue: /* ... go to next page */
	 }}
      />
  )

PayPalPlus

import React from 'react'
import makeAsyncScript from 'react-async-script'

const PayPalPlusDiv: React.FC = () => <div id="ppplus" />

export default makeAsyncScript('https://www.paypalobjects.com/webstatic/ppplus/ppplus.min.js')(PayPalPlusDiv)

PayWithPayPalPlusButton

Create a button that also loads the ppplus.min.js and calls window.PAYPAL.apps.PPP.doCheckout() onClick.

PaymentSuccess

Create a page that captures the order/payment (using the token query parameter as paymentId) and then renders a success message.