How to Integrate Retool with Authorize.Net

Navigate to the Resources tab in Retool and click Add Resource. Select REST API from the resource type list. Name the resource 'Authorize.Net API'. In the Base URL field, enter https://apitest.authorize.net/xml/v1/request.api for the sandbox environment or https://api2.authorize.net/xml/v1/request.api for production. Authorize.Net's entire JSON API goes through this single endpoint — all operations are distinguished by the JSON body content, not by different URL paths. This means every Authorize.Net query in Retool will use POST to this same URL with different body structures. Authorize.Net's JSON API does not use HTTP Authorization headers. Instead, authentication credentials are included in every request body. For this reason, do not configure any authentication in the Retool resource's Authentication section — leave it set to None. The credentials will be included in each query's body. Add a default header: key = Content-Type, value = application/json. This ensures Authorize.Net's API parses your requests correctly. Store your API Login ID and Transaction Key as Secret configuration variables in Retool before writing queries: Settings → Configuration Variables → create AUTHORIZENET_API_LOGIN_ID and AUTHORIZENET_TRANSACTION_KEY, mark both as Secret. This allows you to reference them securely in query bodies without exposing the values. Click Save Changes. You now have separate configurations for sandbox and production by maintaining two resources with different base URLs.

Create your first Authorize.Net query to retrieve transactions. In your Retool app, open the Code panel and add a new query. Name it getTransactions and select the Authorize.Net API resource. Set Method to POST. Leave Path empty — all Authorize.Net JSON API requests go to the root URL configured in the resource. Set Body Type to JSON. Enter the following JSON body structure for the getTransactionListRequest, which retrieves transactions for a specific batch or date range: This query type uses Authorize.Net's batch-based transaction retrieval. You first need to get settled batches (getSettledBatchListRequest), then retrieve transactions within each batch. Alternatively, use the unsettledTransactionList endpoint for pending transactions. For a date-range-based search, use getTransactionListRequest with batchId from the batch list. For searching by specific criteria (customer name, card number last 4, amount), use searchTransactionsRequest which accepts filter parameters. Create a second query named searchTransactions that uses the searchTransactionsRequest body type with filter fields connected to Text Input components in your app. This is the more useful query for the operations team since it searches across all settled and unsettled transactions without needing to know specific batch IDs. Bind a Table component to the search results using a JavaScript transformer that extracts the transaction array from the nested response structure.

1// JSON body for searchTransactionsRequest
2{
3  "searchTransactionsRequest": {
4    "merchantAuthentication": {
5      "name": "{{ retoolContext.configVars.AUTHORIZENET_API_LOGIN_ID }}",
6      "transactionKey": "{{ retoolContext.configVars.AUTHORIZENET_TRANSACTION_KEY }}"
7    },
8    "refId": "retool_{{ Date.now() }}",
9    "sorting": {
10      "orderBy": "submitTimeUTC",
11      "orderDescending": true
12    },
13    "paging": {
14      "limit": 50,
15      "offset": "{{ (pagination.page - 1) * 50 + 1 || 1 }}"
16    },
17    "searchQuery": {
18      "fromDate": "{{ datePicker_from.value }}T00:00:00Z",
19      "toDate": "{{ datePicker_to.value }}T23:59:59Z"
20    }
21  }
22}

Authorize.Net's JSON API responses have a nested structure with multiple wrapper objects. The transaction data is typically found at response.searchTransactionsResponse.transactions.transaction (for search) or response.getTransactionListResponse.transactions.transaction (for batch list). JavaScript transformers are essential for extracting and formatting this data. Create a JavaScript transformer attached to the searchTransactions query by clicking the Advanced tab in the query editor and enabling Transform Results. Add the transformer code to extract and flatten the transaction data. For individual transaction details, create a separate query named getTransactionDetails. Set Method to POST, use the getTransactionDetailsRequest body type with the transaction ID from the selected table row: {{ table_transactions.selectedRow.transId }}. The detail response includes the full card data (masked), billing address, line items, and processing metadata. Authorize.Net also returns a messages object with result codes and descriptions. Always include message parsing in your transformer to surface error conditions clearly. The resultCode field is either Ok or Error — filter results where resultCode is not Ok and display them in an error banner component rather than silently failing.

1// JavaScript transformer — format Authorize.Net transaction search results
2const response = data;
3const resultCode = response?.messages?.resultCode;
4if (resultCode !== 'Ok') {
5  const errorMsg = response?.messages?.message?.[0]?.text || 'Unknown error';
6  throw new Error(`Authorize.Net API Error: ${errorMsg}`);
7}
8
9const transactions = response?.transactions?.transaction || [];
10const txArray = Array.isArray(transactions) ? transactions : [transactions];
11
12return txArray.map(tx => ({
13  transId: tx.transId,
14  submit_date: tx.submitTimeLocal
15    ? new Date(tx.submitTimeLocal).toLocaleDateString('en-US', {
16        year: 'numeric', month: 'short', day: 'numeric',
17        hour: '2-digit', minute: '2-digit'
18      })
19    : 'N/A',
20  amount: tx.settleAmount
21    ? `$${parseFloat(tx.settleAmount).toFixed(2)}`
22    : tx.authAmount
23      ? `$${parseFloat(tx.authAmount).toFixed(2)}`
24      : 'N/A',
25  status: tx.transactionStatus || 'N/A',
26  card_type: tx.payment?.creditCard?.cardType || 'N/A',
27  card_last4: tx.payment?.creditCard?.cardNumber?.slice(-4) || 'N/A',
28  customer_name: `${tx.billTo?.firstName || ''} ${tx.billTo?.lastName || ''}`.trim() || 'N/A',
29  order_id: tx.order?.invoiceNumber || 'N/A',
30  auth_code: tx.authCode || 'N/A'
31}));

Add write operations to allow your team to process refunds and voids directly from the Retool panel. Authorize.Net distinguishes between two reversal types: - Void: cancels a transaction before it settles (same-day transactions still in auth status). Use transactionType: voidTransaction. - Refund: returns funds for a settled transaction (transactions from previous days). Use transactionType: refundTransaction. Create a query named voidTransaction. Set Method to POST. In the JSON body, use createTransactionRequest with transactionType set to voidTransaction and the refTransId (the original transaction ID) from the selected table row. Create a separate query named refundTransaction. Set Method to POST. The refund body is more complex — it requires the original transaction amount, card number (last 4 digits), and expiration date in addition to the transaction ID. Pull these from the getTransactionDetails query data for the selected transaction. In your Retool app, add separate Void and Refund buttons. Configure each with a Confirm action to show a modal before execution (Transaction ID: {{ table_transactions.selectedRow.transId }}, Amount: {{ table_transactions.selectedRow.amount }}). On success, show a notification and trigger the search query to refresh the transaction list. Add validation in the button event handlers: only enable Void for transactions with status 'authorizedPendingCapture' and only enable Refund for transactions with status 'settledSuccessfully'. Disable buttons with a tooltip explanation when the status doesn't support that action.

1// JSON body for createTransactionRequest — refundTransaction type
2{
3  "createTransactionRequest": {
4    "merchantAuthentication": {
5      "name": "{{ retoolContext.configVars.AUTHORIZENET_API_LOGIN_ID }}",
6      "transactionKey": "{{ retoolContext.configVars.AUTHORIZENET_TRANSACTION_KEY }}"
7    },
8    "refId": "refund_{{ Date.now() }}",
9    "transactionRequest": {
10      "transactionType": "refundTransaction",
11      "amount": "{{ table_transactions.selectedRow.raw_amount }}",
12      "payment": {
13        "creditCard": {
14          "cardNumber": "{{ getTransactionDetails.data.cardLast4 }}",
15          "expirationDate": "XXXX"
16        }
17      },
18      "refTransId": "{{ table_transactions.selectedRow.transId }}"
19    }
20  }
21}

Authorize.Net's Customer Information Manager (CIM) stores tokenized payment profiles linked to customer IDs. Create queries to look up and manage these profiles for customer service scenarios. Create a query named getCustomerProfile. Set Method to POST. The body uses getCustomerProfileRequest with either a customerProfileId (Authorize.Net's internal ID) or the merchantCustomerId (your own customer ID if you stored it when creating the profile). Connect the customerProfileId input to a Text Input component named textInput_profileId. The getCustomerProfile response includes an array of paymentProfiles, each containing the masked card number, expiration date, and billing address. Create a transformer that flattens this structure into a list of payment methods with their associated profile IDs. For deleting an individual payment method, create deleteCustomerPaymentProfile with body type deleteCustomerPaymentProfileRequest, passing both the customerProfileId and the paymentProfileId of the method to delete. Add a Delete button to the payment methods Table row with a confirmation modal. For creating new customer profiles (when onboarding a new customer via your internal tool), create a createCustomerProfile query with the full CIM profile creation body including the customer's email, shipping address, and payment method data. For RapidDev integrations that combine Authorize.Net CIM data with your customer database, a joined view showing both Authorize.Net payment profile status and your internal CRM data side by side in the same Retool app gives support teams everything they need in one place.

1// JavaScript transformer — extract payment profiles from getCustomerProfileResponse
2const response = data;
3const profile = response?.profile || {};
4const paymentProfiles = profile.paymentProfiles || [];
5const profileArray = Array.isArray(paymentProfiles) ? paymentProfiles : [paymentProfiles];
6
7return profileArray.map(pp => ({
8  payment_profile_id: pp.customerPaymentProfileId,
9  card_type: pp.payment?.creditCard?.cardType || 'N/A',
10  card_number: pp.payment?.creditCard?.cardNumber || 'N/A',
11  expiration: pp.payment?.creditCard?.expirationDate || 'N/A',
12  billing_name: `${pp.billTo?.firstName || ''} ${pp.billTo?.lastName || ''}`.trim(),
13  billing_email: pp.billTo?.email || 'N/A',
14  billing_address: [
15    pp.billTo?.address,
16    pp.billTo?.city,
17    pp.billTo?.state,
18    pp.billTo?.zip
19  ].filter(Boolean).join(', '),
20  default_flag: pp.defaultPaymentProfile ? 'Default' : ''
21}));