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

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

> [tab] Android
>
> ```kotlin theme={"dark"}
> 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)
> ```

> [tab] 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
>           }
>         }
>       )
>     }
>   }
> }
> ```

## How it works

> [tab] 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] Android
>
> 1. Observe `checkout.state` with `collectAsStateWithLifecycle()` and react in a `LaunchedEffect`
> 2. Handle `PrimerCheckoutState.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] 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. Pass `result.paymentId` to your confirmation view. `result.paymentMethodType` tells you which method was used. `result.amount` and `result.currencyCode` are optional and are `nil` for card payments, so take the amount and currency for your receipt from your own order.
>
> > [!NOTE]
> >
> > By default, `PrimerCheckout` shows its own success screen and calls `onCompletion` with `.success` when that screen auto-dismisses after 3 seconds. To redirect as soon as the payment succeeds, turn off the SDK screen with `PrimerSettings(uiOptions: PrimerUIOptions(isSuccessScreenEnabled: false))` and pass it as `primerSettings`.
>
> | 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

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

> [tab] Android
>
> ```kotlin theme={"dark"}
> is PrimerCheckoutState.Success -> {
>     val paymentId = s.checkoutData.payment.id
>     navController.navigate("confirmation/$paymentId")
> }
> ```

> [tab] iOS
>
> Pass the payment ID to your confirmation view:
>
> ```swift theme={"dark"}
> struct CheckoutView: View {
>   let clientToken: String
>   @State private var paymentId: String?
>
>   var body: some View {
>     if let paymentId {
>       ConfirmationView(paymentId: paymentId)
>     } else {
>       PrimerCheckout(
>         clientToken: clientToken,
>         onCompletion: { state in
>           if case .success(let result) = state {
>             paymentId = result.paymentId
>           }
>         }
>       )
>     }
>   }
> }
> ```

### Redirect to different pages based on payment method

> [tab] 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] Android
>
> > [!NOTE]
> >
> > 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.

> [tab] iOS
>
> > [!NOTE]
> >
> > 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.

## See also

> [card] [Show custom success message](https://primer.io/docs/checkout/primer-checkout/guides-and-recipes/show-success-message.md)
>
> Display a branded success state after payment

> [card] [Track payment in analytics](https://primer.io/docs/checkout/primer-checkout/guides-and-recipes/track-payment-analytics.md)
>
> Send payment events to your analytics platform


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.