# Fragments all-in-one

### Deposits with Fragments all-in-one

{% stepper %}
{% step %}

#### Create a deposit request

You will need to create a deposit request to our OneShot API, taking into care the following considerations:

* [x] sending all the mandatory payer information
* [x] indicating that is a credit/debit card payment by sending `CC` as `payment_method` 
* [x] send the parameter **`token_requested`** with value **`true` .**

{% tabs %}
{% tab title="Example Request" %}

<pre class="language-sh"><code class="lang-sh">curl -L \
  --request POST \
<strong>  --url 'https://api-stg.pandablue.com/v3/deposits' \
</strong>  --header 'Content-Type: application/json' \
  --header 'X-Date: 2025-07-17T13:13:15.442Z' \
  --header 'X-Login: text' \
  --header 'Authorization: text' \
  --data '{
    "invoice_id" : "1000000001",
    "amount": "1000",
    "country": "MX",
    "currency": "MXN",
    "payer": {
        "id": "11",
        "document": "CURP4321TEST",
        "first_name": "Ricardo",
        "last_name": "Carlos",
        "email": "juanCarlos@hotmail.com"
    },
<strong>    "payment_method": "CC",
</strong><strong>    "token_requested":true
</strong>    "client_ip": "123.123.123.123",
    "back_url": "https://www.mercahnt.com/deposit_cancelled",
    "success_url": "https://www.merchant.com/deposit_completed",
    "error_url": "https://www.merchant.com/deposit_error",
    "notification_url": "https://www.pandablue.com/pandablue/notify"
}'
</code></pre>

{% endtab %}

{% tab title="Example response" %}

<pre class="language-json"><code class="lang-json">{
    "checkout_type": "ONE_SHOT",
    "redirect_url": "https://pay-stg.depositcheckout.com/validate/W9H0knNO7iu14F2nMe1Dtv6eMKJw2yvx",
    "deposit_id": 301623200,
    "user_id": "11",
    "merchant_invoice_id": "1000000001",
    "payment_info": {
        "type": "CREDIT_CARD",
        "payment_method": "CC",
        "payment_method_name": "Generic CC payment method",
        "amount": 1000.0,
        "currency": "MXN",
        "expiration_date": "2025-07-17 18:02:28",
        "created_at": "2025-07-17 17:42:26"
    },
<strong>    "checkout_token": "W9H0knNO7iu14F2nMe1Dtv6eMKJw2yvx"
</strong>}
</code></pre>

{% endtab %}
{% endtabs %}

In the response you will receive the **`checkout_token`** associated to the transaction that was just generated.
{% endstep %}

{% step %}

#### Instantiate Fragments SDK

At this point you have to instantiate Fragments, which you already have installed in your site.\
For more information about instantiation go to this [link](https://docs.pandablue.com/guides/solutions/fragments-sdk/fragments-all-in-one#build-the-solution).\
Remember to retrieve your **`publicKey`** from the Merchant Panel, and define the proper **`environment`**.
{% endstep %}

{% step %}

#### Render Fragments all-in-one component

Now you can display the **CreditCardForm**.\
The component requires a few key properties to function:

* `authToken`: A unique token generated from your backend by the Deposit Creation Endpoint.
* `country`: The two-letter country iso-code (e.g., "BR").
* Callback functions to handle different outcomes of the payment process.

**Basic example**

Here is a simple example of how to render the form:

```html
<CreditCardForm
  authToken="YOUR_CHECKOUT_TOKEN"
  country="MX"
  onSuccess={handlePaymentSuccess}
  onError={handlePaymentError}
  onBack={handleGoBack}
  onTokenGenerationError={handleTokenError}
  messages={handleMessages}
/>
```

And Fragments will be displayed.&#x20;

<figure><img src="https://content.gitbook.com/content/f92vedEnowdVWbjM4Cmd/blobs/F3qEzokYzGIBOR8ts6Ct/SDK%20UI.png" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Retrieve the Deposit final status

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

```json
{
  "deposit_id": 301623200
}
```

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

{% hint style="info" %}

### For more information on this point visit <a href="../../notifications" class="button primary" data-icon="message-medical">Notifications</a>.

{% endhint %}
{% endstep %}
{% endstepper %}