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

# Alma

> Let customers securely make payments using Alma on your website or mobile application via Primer's direct integration.

export const paymentMethodType_2 = "ALMA"

export const displayName_2 = "Alma"

export const paymentMethodType_1 = "ALMA"

export const displayName_1 = "Alma"

export const paymentMethodType_0 = "ALMA"

export const displayName_0 = "Alma"

Primer's direct integration to Alma enables you to accept BNPL payments across Web, iOS & Android.

## Get started with Alma

### Before you begin

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

### Configure in the Dashboard

1. **Add Alma 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 Alma. Follow the instructions to connect your Alma account to your Primer Dashboard.
2. **Activate Alma on the Checkout** Go to the [Checkout](https://dashboard.primer.io/checkout) section of the Dashboard and activate the Alma payment method.
3. **Configure a Workflow to process payments made with Alma** Go to [Workflows](/workflows), and ensure there is a workflow with the **Authorization** action configured to process APMs.

### Prepare the client session

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

| Parameter Name                      | Required | Description                                                   |
| ----------------------------------- | -------- | ------------------------------------------------------------- |
| orderId                             | ✓        | A unique identifier for the order. Maximum 255 characters.    |
| customer ↳ billingAddress.firstName | ✓        | The customer's first name, mapped to Alma's customer details. |
| order ↳ countryCode                 | ✓        | The country code used for routing, e.g. `FR`.                 |

## 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](/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](/sdk/primer-checkout-web/events-reference) or use [primer-payment-method-container](/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](/sdk/web/v2.x.x/handle-redirects-&-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](/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](/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](/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](/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](/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](/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](/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](/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](/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](/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](/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](/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](/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](/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.