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}`;
});

PrimerCheckoutSheet(
    checkout = checkout,
    onEvent = { event ->
        when (event) {
            is PrimerCheckoutEvent.Success -> {
                val payment = event.checkoutData.payment
                navController.navigate("confirmation/${payment.orderId}") {
                    popUpTo("checkout") { inclusive = true }
                }
            }
        }
    },
)

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

Use the onEvent callback on PrimerCheckoutSheet or PrimerCheckoutHost
Handle PrimerCheckoutEvent.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.payment?.id for the payment ID or result.payment?.orderId for your order ID

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

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 PrimerCheckoutEvent.Success -> {
    val paymentId = event.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)
          }
        }
      )
      .navigationDestination(for: PaymentResult.self) { result in
        ConfirmationView(result: result)
      }
    }
  }
}

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 PrimerCheckoutEvent.Success. The SDK manages payment method routing internally. Use the payment.orderId to redirect to a single confirmation screen.

Payment method type is not directly available on the completion result. Use the payment?.id to redirect to a single confirmation screen.

Show custom success message

Display a branded success state after payment

Track payment in analytics

Send payment events to your analytics platform

Checkout

​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