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

# Redirect after successful payment

> Navigate users to a confirmation page after completing payment.

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

## Recipe

<Tabs>
  <Tab title="Web">
    ```javascript theme={"dark"}
    checkout.addEventListener('primer:payment-success', (event) => {
      const { payment } = event.detail;
      window.location.href = `/order/confirmation?id=${payment.orderId}`;
    });
    ```
  </Tab>

  <Tab title="Android">
    ```kotlin theme={"dark"}
    PrimerCheckoutSheet(
        checkout = checkout,
        onEvent = { event ->
            when (event) {
                is PrimerCheckoutEvent.Success -> {
                    val payment = event.checkoutData.payment
                    navController.navigate("confirmation/${payment.orderId}") {
                        popUpTo("checkout") { inclusive = true }
                    }
                }
            }
        },
    )
    ```
  </Tab>

  <Tab title="iOS">
    ```swift theme={"dark"}
    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
              }
            }
          )
        }
      }
    }
    ```
  </Tab>
</Tabs>

## How it works

<Tabs>
  <Tab title="Web">
    1. Listen for the `primer:payment-success` event on the checkout element
    2. Extract the `payment` object from `event.detail`
    3. Use `window.location.href` to redirect to your confirmation page
    4. Pass the `orderId` as a query parameter so your confirmation page can display order details
  </Tab>

  <Tab title="Android">
    1. Use the `onEvent` callback on `PrimerCheckoutSheet` or `PrimerCheckoutHost`
    2. Handle `PrimerCheckoutEvent.Success` to access `checkoutData.payment`
    3. Navigate to your confirmation screen using `navController` or your preferred navigation approach
    4. 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         |
  </Tab>

  <Tab title="iOS">
    1. Use the `onCompletion` callback on `PrimerCheckout`
    2. Match on `.success` to extract the `PaymentResult`
    3. Update SwiftUI state to navigate to your confirmation view
    4. 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         |
  </Tab>
</Tabs>

## Variations

### Redirect with payment ID

<Tabs>
  <Tab title="Web">
    ```javascript theme={"dark"}
    checkout.addEventListener('primer:payment-success', (event) => {
      const { payment } = event.detail;
      window.location.href = `/order/confirmation?paymentId=${payment.id}`;
    });
    ```
  </Tab>

  <Tab title="Android">
    ```kotlin theme={"dark"}
    is PrimerCheckoutEvent.Success -> {
        val paymentId = event.checkoutData.payment.id
        navController.navigate("confirmation/$paymentId")
    }
    ```
  </Tab>

  <Tab title="iOS">
    Navigate using `NavigationStack` with the payment ID:

    ```swift theme={"dark"}
    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)
          }
        }
      }
    }
    ```
  </Tab>
</Tabs>

### Redirect to different pages based on payment method

<Tabs>
  <Tab title="Web">
    ```javascript theme={"dark"}
    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}`;
    });
    ```
  </Tab>

  <Tab title="Android">
    <Note>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.</Note>
  </Tab>

  <Tab title="iOS">
    <Note>Payment method type is not directly available on the completion result. Use the `payment?.id` to redirect to a single confirmation screen.</Note>
  </Tab>
</Tabs>

## See also

<CardGroup cols={2}>
  <Card title="Show custom success message" icon="check" href="/checkout/primer-checkout/guides-and-recipes/show-success-message">
    Display a branded success state after payment
  </Card>

  <Card title="Track payment in analytics" icon="chart-line" href="/checkout/primer-checkout/guides-and-recipes/track-payment-analytics">
    Send payment events to your analytics platform
  </Card>
</CardGroup>