Redirect after successful payment

Redirect users to a confirmation or thank you page after a successful payment.

Recipe

Web
Android
iOS

checkout.addEventListener('primer:payment-success', (event) => {
  const { payment } = event.detail;
  window.location.href = `/order/confirmation?id=${payment.orderId}`;
});

val state by checkout.state.collectAsStateWithLifecycle()
LaunchedEffect(state) {
    when (val s = state) {
        is PrimerCheckoutState.Success -> {
            val payment = s.checkoutData.payment
            navController.navigate("confirmation/${payment.orderId}") {
                popUpTo("checkout") { inclusive = true }
            }
        }
        else -> Unit
    }
}

PrimerCheckoutSheet(checkout = checkout)

struct CheckoutView: View {
  let clientToken: String
  @State private var paymentResult: PaymentResult?
  @State private var paymentCompleted = false

  var body: some View {
    if paymentCompleted, let result = paymentResult {
      ConfirmationView(result: result)
    } else {
      PrimerCheckout(
        clientToken: clientToken,
        onCompletion: { state in
          if case .success(let result) = state {
            paymentResult = result
            paymentCompleted = true
          }
        }
      )
    }
  }
}

How it works

Web
Android
iOS

Listen for the primer:payment-success event on the checkout element
Extract the payment object from event.detail
Use window.location.href to redirect to your confirmation page
Pass the orderId as a query parameter so your confirmation page can display order details

Observe checkout.state with collectAsStateWithLifecycle() and react in a LaunchedEffect
Handle PrimerCheckoutState.Success to access checkoutData.payment
Navigate to your confirmation screen using navController or your preferred navigation approach
Use popUpTo to remove the checkout screen from the back stack

Property	Type	Description
`payment.id`	`String`	The Primer payment ID
`payment.orderId`	`String`	Your order ID

Use the onCompletion callback on PrimerCheckout
Match on .success to extract the PaymentResult
Update SwiftUI state to navigate to your confirmation view
Access result.paymentId for the payment ID, or read result.paymentMethodType, result.amount, and result.currencyCode for your receipt screen

Property	Type	Description
`paymentId`	`String`	The Primer payment ID
`paymentMethodType`	`String?`	The payment method type used (e.g. `"PAYMENT_CARD"`)

Variations

Redirect with payment ID

Web
Android
iOS

checkout.addEventListener('primer:payment-success', (event) => {
  const { payment } = event.detail;
  window.location.href = `/order/confirmation?paymentId=${payment.id}`;
});

is PrimerCheckoutState.Success -> {
    val paymentId = s.checkoutData.payment.id
    navController.navigate("confirmation/$paymentId")
}

Navigate using NavigationStack with the payment ID:

struct CheckoutView: View {
  let clientToken: String
  @State private var path = NavigationPath()

  var body: some View {
    NavigationStack(path: $path) {
      PrimerCheckout(
        clientToken: clientToken,
        onCompletion: { state in
          if case .success(let result) = state {
            path.append(result.paymentId)
          }
        }
      )
      .navigationDestination(for: String.self) { paymentId in
        ConfirmationView(paymentId: paymentId)
      }
    }
  }
}

Redirect to different pages based on payment method

Web
Android
iOS

checkout.addEventListener('primer:payment-success', (event) => {
  const { payment, paymentMethodType } = event.detail;

  const redirectUrls = {
    PAYMENT_CARD: '/confirmation/card',
    PAYPAL: '/confirmation/paypal',
    default: '/confirmation',
  };

  const url = redirectUrls[paymentMethodType] || redirectUrls.default;
  window.location.href = `${url}?id=${payment.orderId}`;
});

Payment method type is not available on PrimerCheckoutState.Success. The SDK manages payment method routing internally. Use the payment.orderId to redirect to a single confirmation screen.

The completion result exposes result.paymentMethodType (e.g. "PAYMENT_CARD"), so you can branch your redirect on it. Pass result.paymentId along to your confirmation screen.

Show custom success message

Display a branded success state after payment

Track payment in analytics

Send payment events to your analytics platform

​Recipe

​How it works

​Variations

​Redirect with payment ID

​Redirect to different pages based on payment method

​See also

Show custom success message

Track payment in analytics

Recipe

How it works

Variations

Redirect with payment ID

Redirect to different pages based on payment method

See also