PayPal

Medusa Paypal Payment

What is it?

Medusa Paypal Payment is a basic integration of payment provider for Paypal.

Installation

1. Install plugin by adding to your Copy to clipboardpackage.json:

Warning

123
...
"@rsc-labs/medusa-paypal-payment": "0.0.1" // or other available version
...

and execute install, e.g. Copy to clipboardyarn install.

1. Add plugin to your Copy to clipboardmedusa-config.js (Note - please notice that you need to add it to payment plugin):

1234567891011121314151617181920
...
  plugins: [
    {
      resolve: "@rsc-labs/medusa-paypal-payment",
      options: {
        oAuthClientId: <oauth-client-id>,
        oAuthClientSecret: <oauth-client-secret>,
        environment: <env-definition>,
      },
    }
  ],
  modules: [
    {
      resolve: "@medusajs/medusa/payment",
      options: {
        providers: [
          {
            resolve: "@rsc-labs/medusa-paypal-payment/providers/paypal-payment",
            id: "paypal-payment",
            options: {

Overview

The Paypal Provider gives ability to:

• make a payment using Paypal
• cancel payment
• refund payment
• track payments in Paypal

Configuration

Plugin uses 3 required parameters:

• Copy to clipboardoAuthClientId - required parameter which you can find in your Paypal Developer Dashboard
• Copy to clipboardoAuthClientSecret - required parameter which you can find in your Paypal Developer Dashboard
• Copy to clipboardenvironment - set to Copy to clipboardsandbox or Copy to clipboardproduction. You can use it to test with your Copy to clipboardsandbox environment.

After above configuration, you can then add the payment provider to your reqion.

Storefront

We recommend using Copy to clipboard@paypal/react-paypal-js package on your storefront as it simplifies the implementation a lot. Here is the example of using Paypal as payment:

1234567891011121314151617181920
import { OnApproveActions, OnApproveData } from "@paypal/paypal-js"
import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js"
...
const PayPalPaymentButton = ({
  cart,
  notReady,
  "data-testid": dataTestId,
}: {
  cart: HttpTypes.StoreCart
  notReady: boolean
  "data-testid"?: string
}) => {
  const [submitting, setSubmitting] = useState(false)
  const [errorMessage, setErrorMessage] = useState<string | null>(null)

  const onPaymentCompleted = async () => {
    await placeOrder()
      .catch((err) => {
        setErrorMessage(err.message)
      })

Copy to clipboardclient-id - you can retrieve it from your Paypal Developer Dashboard.

Notes

1. Intent has been chosen to Copy to clipboardauthorize in Copy to clipboardPayPalScriptProvider - it means that firstly payment is authorized, then it can be capture via Admin UI. Plugin (not yet) support automatic capturing.
2. Copy to clipboardusePayPalScriptReducer requires Copy to clipboardPayPalScriptProvider to be a parent. It is not problem when making a payment, but when you would like to redirect the user you need be careful. The best option is to put Copy to clipboardPayPalScriptProvider as high as possible in components' tree.
3. Copy to clipboardsession?.data.paypalOrderId - Copy to clipboardpaypalOrderId is created by the plugin and put it in the Copy to clipboarddata. However, there are more information put in Copy to clipboarddata by the plugin, so you can log them into console and see how you can use it in your storefront.

License

MIT

© 2025 RSC https://rsoftcon.com/