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

# Pay with Card

> End-to-end widget flow for a Virtual Digital Good purchase using a credit or debit card.

## Flow / Screen Examples

This scenario assumes the user chooses to pay with a credit or debit card.

***

**Marketplace / Game**

The user views items for sale in the marketplace or game. Clicking to purchase opens the Forte Payments widget.

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/forte/toR0N51xfvW4B5DK/vdg_images/340941a-base-desktop-supernova.png?fit=max&auto=format&n=toR0N51xfvW4B5DK&q=85&s=4186d084c8627bb082f0fec300401ec1" width="1440" height="1157" data-path="vdg_images/340941a-base-desktop-supernova.png" />

***

**Screen 1 — Email Verification**

The user is presented with an email verification screen. They must verify that they own the email address associated with their marketplace or game account.

<Note>
  If `email` is not passed in the payment intent request (and `wallet` is passed instead), the user will be prompted to enter and verify their email on their first payment. That email is then linked for all future sessions.
</Note>

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/forte/toR0N51xfvW4B5DK/vdg_images/f3b1ad40fbed7c8a0d6079365dcce7d2b41d2048ce0bbff1af4e7d51e70c794a-image.png?fit=max&auto=format&n=toR0N51xfvW4B5DK&q=85&s=6b3e88eadcebf22ae3c353e865c734a0" width="3456" height="2314" data-path="vdg_images/f3b1ad40fbed7c8a0d6079365dcce7d2b41d2048ce0bbff1af4e7d51e70c794a-image.png" />

***

**Screen 2 — OTP Entry**

The user enters the verification code sent to their email to complete email verification.

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/forte/toR0N51xfvW4B5DK/vdg_images/eb49277690f391dc4c09c66c091e3d381c7be50e602f2e0061ffc1616e7f6add-image.png?fit=max&auto=format&n=toR0N51xfvW4B5DK&q=85&s=cf4a75150a931709fe2010aa38d99563" width="3456" height="2314" data-path="vdg_images/eb49277690f391dc4c09c66c091e3d381c7be50e602f2e0061ffc1616e7f6add-image.png" />

***

**Screen 3 — Purchase Summary**

The user is presented with a purchase summary showing transaction details. They select **Pay with card** to continue.

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/forte/toR0N51xfvW4B5DK/vdg_images/3b5f4c8e175a5a6398706eef6ec6bc6c3d7dde0331e6674e64ff08eb952041ef-image.png?fit=max&auto=format&n=toR0N51xfvW4B5DK&q=85&s=c5a557c58c23ce69ac1c9cf200aa84e6" width="3456" height="2314" data-path="vdg_images/3b5f4c8e175a5a6398706eef6ec6bc6c3d7dde0331e6674e64ff08eb952041ef-image.png" />

***

**Screen 4 — Card Entry**

The user enters their credit or debit card details and billing information, then clicks **Continue**.

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/forte/toR0N51xfvW4B5DK/vdg_images/40847f1c54ecb7dc670a0cc9f01e7a0994e8f51c12fb5012799535f9c20661b7-image.png?fit=max&auto=format&n=toR0N51xfvW4B5DK&q=85&s=6fcbb63348dbda9192c788f333bced92" width="3456" height="2314" data-path="vdg_images/40847f1c54ecb7dc670a0cc9f01e7a0994e8f51c12fb5012799535f9c20661b7-image.png" />

***

**Screen 5 — Transaction Review**

The user sees a complete breakdown of the transaction before confirming:

* **Buying** — the item being purchased
* **Sending to** — the destination account receiving the asset
* **Paying with** — the selected payment method

The user can click **Paying with** to switch to a different card before confirming.

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/forte/toR0N51xfvW4B5DK/vdg_images/2b9c2602c762cf9e607967894c009326ad5dc24a1d4e4528a90152d7aad6185d-image.png?fit=max&auto=format&n=toR0N51xfvW4B5DK&q=85&s=8122f453e72629dd821bf908732441b2" width="3456" height="2314" data-path="vdg_images/2b9c2602c762cf9e607967894c009326ad5dc24a1d4e4528a90152d7aad6185d-image.png" />

***

**Screen 6 — Confirmation**

Once the payment is processed, the user sees a confirmation screen. The user also receives an email receipt.

**Success** — Payment processed. The user is shown a success message and Order ID.

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/forte/toR0N51xfvW4B5DK/vdg_images/a5d62af2360b483c9a7d7721f71600f4b49a81d665d02a223d27df8eddcc3846-image.png?fit=max&auto=format&n=toR0N51xfvW4B5DK&q=85&s=cf5889144dce23490a8ad7b7894709ac" width="3456" height="2314" data-path="vdg_images/a5d62af2360b483c9a7d7721f71600f4b49a81d665d02a223d27df8eddcc3846-image.png" />

**Failure** — Payment could not be processed. The user is shown a failure message.

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/forte/toR0N51xfvW4B5DK/vdg_images/1bace7ad45b0aa27fb9b0ec02e47f42c7d840bb59236b437419b2fc0c13f5738-image.png?fit=max&auto=format&n=toR0N51xfvW4B5DK&q=85&s=ce7f6a88f3951bc0b428575314982f63" width="3456" height="2314" data-path="vdg_images/1bace7ad45b0aa27fb9b0ec02e47f42c7d840bb59236b437419b2fc0c13f5738-image.png" />
