# Checkout widget
### Introduction
Checkout is a payment gateway designed for processing debit and credit card payments online, offering access to local payment methods through global payment platforms. NymCard has integrated with Checkout, enabling users to transfer funds from their debit or credit cards to their NymCard wallet.
This document describes the **Checkout widget**, which allows non-PCI-compliant customers to securely collect and submit card details. It supports the following functionalities:
* Users can manually input the card number and other required details.
* The widget can read card details from an image for seamless data entry.
### Checkout widget usage
In order to open the Checkout widget, take the following steps:
1. Perform “[Create LUT](https://portal.stg.platform.ae-1.nymcard.com/default/documentation/02_api_specs#tag/Orders/operation/createLut)” API. LUT is a limited usage token, which expires after 10 minutes after being created. Each LUT will work for 10 requests. For creating LUT you need to fill the following parameters:
* 'source\_id' - put "default\_pci\_source" here
* ‘operation’ - put "CHECKOUT\_TOKEN" here
Below there is an example of request:
```
curl -X POST "https://{env_url}/v1/orders/users/{id}:createLut" \
-H "Content-Type: application/json" \
--header "ApiKey: tenant1-key" \
-d '{
"source_id": "default_pci_source",
"operation": "CHECKOUT_TOKEN"
}'
```
Response sample:
```
{"token":"SMJXdC/sCRogr0K7fuMz0/6QFLBDLglA2rCeZAPgS9Rb04L/BW3mYXkY2L4nab8b"}
```
2\. Encode token together with ‘**cardId**’/‘**accountId**’ and '**userId'**, values using Base64 encryption format.
Below you can find an example of data which should be encoded:
```
{ "token":"4hNuBSoaezq+KygTkjjihvLtzQMcNZc/pvQbTDd/bXJDDqi0wHli32aPqUd6mcnf",
"userId":"Sunny_25APRIL_DevEnv_0000",
"cardId":"muhaycheckoutAEDCardAccount07MAY25"}
```
3\. Take the following URL and add base64 encrypted token to it. Below you can see an example:
https://{widget_url}/cards/eyAidG9rZW4iOiJJTjlmVlpuQmlxV1dvcHgvbmlIWGo5Qi9mRnk4ckJyamYvTC9WYkR5MkJQMnArcWNkTnpUMGZlRHp5R2grZHZCIiwidXNlcklkIjoiU3VubnlfMjVBUFJJTF9EZXZFbnZfMDAwMCIsImNhcmRJZCI6Im11aGF5Y2hlY2tvdXRBRURDYXJkQWNjb3VudDA3TUFZMjUifQ==
4\. The mobile app will need to create an iframe to display the widget inside a native view. Below you can find an example code (please adapt it to your own standards/code):
**For iOS (Swift/Objective-C):**
```
let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height))
let url = URL(string: "https://your-widget-url.com")!
let request = URLRequest(url: url)
webView.load(request)
self.view.addSubview(webView)
```
**For Android (Java/Kotlin):**
```
WebView webView = new WebView(this);
webView.loadUrl("https://your-widget-url.com");
setContentView(webView);
```
5\. The checkout widget will be loaded. Below you can find two flows for performing checkout payments:
* Using existing saved card details
* Using the card details of a newly-created card
### Loading Funds from already added card
Take the following steps:
1. Select the Receiver Card and call the checkout widget.
2. Widget will display the list of already added cards. Select the necessary card and click **Confirm**:
3. Enter money amount which you want to transfer, select the way how the fee will be deducted (**Deduct from amount** or **Charge from the card**) and click **Pay Now**:
4. If 3DS setting is set as true, then you will get screen where you can enter the OTP code:
5. After that you will receive a message about a successful operation.
### Loading Funds using new card
Take the following steps:
1. Select the Receiver Card and call the checkout widget.
2. Widget will display the list of already added cards together with **Add a new card** button. Click on it:
3. Enter such card details, as Card number, expiry, CVV, cardholder name. Activate **Save card details** toggle button to save details for further payments. Click **Confirm** button:
4. Enter money amount which you want to transfer, select the way how the fee will be deducted (**Deduct from amount** or **Charge from the card**) and click **Pay now**:
5. If 3DS setting is set as true, then you will get screen where you can enter the OTP code:
6. After that you will receive a message about a successful operation.
### Deleting already added card
If you want to delete already added card, take the following steps:
1. Select the Receiver Card and call the checkout widget.
2. Widget will display the list of already added cards. Click on the **Bin** icon next to the card which you want to delete:
3. Confirm the deletion by clicking the **Remove** button:
After that you will receive a message about a successful deletion.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.nymcard.com/get-started/funding-and-transfers/checkout-widget.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.