# With User Interface

{% hint style="info" %}
**Requirements:**

* Integrate the OneShot Experience flow within the [Deposit Creation Endpoint](https://apidocs.onekeypayments.com/api-documentation/quickpay/endpoints/deposit-creation-endpoint) for credit and debit cards payment methods.
* Install the [Cards SDK](https://apidocs.onekeypayments.com/deposits-tools/cards-sdk).
  {% endhint %}

### 1. Create a Deposit <a href="#id-1.-create-a-deposit" id="id-1.-create-a-deposit"></a>

It must be a deposit for a **credit or debit card payment method** and within the **OneShot Experience**, therefore all the required payer information should be included in the request. Additionally, merchants opting to use our Cards SDK should send the parameter **`token_requested`** with value **`true`**.

**Example request**

```javascript
{
    "invoice_id" : "1000000001",
    "amount": "1000",
    "country": "MX",
    "currency": "MXN",
    "payer": {
        "id": "11",
        "document": "CURP4321TEST",
        "first_name": "Ricardo",
        "last_name": "Carlos",
        "email": "juanCarlos@hotmail.com"
    },
    "payment_method": "VI",
    "client_ip": "123.123.123.123",
    "back_url": "https://www.d24.com/deposit_cancelled",
    "success_url": "https://www.d24.com/deposit_completed",
    "error_url": "https://www.d24.com/deposit_error",
    "notification_url": "https://www.d24.com/d24/notify",
    "token_requested":true
}
```

**Example response**

```javascript
{
    "checkout_type": "ONE_SHOT",
    "redirect_url": "https://pay.depositcheckout.com/validate/4BmNaZNydAokLUzAg2jbCrzqBsyyBTVV",
    "deposit_id": 981624749,
    "user_id": "11",
    "merchant_invoice_id": "1000000001",
    "payment_info": {
        "type": "CREDIT_CARD",
        "payment_method": "VI",
        "payment_method_name": "Visa",
        "amount": 1000.0,
        "currency": "MXN",
        "expiration_date": "2024-04-11 18:11:11",
        "created_at": "2024-04-11 18:01:11"
    },
    "checkout_token":"4BmNaZNydAokLUzAg2jbCrzqBsyyBTVV"
}
```

The **`checkout_token`** contains the information within the context of the generated deposit. This information will be decrypted and consumed by the SDK in order to adequate the checkout experience.

### 2. Instantiate Cards SDK <a href="#id-2.-instantiate-cards-sdk" id="id-2.-instantiate-cards-sdk"></a>

Now you need to instantiate the **already installed** Cards SDK. [Here](https://apidocs.onekeypayments.com/deposits-tools/cards-sdk) you will find all the technical aspects within instantiation. Remember to retrieve your **publicKey** from the Merchant Panel, and define the proper **environment**.

### 3. Display the Cards SDK component <a href="#id-3.-display-the-cards-sdk-component" id="id-3.-display-the-cards-sdk-component"></a>

Now you can display the **CreditCardForm**. In order to do so, you need to send in the **`authToken`** parameter, the value obtained in the **`checkout_token`** of the first step alongside the rest of the parameters (`country`, `onTokenGenerationError` and `onBack`).

![](https://docs.d24.com/~gitbook/image?url=https%3A%2F%2F773174111-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-M792I7hN0PzC-Sx95CP-887967055%252Fuploads%252FWxkTMCemIRIlcNe2a8mv%252FScreenshot%25202024-04-12%2520at%252011.35.19%25E2%2580%25AFAM.png%3Falt%3Dmedia%26token%3D84552e87-74b7-4d9e-8eae-0c53c603e1cb\&width=768\&dpr=4\&quality=100\&sign=2f7dd1d97390499c0ca6d58428a47b4136ec52898cb364a1a20cdc83b70c7a74)

The component will take care of the deposit creation by collecting the payer's credit card, and then processing the transaction with the acquirer.

### 4. Retrieve the Deposit final status <a href="#id-4.-retrieve-the-deposit-final-status" id="id-4.-retrieve-the-deposit-final-status"></a>

Everytime that the deposit changes it's status, you will receive a webhook notification with the `deposit_id` for you to retrieve the Status.

Once the user clicks in the Complete button, we will process the transaction and you will receive such webhook.