A-Tech Payment SDK

@a-tech.jo/atech_payment is the only SDK you should use to integrate with A-Tech Payment. It is a plug-and-play React package: it creates the order through the A-Tech payment backend, renders the payment provider's checkout, and lets you verify the result.

Your payment provider secrets never live in your front end. You save your gateway credentials once in the A-Tech dashboard and the SDK talks to the A-Tech backend for you.

Requirements

• A Next.js (React 15.0.1 or later) application.
• An approved A-Tech merchant account with an entity and completed KYC.
• Gateway credentials saved in the dashboard under Credentials.

Install the package from npm:

npm install @a-tech.jo/atech_payment

The package ships untranspiled source, so tell Next.js to compile it. Add it to transpilePackages in next.config.js:

// next.config.js
const nextConfig = {
  transpilePackages: ["@a-tech.jo/atech_payment"],
};

module.exports = nextConfig;

The SDK picks the A-Tech backend from a single environment variable. Add it to your .env file:

# .env
NEXT_PUBLIC_NODE_ENV="production"   # production | staging | development

Render the PymentOrder component with your order. The SDK creates the checkout, loads the HyperPay widget and shows the card form.

"use client";
import { PymentOrder } from "@a-tech.jo/atech_payment";

export default function CheckoutPage() {
  const order = {
    entityId: "<YOUR_GATEWAY_ENTITY_ID>",
    amount: "10.00",
    currency: "USD",
    paymentType: "DB", // DB = immediate purchase
  };

  return (
    <PymentOrder
      provider="hyperpay"
      order={order}
      redirectUrl="https://your-site.com/checkout/result"
    />
  );
}

When the customer pays, HyperPay sends them to your redirectUrl with the id and resourcePath query parameters.

On your result page, pass those two parameters to verifyCheckout to get the payment status from A-Tech. Always verify on the result page; never trust the redirect alone.

"use client";
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { verifyCheckout } from "@a-tech.jo/atech_payment";

export default function ResultPage() {
  const params = useSearchParams();
  const [result, setResult] = useState(null);

  useEffect(() => {
    const id = params.get("id");
    const resourcePath = params.get("resourcePath");
    if (id && resourcePath) {
      verifyCheckout("hyperpay", id, resourcePath).then(setResult);
    }
  }, [params]);

  return <pre>{JSON.stringify(result, null, 2)}</pre>;
}

verifyCheckout returns the provider's result. Check its result code against the HyperPay result codes to decide whether the payment succeeded.

Use provider="paypal" with your PayPal client ID. The order needs a type: "order" for a one-time payment or "subscription" for a recurring one. The remaining fields are passed to the A-Tech backend.

"use client";
import { PymentOrder } from "@a-tech.jo/atech_payment";

export default function PayPalCheckout() {
  return (
    <PymentOrder
      provider="paypal"
      clientId={process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID}
      order={{ type: "order" /* ...order fields */ }}
      onChange={({ event, data }) => console.log(event, data)}
      onStatusChange={(approved) => approved && console.log("Paid")}
    />
  );
}

onChange receives { event, data } for the createOrder and approveOrder steps. onStatusChange(true) is called once the payment is approved.

PymentOrder props

verifyCheckout(provider, checkoutId, resourcePath)

Returns the payment status for a HyperPay checkout. Today only the "hyperpay" provider is supported; other providers return false.

Every value you have to provide, where it comes from, and where to find it.

Gateway credentials

Your gateway secrets (API keys, merchant IDs) are never put in your code. Save them in the dashboard and A-Tech uses them when the SDK creates an order.

• Package on npm
• HyperPay: payment widget integration
• HyperPay: request parameters and test accounts
• HyperPay: result codes
• PayPal: REST apps and client IDs (sandbox)
• PayPal: sandbox test accounts
• PayPal: JavaScript SDK reference
• A-Tech dashboard: Credentials
• A-Tech dashboard: KYC and entity
• Contact A-Tech sales

Next.js fails to compile the package

Add "@a-tech.jo/atech_payment" to transpilePackages in next.config.js and restart the dev server.

The PayPal buttons show "Invalid Env"

Set NEXT_PUBLIC_NODE_ENV to production or development. Staging is not supported for PayPal in version 1.0.17.

The card form does not appear

Make sure order is not empty and your Content Security Policy allows scripts and frames from eu-test.oppwa.com (testing) or eu-prod.oppwa.com (live).

The page redirects to /login

The A-Tech backend rejected the request (401). Check that your account is approved and your gateway credentials are saved in the dashboard.

I am using the test host in production

HyperPay only uses its live host when NEXT_PUBLIC_NODE_ENV is exactly production.