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.
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
Use the package manager npm to install Payment-Authorizenet.
npm install payment-authorizenet-medusa
Register for a Authorize.net account and generate the api keys In your environment file (.env) define the API Login ID and Transaction Key:
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: "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
},
},
],
}
},
]
})
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
npm install authorizenet-react or
yarn 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
ANUTHORIZENET_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
export 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 perference
icon: <CreditCard />,
},
Step 4.
Add a AuthoirizenetCardConatiner in /src/modules/checkout/components/payment-conatiner/index.tsx
import { AuthorizeNetProvider,Card} from "authorizenet-react"
export const AuthorizeNetCardContainer = ({
paymentProviderId,
selectedPaymentOptionId,
paymentInfoMap,
disabled = false,
setCardBrand,
setError,
setCardComplete,
setOpaqueData,
cardComplete
}: Omit<PaymentContainerProps, "children"> & {
setCardBrand: (brand: string) => void
setError: (error: string | null) => void
setCardComplete: (complete: boolean) => void
cardComplete:boolean
}) => {
return (
<PaymentContainer
paymentProviderId={paymentProviderId}
selectedPaymentOptionId={selectedPaymentOptionId}
paymentInfoMap={paymentInfoMap}
disabled={disabled}
>
{selectedPaymentOptionId === paymentProviderId &&
((isAuthorizeNet(selectedPaymentOptionId)) ? (
<AuthorizeNetProvider
apiLoginId={process.env.NEXT_PUBLIC_API_LOGIN_ID}
clientKey={process.env.NEXT_PUBLIC_CLIENT_KEY}>
<div className="my-4 transition-all duration-150 ease-in-out">
<Text className="txt-medium-plus text-ui-fg-base mb-1">
Enter your card details:
</Text>
<Card
options={{
style: {
base: {
fontSize: '16px',
color: '#424770',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#9e2146'
}
}
}}
onChange={(e:any)=>{
setCardComplete(e.complete)
setError(e.error?.message || null)
}}
/>
</div>
</AuthorizeNetProvider>
) : (
<SkeletonCardDetails />
))}
</PaymentContainer>
)
}
Step 5.
add AuthorizeNetCardContainer in the client /src/modules/checkout/components/payment/index.tsx
import PaymentContainer, {
StripeCardContainer,
AuthorizeNetCardContainer
} from "@modules/checkout/components/payment-container"
<>
<RadioGroup
value={selectedPaymentMethod}
onChange={(value: string) => setPaymentMethod(value)}
>
{availablePaymentMethods.map((paymentMethod) => (
<div key={paymentMethod.id}>
{isStripeFunc(paymentMethod.id) ? (
<StripeCardContainer
paymentProviderId={paymentMethod.id}
selectedPaymentOptionId={selectedPaymentMethod}
paymentInfoMap={paymentInfoMap}
setCardBrand={setCardBrand}
setError={setError}
setCardComplete={setCardComplete}
/>
) :
(isAuthorizeNetFunc(paymentMethod.id) ? (
<AuthorizeNetCardContainer
paymentProviderId={paymentMethod.id}
selectedPaymentOptionId={selectedPaymentMethod}
paymentInfoMap={paymentInfoMap}
setCardBrand={setCardBrand}
setError={setError}
setCardComplete={setCardComplete}
setOpaqueData={setOpaqueData}
cardComplete={cardComplete}
/>
): (
<PaymentContainer
paymentInfoMap={paymentInfoMap}
paymentProviderId={paymentMethod.id}
selectedPaymentOptionId={selectedPaymentMethod}
/>
))}
</div>
))}
</RadioGroup>
</>
....
Step 6.
modify initiatePaymentSession in the client /src/modules/checkout/components/payment/index.tsx
import {createToken} from "authorizenet-react"
const handleSubmit = async () => {
setIsLoading(true)
try {
const response = await createToken();
const shouldInputCard =
isStripeFunc(selectedPaymentMethod) && !activeSession
const checkActiveSession =
activeSession?.provider_id === selectedPaymentMethod
if (!checkActiveSession) {
await initiatePaymentSession(cart, {
provider_id: selectedPaymentMethod,
data: {
...response,
cart // provides cart data to plugin
},
})
}
if (!shouldInputCard) {
return router.push(
pathname + "?" + createQueryString("step", "review"),
{
scroll: false,
}
)
}
} catch (err: any) {
setError(err.message)
} finally {
setIsLoading(false)
}
}
....
Step 7.
Create a button for Autorize.net /src/modules/checkout/components/payment-button/authorizenet-payment-button.tsx
like below
const 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()
}
return (
<>
<Button
disabled={notReady}
isLoading={submitting}
onClick={handlePayment}
size="large"
data-testid="submit-order-button"
>
Place order
</Button>
<ErrorMessage
error={errorMessage}
data-testid="manual-payment-error-message"
/>
</>
)
}
Step 8.
Add into the payment element /src/modules/checkout/components/payment-button/index.tsx
then
case isAuthorizeNet(paymentSession?.provider_id):
return(
<AuthorizenetPaymentButton
notReady={notReady}
data-testid={dataTestId}
/>
)
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
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.
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.