Authorize.net app

This app integrates Saleor with the Authorize.net payment gateway.

Required Saleor version: 3.13

Note

This is an example implementation. Only community support is available.

Development

Prerequisites

Software

• Node.js 18

• pnpm 8.14.1

Access

An Authorize.net Sandbox account is required to run the app. You can create one here.

Installation

1. Copy .env.example to .env and fill in the required values.
2. pnpm install

Usage

Important

The app needs to be tunneled.

To run the app on port 3000, use the following command:

pnpm dev

Each time you modify a .graphql file, you have to run:

pnpm generate

to regenerate the GraphQL types.

Running storefront example

This app comes with a simple storefront example. To run it, follow these steps:

1. Go to the example directory.
2. Copy .env.example to .env and fill in the required values.
3. pnpm install
4. pnpm dev

Each time you modify a .graphql file, you have to run:

pnpm generate

Vendor software

The app uses the official Authorize.net Node SDK.

Credit cards payments are handled through Accept Hosted - Authorize.net hosted payment form.

Overview

Features

• ✅ Authorize transactions
• ❌ Charge transactions
• ✅ Refund transactions
• ✅ Cancel transactions
• ✅ Initialize payment gateway
• ❌ Saved payment methods
• ❌ Storing config in metadata
• ✅ Two way webhook synchronization (Saleor → Service → Saleor)
• ✅ Front-end example (in this repository, see: example)
• Saving credit cards through Authorize.net customer payment profiles

Payment methods

• Credit card (Accept Hosted)
• PayPal (in progress)
• Apple Pay (in progress)

Payment flow

1. Execute checkoutCreate mutation from the front-end.
2. Execute paymentGatewayInitialize mutation from the front-end. paymentGatewayInitialize app handler (payment-gateway-initialize-session.ts) will go through all the implemented payment methods and return the data needed to render their UI. Currently, this webhook is redundant, as it does not return any meaningful data. You could hardcode the list of payment methods in the front-end. It may change once Apple Pay and PayPal are implemented.
3. When Accept Hosted is selected:
   1. The front-end will execute transactionInitialize mutation. The app will return the data needed to render the Accept Hosted payment form. It couldn't be done during the paymentGatewayInitialize because Saleor transaction must exist before the payment form is rendered.
   2. Accept Hosted will communicate with Authorize.net API and create a corresponding transaction.
   3. When a callback is received from Authorize.net, the front-end will execute transactionProcess mutation. The app will try to confirm the transaction on the transaction-process-session webhook. If the Authorize transaction was successful, the Saleor transaction status will change to AUTHORIZATION_SUCCESS.
4. When the status of Authorize transaction change in Authorize.net, the app will synchronize the change with Saleor through webhooks. There is no flow for the CHARGE event, as the app only authorizes the transactions. The CHARGE event is expected to happen outside of the app.

Assumptions

• The app only authorizes the transactions. The CHARGE event is expected to happen outside of the app. The app will synchronize the CHARGE event with Saleor through webhooks.
• The Saleor transaction id is stored in Authorize.net transaction order.description. Ideally, we would store it in refId, but that field is max. 20 characters long and the Saleor transaction id is longer than that. When the app synchronizes webhook calls from an external system, make sure this system stores Saleor transaction id in the order.description as well. Otherwise, the transaction won't be mapped to Saleor.

Limitations

• The app does not support multiple configurations. One configuration will be used to handle the transactions across all the channels.

Configuration

The app has no configuration UI and is configured through environment variables. The required variables are described in the env.mjs file.