> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alignet.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 5. Testing and production

> Review security, functional tests and production readiness.

<div className="ao-guide-rail not-prose"><a href="/en/virtual-payments/checkout-web/introduction">← Checkout Web overview</a><span>STEP 05 / 05</span></div>

Complete the full payment flow in sandbox before requesting production validation. Confirm that the browser, backend and order status agree.

Implement these recommendations as you integrate **Web Checkout** with Alignet One Flex.

## Flow responsibilities

<CardGroup cols={2}>
  <Card title="Backend" icon="server">
    Generates tokens, issues the `nonce`, validates final statuses, and updates orders.
  </Card>

  <Card title="Frontend" icon="table-layout">
    Initializes Flex, displays checkout, and handles callbacks to improve the user experience.
  </Card>
</CardGroup>

<Warning>
  Do not complete an order based only on the response shown in the browser. Confirm the final status from the backend, especially for asynchronous methods.
</Warning>

## Security

<AccordionGroup>
  <Accordion title="Nonce and tokens" icon="shield-check" defaultOpen>
    * Generate the `Access Token` and `nonce` from the backend.
    * Do not expose credentials or tokens in JavaScript, HTML, logs, or analytics.
    * Renew temporary credentials when they expire.
  </Accordion>

  <Accordion title="Callbacks" icon="bolt">
    * Use `responseCallback` for user experience.
    * Use `trackingCallback` for flow traceability.
    * Use `onErrorCallback` for controlled messages and support.
  </Accordion>

  <Accordion title="Asynchronous methods" icon="clock">
    * For QR, Cuotéalo, or PagoEfectivo, confirm the result through a query or notification.
    * Handle pending, expired, and declined statuses.
    * Avoid duplicating orders when customers retry.
  </Accordion>
</AccordionGroup>

## Recommended UX

* Show clear messages for approved, declined, pending, or canceled payments.
* Keep the operation number available for support.
* Validate Flex on desktop and mobile devices.
* Test the language, close button, and visible payment methods before production.

Use this checklist as a quick guide before applying for final flow validation **Web Checkout**.

<Info>
  The guide aims at implementation with **Flex**, including front, `nonce`, payment response and final validation of result.
</Info>

## Checklist base

<AccordionGroup>
  <Accordion title="1. Preparation" icon="key" defaultOpen>
    * Revised business and technical requirements.
    * Credentials and testing environment available.
    * Domination, return pages and defined callbacks.
    * Checkout Flow confirmed for merchant.
  </Accordion>

  <Accordion title="2. Technical configuration" icon="gear">
    * Operating Authentication to Generate `token` or `nonce`.
    * Libraries or fronstore components loaded correctly.
    * Mandatory parameters sent with proper format.
    * Styles and visual experience reviewed within the checkout.
  </Accordion>

  <Accordion title="3. Flow Validation" icon="cart-shopping">
    * Approved transaction completed correctly.
    * Rejected transaction validated with bug management.
    * autoisation response processed at front.
    * Asynchronous methods tested if activated.
  </Accordion>

  <Accordion title="4. Confirmation and consistency" icon="database">
    * Final status confirmed from backend or through consultation.
    * Duples and reattempts handled securely.
    * Order or pay properly updated to your system.
    * Minimum logs available for support and diagnosis.
  </Accordion>

  <Accordion title="5. Production" icon="rocket">
    * Sandbox complete with minimum evidence of evidence.
    * The production configuration revised by environment.
    * Critical flows tested with integration equipment.
    * Integration ready for live leave.
  </Accordion>
</AccordionGroup>

## Minimum approval criterion

<CardGroup cols={3}>
  <Card title="Approved purchase" icon="check">
    At least an approved end to end validated flow.
  </Card>

  <Card title="Rejected purchase" icon="x">
    Full Validation of Rejection and message management for the user.
  </Card>

  <Card title="Consisstore result" icon="shield-check">
    Confirmation between front and backend and final status of payment before production.
  </Card>
</CardGroup>