GrabPay via Nomupay

Let customers pay using GrabPay via Nomupay across Southeast Asia.

GrabPay via Nomupay is a Southeast Asian digital wallet operated by Grab, available across Cambodia, Indonesia, Malaysia, Myanmar, Philippines, Singapore, Thailand, and Vietnam. Nomupay settles MYR via the Malaysia account and PHP via the Philippines account — separate regional accounts are required.

One off payment	Refunds	Recurring	Cancel
✓	✓	x	x

Nomupay uses separate regional accounts for MYR (Malaysia) and PHP (Philippines) settlement. Confirm with Nomupay which account is needed for your target markets.

Get started with GrabPay via Nomupay

Before you begin

If this is your first payment method, follow the Get started guide to begin processing payments with Primer.

Configure in the Dashboard

1. Add Nomupay to your Dashboard
   Go to Integrations, click New Integration, and search for Nomupay. Enter your Nomupay credentials.

2. Activate on the Checkout
   Go to Checkout and activate GrabPay.

3. Configure a Workflow
   Ensure a Workflow with an Authorization action is set up to process APMs.

Prepare the client session

No additional fields are required beyond the standard orderId, currencyCode, amount, and customer fields.

Prepare the SDK for payments

Web

Use the payment method type NOMUPAY_GRABPAY wherever the code below references YOUR_PAYMENT_METHOD_TYPE.

Primer Checkout (recommended)

Primer Checkout is our latest web SDK, built around declarative web components. Once GrabPay is enabled in your Dashboard, the default <primer-checkout> layout renders it automatically alongside your other methods — no payment-method-specific markup is required.

<primer-checkout client-token="your-client-token"></primer-checkout>

Custom layouts

Only reach for primer-payment-method if you’re building a custom layout and need to place GrabPay at a specific position. The element only renders when the type is enabled in your Dashboard and returned by the server for this checkout.

<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 or use primer-payment-method-container for declarative filtering.

Universal Checkout (legacy)

Set up redirects

If GrabPay 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 for the full flow.

const options = {
  container: "#checkout-container",
  redirect: {
    returnUrl: "https://mystore.com/checkout",
  },
  onCheckoutComplete({ payment }) {
    console.log("Checkout complete.", payment);
  },
};

Show Universal Checkout

GrabPay is automatically presented when calling Primer.showUniversalCheckout.

import { Primer } from "@primer-io/checkout-web";

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

Check the customization guide to learn how to customize payment method buttons.

Headless Universal Checkout (legacy)

Create a RedirectPaymentMethodManager for GrabPay using createPaymentMethodManager, then call start() to begin the redirect flow.

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.

iOS

Use the payment method type NOMUPAY_GRABPAY 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.

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.

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

Universal Checkout (drop-in)

GrabPay is automatically presented when calling Primer.shared.showUniversalCheckout.

class MyViewController: UIViewController {
  func startUniversalCheckout() {
    Primer.shared.showUniversalCheckout(clientToken: self.clientToken)
  }
}

Check the customization guide to learn how to customize payment method buttons.

Headless Universal Checkout

GrabPay requires a Native UI Manager to be presented to the customer.

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

Android

Use the payment method type NOMUPAY_GRABPAY wherever the code below references YOUR_PAYMENT_METHOD_TYPE.

Universal Checkout (drop-in)

GrabPay is automatically presented when calling Primer.instance.showUniversalCheckout.

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 to learn how to customize payment method buttons.

Headless Universal Checkout

GrabPay requires a Native UI Manager to be presented to the customer.

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

Go live

Use production Nomupay credentials with the correct regional account for your target market (MYR or PHP).