Overview
Icon for Authorize.net

Authorize.net

Authorize.net payment provider by VISA

Payment-Authorizenet

Support the Payment-Authorizenet Provider - Elevate Our Medusa Community!

Dear Developers and E-commerce Enthusiasts,

Are you ready to revolutionize the world of online stores with MedusaJS? We have an exciting opportunity that will make payment processing a breeze for our beloved Medusa platform! Introducing the Payment-Authorizenet provider, a community-driven project that brings the immensely popular Authorize.net payment gateway to our MedusaJS commerce stack.

What's in it for You:

🚀 Streamline Payment Processing: With Payment-Authorizenet, you can unleash the full potential of Authorizenet's features, ensuring seamless and secure payments for your customers.

🌐 Global Reach: Engage with customers worldwide, as Authorizenet supports various currencies and payment methods, catering to a diverse audience.

🎉 Elevate Your Medusa Store: By sponsoring this provider, you empower the entire Medusa community, driving innovation and success across the platform.

Installation Made Simple

No hassle, no fuss! Install Payment-Authorizenet effortlessly with npm:

Authorize.net an immensely popular payment gateway with a host of features. This provider enables the Authorizenet payment interface on medusa commerce stack

Installation

Use the package manager npm to install Payment-Authorizenet.

npm install @visa/payment-anet

Usage

Register for a Authorizenet account and generate the api keys In your environment file (.env) you need to define

API_LOGIN_ID=<your AUTHORIZE_NET_API_LOGIN_ID>
TRANSACTION_KEY=<your AUTHORIZE_NET_TRANSACTION_KEY>

You need to add the provider into your medusa-config.ts as shown below

module.exports = defineConfig({
modules: [
  ...
    {      resolve: "@medusajs/medusa/payment",
      options: {
        providers: [
          ...
          {
            resolve: "@visa/payment-anet",
            id: "authorizenet",
            options: {
              api_login_id: process.env.AUTHORIZE_NET_API_LOGIN_ID,
              transaction_key: process.env.AUTHORIZE_NET_TRANSACTION_KEY,
              capture: <boolean>,
            },
          },
          ....
        ],
     } },
  ...]

Client side configuration

For the NextJs start you need to make the following changes

  1. Install package to your next starter. This just makes it easier, importing all the scripts implicitly
yarn add react-authorize-net
  1. Create a button for Autorizenet /src/modules/checkout/components/payment-button/authorizenet-payment-button.tsx

like below

import { Button } from "@medusajs/ui"
import Spinner from "@modules/common/icons/spinner"
import React, { useCallback, useEffect, useState } from "react"
import { HttpTypes } from "@medusajs/types"
import { cancelOrder, placeOrder, waitForPaymentCompletion } from "@lib/data/cart"




const AnetPaymentButton = ({ notReady }: { notReady: boolean }) => {
  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)
      })
  }

step 3.add into the payment element /src/modules/checkout/components/payment-button/index.tsx

then

 case isAuthorizeNet(paymentSession?.provider_id):
        return(
          <AnetPaymentButton
            notReady={notReady}
            data-testid={dataTestId}
          />
        )

Step 4.

nextjs-starter-medusa/src/lib/constants.tsx add

export const isAuthorizeNet = (providerId?: string) => {
  return providerId?.startsWith("pp_authorizenet")
}




// and the following to the list
export const paymentInfoMap: Record<
  string,
  { title: string; icon: React.JSX.Element }
> = {...
  "pp_authorizenet_authorizenet":{
    title: "Authorizenet",
    icon: <CreditCard />,
  },
  ...}

Step 4. modify initiatePaymentSession in the client storefront/src/modules/checkout/components/payment/index.tsx



.....
 const handleSubmit = async () => {
    setIsLoading(true)
    try {


      const response = await createToken();
      console.log(response);
      
      const shouldInputCard =
        isStripeFunc(selectedPaymentMethod) && !activeSession


      const checkActiveSession =
        activeSession?.provider_id === selectedPaymentMethod


      if (!checkActiveSession) {
        await initiatePaymentSession(cart, {
          provider_id: selectedPaymentMethod,
          data: {
            ...response,

Step 5. Add a Authoirizenet Card Conatiner in storefront/src/modules/checkout/components/payment-conatiner/index.tsx

import { Radio as RadioGroupOption } from "@headlessui/react"
import { Text, clx } from "@medusajs/ui"
import React, { useContext, useMemo, type JSX } from "react"


import Radio from "@modules/common/components/radio"


import { isManual ,isAuthorizeNet} from "@lib/constants"
import SkeletonCardDetails from "@modules/skeletons/components/skeleton-card-details"
import { CardElement } from "@stripe/react-stripe-js"
import { StripeCardElementOptions } from "@stripe/stripe-js"
import PaymentTest from "../payment-test"
import { StripeContext } from "../payment-wrapper/stripe-wrapper"
import { AuthorizeNetProvider,Card} from "react-authorize-net"


type PaymentContainerProps = {
  paymentProviderId: string
  selectedPaymentOptionId: string | null
  disabled?: boolean
  paymentInfoMap: Record<string, { title: string; icon: JSX.Element }>
  children?: React.ReactNode,

Step 6. Add environment variables in the client

NEXT_PUBLIC_CLIENT_KEY: NEXT_PUBLIC_API_LOGIN_ID:

watch out

Step 6. Caveat the default starter template has an option which says use the same shipping and billing address please ensure you deselect this and enter the phone number manually in the billing section.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Untested features

These features exists, but without implementing the client it isn't possible to tests these outright

  1. Capture Payment
  2. Refund

Disclaimer

The code was tested on limited number of usage scenarios. There maybe unforseen bugs, please raise the issues as they come, or create pull requests if you'd like to submit fixes.

You may also like

Browse all integrations

Build your own

Develop your own custom integraiton

Build your own integration with our API to speed up your processes. Make your integration available via npm for it to be shared in our Library with the broader Medusa community.

payment iconcart icongift icon
Get started
gift card interface

Ready to build your custom commerce setup?

Browse StartersStart Building