Fragments all-in-one

Deposits with Fragments all-in-one

1

Create a deposit request

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

• sending all the mandatory payer information

• indicating that is a credit/debit card payment by sending CC as payment_method

• send the parameter token_requested with value true .

Example Request

curl -L \
  --request POST \
  --url 'https://api-stg.directa24.com/v3/deposits' \
  --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": "[email protected]"
    },
    "payment_method": "CC",
    "token_requested":true
    "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.d24.com/d24/notify"
}'

Example response

{
    "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"
    },
    "checkout_token": "W9H0knNO7iu14F2nMe1Dtv6eMKJw2yvx"
}

In the response you will receive the checkout_token associated to the transaction that was just generated.

2

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. Remember to retrieve your publicKey from the Merchant Panel, and define the proper environment.

3

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:

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

And Fragments will be displayed.

4

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.

{
  "deposit_id": 301623200
}

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

For more information on this point visit Notifications.