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 package.json:

Warning

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

and execute install, e.g. yarn install.

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

...
  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: {
              oAuthClientId: <oauth-client-id>,
              oAuthClientSecret: <oauth-client-secret>,
              environment: <env-definition>,
            },
          }
        ]
      },
    },
...

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:

• oAuthClientId - required parameter which you can find in your Paypal Developer Dashboard
• oAuthClientSecret - required parameter which you can find in your Paypal Developer Dashboard
• environment - set to sandbox or production. You can use it to test with your sandbox environment.

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

Storefront

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

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)
      })
      .finally(() => {
        setSubmitting(false)
      })
  }

  const session = cart.payment_collection?.payment_sessions?.find(
    (s) => s.status === "pending"
  )

  const handlePayment = async (
    _data: OnApproveData,
    actions: OnApproveActions
  ) => {
    actions?.order
      ?.authorize()
      .then((authorization) => {
        if (authorization.status !== "COMPLETED") {
          setErrorMessage(`An error occurred, status: ${authorization.status}`)
          return
        }
        onPaymentCompleted()
      })
      .catch((error) => {
        setErrorMessage(`An unknown error occurred, please try again.`)
        setSubmitting(false)
      })
  }

  const [{ isPending, isResolved }] = usePayPalScriptReducer()

  if (isPending) {
    return <Spinner />
  }

  if (isResolved) {
    return (
      <>
        <PayPalButtons
          style={{ layout: "horizontal" }}
          createOrder={async () => {
            return session?.data.paypalOrderId as string;
          }}
          onApprove={handlePayment}
          disabled={notReady || submitting || isPending}
          data-testid={dataTestId}
        />
        <ErrorMessage
          error={errorMessage}
          data-testid="paypal-payment-error-message"
        />
      </>
    )
  }
}
...

// Please remember that above PaypalButton needs to be a child of PaypalScriptProvider

return (<PayPalScriptProvider
    options={{
      "client-id": process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID || "test",
      currency: cart?.currency_code.toUpperCase(),
      intent: "authorize",
      components: "buttons",
    }}
  >
    {children}
  </PayPalScriptProvider>
)

client-id - you can retrieve it from your Paypal Developer Dashboard.

Notes

1. Intent has been chosen to authorize in PayPalScriptProvider - it means that firstly payment is authorized, then it can be capture via Admin UI. Plugin (not yet) support automatic capturing.
2. usePayPalScriptReducer requires PayPalScriptProvider 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 PayPalScriptProvider as high as possible in components' tree.
3. session?.data.paypalOrderId - paypalOrderId is created by the plugin and put it in the data. However, there are more information put in data 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/