> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Atome via HitPay

> Let customers securely make payments using Atome via HitPay on your website or mobile application.

Atome via HitPay redirects the customer to a HitPay hosted checkout page where the customer can scan the presented QR code to proceed with payment.

| One off payment | Refunds | Recurring | Cancel |
| - | - | - | - |
| ✓ | ✓ | x | x |

> [!NOTE]
>
> Partial and full refunds up to the total original transaction amount are supported. Any additional fees added using HitPay's Admin Fees functionality cannot be refunded via Primer.

## Get started with Atome via HitPay

### Before you begin

If this is your first payment method, make sure to follow the [Get started guide](https://primer.io/docs/get-started/overview.md) to begin processing payments with Primer.

### Configure in the Dashboard

1. **Add Atome via HitPay payment method to your Dashboard** Go to the [integrations](https://dashboard.primer.io/integrations) section of the Dashboard, click on the 'New Integration' button and search for HitPay. Follow the instructions to connect your Atome via HitPay account to your Primer Dashboard.
2. **Activate Atome via HitPay on the Checkout** Go to the [Checkout](https://dashboard.primer.io/checkout) section of the Dashboard and activate the Atome via HitPay payment method.
3. **Configure a Workflow to process payments made with Atome via HitPay** Go to [Workflows](https://primer.io/docs/workflows), and ensure there is a workflow with the **Authorization** action configured to process APMs.

### Prepare the client session

HitPay leverages the following parameters to process a payment. Pass them when creating the client session.

| Parameter Name | Required | Description |
| - | - | - |
| [orderId](https://primer.io/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session.md#body-order-id) | ✓ | A unique identifier for the order. Maximum 255 characters. |
| [currencyCode](https://primer.io/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session.md#body-currency-code) | ✓ | The three-letter currency code in ISO 4217 format. e.g. use `USD` for US dollars. |

## Prepare the SDK for payments

> [tab] Web
>
> > [!NOTE]
> >
> > Use the payment method type `HITPAY_ATOME` wherever the code below references `YOUR_PAYMENT_METHOD_TYPE`.
>
> > [tab] Primer Checkout (recommended)
> >
> > Primer Checkout is our latest web SDK, built around declarative web components. Once Atome via HitPay is enabled in your [Dashboard](https://dashboard.primer.io/checkout), the default `<primer-checkout>` layout renders it automatically alongside your other methods — no payment-method-specific markup is required.
> >
> > ```html theme={"dark"}
> > <primer-checkout client-token="your-client-token"></primer-checkout>
> > ```
> >
> > #### Custom layouts
> >
> > Only reach for [primer-payment-method](https://primer.io/docs/sdk/primer-checkout-web/components/primer-payment-method.md) if you're building a custom layout and need to place Atome via HitPay at a specific position. The element only renders when the type is enabled in your Dashboard and returned by the server for this checkout.
> >
> > ```html theme={"dark"}
> > <primer-checkout client-token="your-client-token">
> >   <primer-main slot="main">
> >     <div slot="payments">
> >       <primer-payment-method type="YOUR_PAYMENT_METHOD_TYPE"></primer-payment-method>
> >     </div>
> >   </primer-main>
> > </primer-checkout>
> > ```
> >
> > For dynamic rendering based on what the server returns, listen to [primer:methods-update](https://primer.io/docs/sdk/primer-checkout-web/events-reference.md) or use [primer-payment-method-container](https://primer.io/docs/sdk/primer-checkout-web/components/primer-payment-method-container.md) for declarative filtering.
>
> > [tab] Universal Checkout (legacy)
> >
> > ##### Set up redirects
> >
> > If Atome via HitPay can't be shown in a popup, Universal Checkout redirects the customer back to your site using the `returnUrl` passed in the `redirect` options. See [Handle redirects & deep links](https://primer.io/docs/sdk/web/v2.x.x/handle-redirects-and-deeplinks.md#set-up-redirects) for the full flow.
> >
> > ```typescript theme={"dark"}
> > const options = {
> >   container: "#checkout-container",
> >   redirect: {
> >     returnUrl: "https://mystore.com/checkout",
> >   },
> >   onCheckoutComplete({ payment }) {
> >     console.log("Checkout complete.", payment);
> >   },
> > };
> > ```
> >
> > ##### Show Universal Checkout
> >
> > Atome via HitPay is automatically presented when calling [Primer.showUniversalCheckout](https://primer.io/docs/sdk/web/v2.x.x/primer/methods/showUniversalCheckout.md).
> >
> > ```typescript theme={"dark"}
> > import { Primer } from "@primer-io/checkout-web";
> >
> > try {
> >   await Primer.showUniversalCheckout(clientToken, options);
> > } catch (e) {
> >   // handle error
> > }
> > ```
> >
> > Check the [customization guide](https://primer.io/docs/checkout/drop-in/customization.md#styling-payment-method-button) to learn how to customize payment method buttons.
>
> > [tab] Headless Universal Checkout (legacy)
> >
> > Create a `RedirectPaymentMethodManager` for Atome via HitPay using [createPaymentMethodManager](https://primer.io/docs/sdk/web/v2.x.x/primer-headless-checkout/methods/createPaymentMethodManager.md#redirect), then call `start()` to begin the redirect flow.
> >
> > ```typescript theme={"dark"}
> > const manager = await headless.createPaymentMethodManager("YOUR_PAYMENT_METHOD_TYPE");
> >
> > if (manager) {
> >   manager.addEventListener("click", () => {
> >     // Optional: run custom logic before the redirect flow starts.
> >   });
> >
> >   await manager.start();
> > }
> > ```
> >
> > Refer to the full guide for [handling payment methods with redirect](https://primer.io/docs/checkout/headless.md#step-4c-handle-payment-methods-with-redirect).

> [tab] iOS
>
> > [!NOTE]
> >
> > Use the payment method type `HITPAY_ATOME` wherever the code below references `YOUR_PAYMENT_METHOD_TYPE`.
>
> #### Set up redirects
>
> Redirect-based payment methods present a webpage or open a third-party app for the customer to authorize the payment. To return to your app once the customer has authorized the payment, include the `urlScheme` parameter when configuring `PrimerPaymentMethodOptions`.
>
> ```swift theme={"dark"}
> let settings = PrimerSettings(
>   // ...
>   paymentMethodOptions: PrimerPaymentMethodOptions(
>     urlScheme: "your-url-scheme://" // e.g. primer://, yourscheme://
>   )
>   // ...
> )
> ```
>
> When the customer is redirected back to your app, iOS calls `application(_:continue:restorationHandler:)`. Forward the call to the Primer SDK so the checkout can continue the flow.
>
> ```swift theme={"dark"}
> import PrimerSDK
> import UIKit
>
> @UIApplicationMain
> class AppDelegate: UIResponder, UIApplicationDelegate {
>   // ...
>   func application(
>     _ application: UIApplication,
>     continue userActivity: NSUserActivity,
>     restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
>   ) -> Bool {
>     return Primer.shared.application(
>       application,
>       continue: userActivity,
>       restorationHandler: restorationHandler
>     )
>   }
> }
> ```
>
> #### Show the payment method
>
> > [tab] Universal Checkout (drop-in)
> >
> > Atome via HitPay is automatically presented when calling [Primer.shared.showUniversalCheckout](https://primer.io/docs/sdk/ios/v2.x.x/primer/methods/showUniversalCheckout.md).
> >
> > ```swift theme={"dark"}
> > class MyViewController: UIViewController {
> >   func startUniversalCheckout() {
> >     Primer.shared.showUniversalCheckout(clientToken: self.clientToken)
> >   }
> > }
> > ```
> >
> > Check the [customization guide](https://primer.io/docs/checkout/drop-in/customization.md#styling-payment-method-button) to learn how to customize payment method buttons.
>
> > [tab] Headless Universal Checkout
> >
> > Atome via HitPay requires a [Native UI Manager](https://primer.io/docs/checkout/headless.md#native-ui-manager) to be presented to the customer.
> >
> > ```swift theme={"dark"}
> > // 👇 Create the payment method manager
> > let nativeUIPaymentMethodManager = try PrimerHeadlessUniversalCheckout.NativeUIManager(
> >   paymentMethodType: "YOUR_PAYMENT_METHOD_TYPE"
> > )
> >
> > // 👇 Show the payment method
> > try nativeUIPaymentMethodManager.showPaymentMethod(intent: .checkout)
> > ```
> >
> > See [NativeUIManager.init](https://primer.io/docs/sdk/ios/v2.x.x/primer-headless-checkout/native-ui-manager/init.md) for the full API. As many redirect-based payment methods share this approach, we recommend centralizing the implementation — see the worked example in the [Native UI Manager guide](https://primer.io/docs/checkout/headless.md#native-ui-manager).

> [tab] Android
>
> > [!NOTE]
> >
> > Use the payment method type `HITPAY_ATOME` wherever the code below references `YOUR_PAYMENT_METHOD_TYPE`.
>
> > [tab] Universal Checkout (drop-in)
> >
> > Atome via HitPay is automatically presented when calling [Primer.instance.showUniversalCheckout](https://primer.io/docs/sdk/android/v2.x.x/primer/methods/showUniversalCheckout.md).
> >
> > ```kotlin theme={"dark"}
> > class CheckoutActivity : AppCompatActivity() {
> >   private fun setupObservers() {
> >     viewModel.clientToken.observe(this) { clientToken ->
> >       showUniversalCheckout(clientToken)
> >     }
> >   }
> >
> >   private fun showUniversalCheckout(clientToken: String) {
> >     Primer.instance.showUniversalCheckout(this, clientToken)
> >   }
> > }
> > ```
> >
> > Check the [customization guide](https://primer.io/docs/checkout/drop-in/customization.md#styling-payment-method-button) to learn how to customize payment method buttons.
>
> > [tab] Headless Universal Checkout
> >
> > Atome via HitPay requires a [Native UI Manager](https://primer.io/docs/checkout/headless.md#native-ui-manager) to be presented to the customer.
> >
> > ```kotlin theme={"dark"}
> > // 👇 Create the payment method manager
> > val nativeUiManager = PrimerHeadlessUniversalCheckoutNativeUiManager.newInstance("YOUR_PAYMENT_METHOD_TYPE")
> >
> > // 👇 Show the payment method
> > nativeUiManager.showPaymentMethod(this, PrimerSessionIntent.CHECKOUT)
> > ```
> >
> > See [NativeUiManager.newInstance](https://primer.io/docs/sdk/android/v2.x.x/primer-headless-checkout/native-ui-manager/newInstance.md) for the full API. As many redirect-based payment methods share this approach, we recommend centralizing the implementation — see the worked example in the [Native UI Manager guide](https://primer.io/docs/checkout/headless.md#native-ui-manager).

## Go live

You don't need to do anything particular to go live — just make sure to use production credentials.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.