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
- Install the checkout-server-sdk dependency
- Add a folder for third party types, add a index.d.ts and configure it in your tsconfig.json as described here
- 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
- Install
react-async-script
and the corresponding types. This is a good way to load the PayPal JS library. - 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.