How to Integrate Retool with 2Checkout (Verifone)

Navigate to the Resources tab in Retool (accessible from the left sidebar on the home page, or via the top navigation bar). Click the blue Add Resource button in the upper right corner. In the resource type selector, scroll to the API section or type 'REST' in the search field. Click REST API to open the configuration form. In the resource configuration form, fill in the following fields: - Name: Give the resource a clear name such as '2Checkout API' or '2Checkout Production' to distinguish it from test and live configurations. - Base URL: Enter the 2Checkout API base URL. For the Inline Checkout and Order API, this is https://api.2checkout.com/rest/6.0 for v6 of their REST API. - Authentication: Set authentication to None — 2Checkout uses HMAC signatures in individual request headers rather than a global bearer token. You will generate these per-query in a JavaScript transformer. Under the Headers section, add a default header: - Key: Content-Type - Value: application/json Click Save to create the resource. It appears in your Resources list without a connection status badge since REST API resources do not test connectivity on save. To store your merchant code and secret key securely, navigate to Settings → Configuration Variables, click Add Variable, name it TWOCHECKOUT_MERCHANT_CODE and TWOCHECKOUT_SECRET_KEY, mark them as secrets, and save. These will be referenced in query headers using {{ retoolContext.configVars.TWOCHECKOUT_MERCHANT_CODE }} syntax.

2Checkout's API uses HMAC-SHA256 signatures to authenticate requests. The signature is computed from your merchant code, a date string, and your secret key, then sent as an Authorization header in the format: 'code='MERCHANT_CODE' date='DATE' hash='HASH''. In your Retool app, create a JavaScript query (click + New in the query panel, select Run JavaScript Script as the query type rather than selecting the 2Checkout resource). This query will compute the auth header and make the signed API request. In the JavaScript editor, write the signing logic: The date is a Unix timestamp in seconds as a string. The HMAC is computed as HMAC-SHA256(merchantCode + date, secretKey) and then hex-encoded. Retool provides the CryptoJS library, so you can use CryptoJS.HmacSHA256() directly without any imports. The resulting hash is converted to a hex string with .toString(CryptoJS.enc.Hex). Once the header is computed, use the built-in fetch() equivalent or trigger another query that uses this header. A cleaner pattern is to use a JavaScript query that calls Retool's query system: use the 2Checkout resource with the Authorization header set to a dynamic expression that references a global variable or another query's result. Set a Retool state variable (click + State in the left panel) named authHeader, and have the JavaScript query write the computed header to that state variable using state.setValue('authHeader', headerValue). Then reference {{ authHeader.value }} in your 2Checkout resource queries' Authorization header field.

1// JavaScript query: compute 2Checkout HMAC Authorization header
2// Run this query on page load, store result in a state variable
3const merchantCode = retoolContext.configVars.TWOCHECKOUT_MERCHANT_CODE;
4const secretKey = retoolContext.configVars.TWOCHECKOUT_SECRET_KEY;
5
6const date = Math.floor(Date.now() / 1000).toString();
7const hmacInput = merchantCode + date;
8const hash = CryptoJS.HmacSHA256(hmacInput, secretKey).toString(CryptoJS.enc.Hex);
9
10const authHeader = `code="${merchantCode}" date="${date}" hash="${hash}"`;
11
12// Store in a state variable named 'authHeader'
13await authHeader_state.setValue(authHeader);
14
15return { authHeader, date, hash };

With the resource and authentication set up, create your first data query. In the query panel, click + New and select your 2Checkout API resource. Set the HTTP method to GET and the path to /orders. This endpoint returns a paginated list of orders. In the Headers section of the query, add the Authorization header: - Key: Authorization - Value: {{ authHeader_state.value }} In the URL Parameters section, add pagination and filter parameters: - Limit: {{ pagination.pageSize || 50 }} - Offset: {{ pagination.pageOffset || 0 }} - To filter by date, add StartDate and EndDate parameters referencing a DateRange picker component in your app: {{ dateRange.start }} and {{ dateRange.end }} - To search by order status, add Status: {{ statusSelect.value || '' }} Enable the query to Run this query automatically when inputs change and set it to trigger On page load so the table loads data immediately. Drag a Table component from the component panel onto the canvas. In the Table's Inspector, set the Data source to {{ ordersQuery.data.Items || [] }}. Map columns to the relevant fields in the 2Checkout response: OrderNo, ExternalRef, Email, Total, Currency, Status, OrderDate. Add a column override for Total to format it as a currency using the column type 'Number' with a currency prefix. Add a DateRange Picker and a Select component for status filter above the Table. Set the Select component's options to the 2Checkout order statuses: COMPLETE, AUTHRECEIVED, PENDING, REFUND, INVALID. When users change these filters, the query re-runs automatically and the Table updates.

1// JavaScript transformer to reshape 2Checkout orders response
2// Add as a query transformer on the orders GET query
3const items = data.Items || [];
4return items.map(order => ({
5  order_no: order.OrderNo,
6  external_ref: order.ExternalRef || '',
7  customer_email: order.BillingDetails?.Email || '',
8  customer_name: `${order.BillingDetails?.FirstName || ''} ${order.BillingDetails?.LastName || ''}`.trim(),
9  total: parseFloat(order.GrossPrice || 0).toFixed(2),
10  currency: order.Currency,
11  status: order.Status,
12  order_date: new Date(order.OrderDate * 1000).toLocaleDateString(),
13  country: order.BillingDetails?.CountryCode || ''
14}));

Add a refund capability to your order management panel. When a support agent selects an order in the Table and needs to issue a refund, they should be able to do so directly from Retool without navigating to the 2Checkout admin interface. Drag a Button component onto the canvas and label it 'Issue Refund'. In the Button's Inspector, open the Interaction section and enable Confirm before running. Set the confirmation title to 'Confirm Refund' and the message to 'Issue a full refund for Order #{{ ordersTable.selectedRow.order_no }} ({{ ordersTable.selectedRow.currency }} {{ ordersTable.selectedRow.total }})? This action cannot be undone.' This gives agents a clear preview of what they are about to do. Create a new query using your 2Checkout API resource. Set the method to POST and the path to /orders/{{ ordersTable.selectedRow.order_no }}/refund. In the Body section, select JSON and enter the refund request payload: include the reason field (reference a TextInput component where the agent enters the refund reason) and the amount (for full refunds, pass the total from the selected row). Remember to include the Authorization header in this query as well, pointing to {{ authHeader_state.value }}. Since HMAC timestamps can expire, add an event handler on the Refund button click that first runs the generateAuthHeader query (to refresh the HMAC), then on success runs the refund query. In the refund query's On success handler, add a 'Show notification' action with message 'Refund issued successfully for Order #{{ ordersTable.selectedRow.order_no }}' and trigger the orders list query to refresh the table data. For error handling, in the query's On failure handler, add a 'Show notification' action with type 'error' and the message '{{ refundQuery.error.message }}' so agents see actionable feedback when a refund fails (for example, if the order is already refunded or the refund window has closed).

1{
2  "amount": "{{ ordersTable.selectedRow.total }}",
3  "currency": "{{ ordersTable.selectedRow.currency }}",
4  "comment": "{{ refundReasonInput.value || 'Customer request' }}",
5  "reason": "OTHER"
6}

2Checkout's subscription API lets you view and manage recurring billing for your SaaS products. Create a second query in your app targeting the subscriptions endpoint to give your team visibility into subscription health alongside order data. Create a new query using your 2Checkout API resource. Set the method to GET and the path to /subscriptions. Add URL parameters for filtering: CustomerEmail (reference a search TextInput component), Status (ACTIVE, EXPIRED, CANCELED, TRIAL), and pagination parameters Limit and Offset. Add a second Tab component to your Retool app — one tab for Orders, one for Subscriptions. Inside the Subscriptions tab, drag a Table component and bind its data to {{ subscriptionsQuery.data.Items || [] }}. Add a JavaScript transformer on the query to reshape the data: Map the subscription fields to human-readable column names: subscription reference, customer email, plan name, billing cycle, next renewal date (formatted from Unix timestamp), payment status, and number of renewal attempts. Add a calculated field that flags subscriptions with failed renewal attempts (NextRenewalAttempts > 0) so agents can prioritize outreach. Add event handlers so that clicking a subscription row loads the related orders for that customer by triggering the orders query with a filter on the customer's email address. This creates a drill-down experience: the agent can see all orders associated with a subscription in the adjacent Table, providing full billing history context. For complex subscription management workflows involving multiple APIs and approval chains, RapidDev's team can help design and build the Retool solution to fit your specific billing operations requirements.

1// JavaScript transformer to reshape 2Checkout subscriptions response
2const items = data.Items || [];
3return items.map(sub => ({
4  reference: sub.SubscriptionReference,
5  customer_email: sub.CustomerEmail || '',
6  plan_name: sub.ExternalProductCode || sub.ProductId,
7  billing_cycle: `${sub.BillingCycles} ${sub.BillingCycleUnit}`,
8  next_renewal: sub.NextRenewalDate
9    ? new Date(sub.NextRenewalDate * 1000).toLocaleDateString()
10    : 'N/A',
11  status: sub.Status,
12  failed_attempts: sub.NextRenewalAttempts || 0,
13  at_risk: (sub.NextRenewalAttempts || 0) > 0
14}));