> For the complete documentation index, see [llms.txt](https://docs.does.qa/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.does.qa/guides/test-checkout-and-payments.md).

# Test checkout and payments

A checkout Flow proves the path from cart to confirmation. Fill ordinary fields with Action steps. For payment widgets, use the Express Adyen steps when you are on Adyen, or switch into the payment iframe and fill it like any other form.

```mermaid
flowchart TD
  open["Open storefront"] --> cart["Touch and Set value"]
  cart --> address["Set value for shipping"]
  address --> pay{"Payment UI"}
  pay -->|Adyen| adyen["Adyen Widget"]
  pay -->|iframe| frame["Switch frame then Set value"]
  frame --> parent["Switch to parent frame"]
  parent --> submit["Touch pay"]
  adyen --> confirm["Check confirmation"]
  submit --> confirm
```

Use the **Flow Builder** for this walkthrough.

## What you need

* A storefront URL and products you can buy in a test environment
* Address and customer [Values](/values/value-store.md) where the form repeats
* Payment test data from your provider's published test cards (not live customer cards)

## Build the cart and address steps

{% stepper %}
{% step %}

## Open the storefront

Start with [**Open**](/test-steps/starter/open.md). Point it at the product, cart, or checkout URL your journey starts from.
{% endstep %}

{% step %}

## Add items and reach checkout

Use [**Touch**](/test-steps/action/touch.md) and [**Set value**](/test-steps/action/set-value.md) to add products, choose options, and open checkout.
{% endstep %}

{% step %}

## Fill shipping and contact details

Add [**Set value**](/test-steps/action/set-value.md) for name, address, and email fields. Prefer Values from the [Value Store](/values/value-store.md) so the same Flow can run across environments.
{% endstep %}
{% endstepper %}

## Complete payment

### Adyen Drop-in or widget

When the page uses Adyen, add [**Adyen Widget**](/test-steps/express/adyen-widget.md) from **Express**.

1. Enter the provider’s test card number, expiry, CVC, and name (or pull them from Values).
2. Set **Complete Checkout** to **Purchase** to fill and submit, or **Fields Only** when a later step should press pay.
3. Choose the purchase button [Element](/elements/creating-elements.md) when **Purchase** is selected.

For PayPal through Adyen, use [**Adyen PayPal**](/test-steps/express/adyen-paypal.md).

### Payment fields inside an iframe

Many providers render card fields in an iframe. Switch into that frame, fill the fields, then return to the parent page.

{% stepper %}
{% step %}

## Switch into the payment frame

Add [**Switch frame**](/test-steps/runner/switch-frame.md). Choose the [Element](/elements/creating-elements.md) for the iframe.
{% endstep %}

{% step %}

## Fill the card fields

Add [**Set value**](/test-steps/action/set-value.md) (and [**Touch**](/test-steps/action/touch.md) if needed) for number, expiry, and CVC inside the frame.
{% endstep %}

{% step %}

## Return to the page and submit

Add [**Switch to parent frame**](/test-steps/runner/switch-to-parent-frame.md), then [**Touch**](/test-steps/action/touch.md) the pay or place-order button on the parent page.
{% endstep %}
{% endstepper %}

See [Test tabs, windows, and frames](/guides/test-tabs-windows-and-frames.md) for nested frames and hosted checkouts that open a new window.

<figure><img src="/files/TjQxPR0W5JVblPMMWOOC" alt="Switch frame, Set value, parent frame, Touch"><figcaption><p>Example iframe payment path</p></figcaption></figure>

### Ordinary card fields on the page

If the card inputs sit in the main document, fill them with [**Set value**](/test-steps/action/set-value.md) and submit with [**Touch**](/test-steps/action/touch.md). No frame switch is required.

## Confirm the order

Add [**Check text**](/test-steps/check/check-text.md) or another Check on the confirmation screen, order number, or success message. Add a URL Check when the success page has a stable path.

{% hint style="info" %}
**Pro tip:** Keep provider test card numbers in Values when several Flows share them. Use the provider’s published test cards for the environment you are targeting.
{% endhint %}

## Related

* [Adyen Widget](/test-steps/express/adyen-widget.md)
* [Adyen PayPal](/test-steps/express/adyen-paypal.md)
* [Switch frame](/test-steps/runner/switch-frame.md)
* [Switch to parent frame](/test-steps/runner/switch-to-parent-frame.md)
* [Test tabs, windows, and frames](/guides/test-tabs-windows-and-frames.md)
* [Share data with Values](/better-coverage/share-data-with-values.md)
* [Run across environments](/better-coverage/run-across-environments.md)