> ## 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.

export const paymentMethodType_2 = "HITPAY_ATOME"

export const displayName_2 = "Atome via HitPay"

export const paymentMethodType_1 = "HITPAY_ATOME"

export const displayName_1 = "Atome via HitPay"

export const paymentMethodType_0 = "HITPAY_ATOME"

export const displayName_0 = "Atome via HitPay"

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.
</Note>

## Get started with Atome via HitPay

### Before you begin

If this is your first payment method, make sure to follow the [Get started guide](/docs/get-started/overview) 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](/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](/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session#body-order-id)           | ✓        | A unique identifier for the order. Maximum 255 characters.                        |
| [currencyCode](/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session#body-currency-code) | ✓        | The three-letter currency code in ISO 4217 format. e.g. use `USD` for US dollars. |

## Prepare the SDK for payments

<Tabs>
  <Tab title="Web">
    <Info>
      Use the payment method type <code>{paymentMethodType_0}</code> wherever the code below references `YOUR_PAYMENT_METHOD_TYPE`.
    </Info>

    <Tabs>
      <Tab title="Primer Checkout (recommended)">
        Primer Checkout is our latest web SDK, built around declarative web components. Once {displayName_0} 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](/docs/sdk/primer-checkout-web/components/primer-payment-method) if you're building a custom layout and need to place {displayName_0} 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](/docs/sdk/primer-checkout-web/events-reference) or use [primer-payment-method-container](/docs/sdk/primer-checkout-web/components/primer-payment-method-container) for declarative filtering.
      </Tab>

      <Tab title="Universal Checkout (legacy)">
        ##### Set up redirects

        If {displayName_0} 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](/docs/sdk/web/v2.x.x/handle-redirects-and-deeplinks#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

        {displayName_0} is automatically presented when calling [Primer.showUniversalCheckout](/docs/sdk/web/v2.x.x/primer/methods/showUniversalCheckout).

        ```typescript theme={"dark"}
        import { Primer } from "@primer-io/checkout-web";

        try {
          await Primer.showUniversalCheckout(clientToken, options);
        } catch (e) {
          // handle error
        }
        ```

        Check the [customization guide](/docs/checkout/drop-in/customization#styling-payment-method-button) to learn how to customize payment method buttons.
      </Tab>

      <Tab title="Headless Universal Checkout (legacy)">
        Create a `RedirectPaymentMethodManager` for {displayName_0} using [createPaymentMethodManager](/docs/sdk/web/v2.x.x/primer-headless-checkout/methods/createPaymentMethodManager#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](/docs/checkout/headless/#step-4c-handle-payment-methods-with-redirect).
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="iOS">
    <Info>
      Use the payment method type <code>{paymentMethodType_1}</code> wherever the code below references `YOUR_PAYMENT_METHOD_TYPE`.
    </Info>

    #### 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

    <Tabs>
      <Tab title="Universal Checkout (drop-in)">
        {displayName_1} is automatically presented when calling [Primer.shared.showUniversalCheckout](/docs/sdk/ios/v2.x.x/primer/methods/showUniversalCheckout).

        ```swift theme={"dark"}
        class MyViewController: UIViewController {
          func startUniversalCheckout() {
            Primer.shared.showUniversalCheckout(clientToken: self.clientToken)
          }
        }
        ```

        Check the [customization guide](/docs/checkout/drop-in/customization#styling-payment-method-button) to learn how to customize payment method buttons.
      </Tab>

      <Tab title="Headless Universal Checkout">
        {displayName_1} requires a [Native UI Manager](/docs/checkout/headless/#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](/docs/sdk/ios/v2.x.x/primer-headless-checkout/native-ui-manager/init) 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](/docs/checkout/headless/#native-ui-manager).
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Android">
    <Info>
      Use the payment method type <code>{paymentMethodType_2}</code> wherever the code below references `YOUR_PAYMENT_METHOD_TYPE`.
    </Info>

    <Tabs>
      <Tab title="Universal Checkout (drop-in)">
        {displayName_2} is automatically presented when calling [Primer.instance.showUniversalCheckout](/docs/sdk/android/v2.x.x/primer/methods/showUniversalCheckout).

        ```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](/docs/checkout/drop-in/customization#styling-payment-method-button) to learn how to customize payment method buttons.
      </Tab>

      <Tab title="Headless Universal Checkout">
        {displayName_2} requires a [Native UI Manager](/docs/checkout/headless/#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](/docs/sdk/android/v2.x.x/primer-headless-checkout/native-ui-manager/newInstance) 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](/docs/checkout/headless/#native-ui-manager).
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Go live

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