Authorize.net
Authorize.net payment provider by VISA
Payment-Authorize.net-Medusa
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-medusa, you can unleash the full potential of Authorize.net's features, ensuring seamless and secure payments for your customers.
Features:
Authorize Payment : Authorize funds on a customer's card without immediate charge.
Capture Payment : Charge the previously authorized funds.
Auth-and-Capture : Authorize and capture funds in a single seamless step.
Cancel Payment : Cancel an authorization before the payment is captured.
Void Payment : Void a transaction before it has been settled.
Refund Payment : Process refunds for transactions that have already been settled.
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 Authorize.net payment interface on Medusa commerce stack
Installation
Use the package manager npm to install Payment-Authorizenet.
1npm install payment-authorizenet-medusa
Usage
Register for a Authorize.net account and generate the api keys In your environment file (.env) define the API Login ID and Transaction Key:
12API_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:
1234567891011121314151617181920module.exports = defineConfig({modules: [{resolve: "@medusajs/medusa/payment",options: {providers: [{resolve: "payment-authorizenet-medusa",id: "authorizenet",options: {api_login_id: process.env.AUTHORIZE_NET_API_LOGIN_ID,transaction_key: process.env.AUTHORIZE_NET_TRANSACTION_KEY,capture: <boolean>,enviornment: "sandbox", // <sandbox | production> based on enviornment Api's will point accordingly},},],}},]
Client side configuration
For the NextJs start, make the following changes
Step 1.
Install package to your next starter. This simplifies the process by importing all the scripts implicitly
1npm install authorizenet-react
or
1yarn add authorizenet-react
Step 2.
Add environment variables in the client (storefront) (.env) file:
Note : To generate the Client Key, log in to the Merchant Interface as an Administrator and navigate to Account > Settings > Security Settings > General Security Settings > Manage Public Client Key
12ANUTHORIZENET_PUBLIC_CLIENT_KEY= <your ANUTHORIZENET PUBLIC CLIENT KEY>ANUTHORIZENET_PUBLIC_API_LOGIN_ID= <your ANUTHORIZENET API LOGIN ID>
Step 3.
Add /src/lib/constants.tsx
1234567891011export const isAuthorizeNet = (providerId?: string) => {return providerId?.startsWith("pp_authorizenet")}// and the following to the list"pp_authorizenet_authorizenet":{title: "Credit Card", // or Authorize.net as per users perferenceicon: <CreditCard />,},
Step 4.
Add a AuthoirizenetCardConatiner in /src/modules/checkout/components/payment-conatiner/index.tsx
1234567891011121314151617181920import { AuthorizeNetProvider,Card} from "authorizenet-react"export const AuthorizeNetCardContainer = ({paymentProviderId,selectedPaymentOptionId,paymentInfoMap,disabled = false,setCardBrand,setError,setCardComplete,setOpaqueData,cardComplete}: Omit<PaymentContainerProps, "children"> & {setCardBrand: (brand: string) => voidsetError: (error: string | null) => voidsetCardComplete: (complete: boolean) => voidcardComplete:boolean}) => {return (<PaymentContainer
Step 5.
add AuthorizeNetCardContainer in the client /src/modules/checkout/components/payment/index.tsx
1234567891011121314151617181920import PaymentContainer, {StripeCardContainer,AuthorizeNetCardContainer} from "@modules/checkout/components/payment-container"<><RadioGroupvalue={selectedPaymentMethod}onChange={(value: string) => setPaymentMethod(value)}>{availablePaymentMethods.map((paymentMethod) => (<div key={paymentMethod.id}>{isStripeFunc(paymentMethod.id) ? (<StripeCardContainerpaymentProviderId={paymentMethod.id}selectedPaymentOptionId={selectedPaymentMethod}paymentInfoMap={paymentInfoMap}setCardBrand={setCardBrand}setError={setError}setCardComplete={setCardComplete}
Step 6.
modify initiatePaymentSession in the client /src/modules/checkout/components/payment/index.tsx
1234567891011121314151617181920import {createToken} from "authorizenet-react"const handleSubmit = async () => {setIsLoading(true)try {const response = await createToken();const shouldInputCard =isStripeFunc(selectedPaymentMethod) && !activeSessionconst checkActiveSession =activeSession?.provider_id === selectedPaymentMethodif (!checkActiveSession) {await initiatePaymentSession(cart, {provider_id: selectedPaymentMethod,data: {
Step 7.
Create a button for Autorize.net /src/modules/checkout/components/payment-button/authorizenet-payment-button.tsx
like below
1234567891011121314151617181920const AuthorizenetPaymentButton = ({ 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)})}const handlePayment = () => {setSubmitting(true)onPaymentCompleted()}
Step 8.
Add into the payment element /src/modules/checkout/components/payment-button/index.tsx
then
1234567case isAuthorizeNet(paymentSession?.provider_id):return(<AuthorizenetPaymentButtonnotReady={notReady}data-testid={dataTestId}/>)
watch out
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.
For more info on medusa modules. Please refer https://docs.medusajs.com/learn
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
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.