The response example provided is a shortened version and does not include the full set of fields. For the complete response body details, please refer to the full API specification.
Request Example:
POST https://api.inqud.com/v1/user/crypto-acquiring/{projectId}/checkouts
projectId is the ID of the widget
Header
Value
X-Token-API-Id
{tokenApiId}
X-Token-API-Secret
{tokenApiSecret}
Request Body Example:
{"clientOrderId":"12345676890","expiresAt":"2024-12-01T12:00:00Z","name":"My website balance top up","returnUrl":"https://example.com/return","type":"NO_PRICE"}
Response Example:
{"id":"CCO-81162548-7d14-4b07-b7f5-f2c6eb3e901b","projectId":"CAP-df02b127-6717-4a73-a231-5a57155308a5","projectName":"test","clientOrderId":"12345676890","status":"NEW","name":"My website balance top up","type":"NO_PRICE","returnUrl":"https://example.com/return","acquiringUrl":"https://paycrypto.inqud.com/checkout/CCO-81162548-7d14-4b07-b7f5-f2c6eb3e901b","createdAt":"2023-12-22T09:59:46.882256224Z","expiresAt":"2024-12-01T12:00:00Z"}
The response example provided is a shortened version and does not include the full set of fields. For the complete response body details, please refer to the full API specification.
Request Example:
POST https://api.inqud.com/v1/user/crypto-acquiring/{projectId}/checkouts
{"id":"CCO-81162548-7d14-4b07-b7f5-f2c6eb3e901b","projectId":"CAP-df02b127-6717-4a73-a231-5a57155308a5","projectName":"test","merchantDomain":"paycrypto.inqud.com","clientOrderId":"12345676890","status":"NEW","name":"My website balance top up","type":"SUGGESTED_FIXED_PRICE","returnUrl":"https://example.com/return","acquiringUrl":"https://paycrypto.inqud.com/checkout/CCO-81162548-7d14-4b07-b7f5-f2c6eb3e901b","createdAt":"2023-12-22T09:59:46.882256224Z","expiresAt":"2024-12-01T12:00:00Z"}
The response example provided is a shortened version and does not include the full set of fields. For the complete response body details, please refer to the full API specification.
The id from the server response, which begins with CCO- is the {checkoutId} you will use to initialize the widget.
Note: The {checkoutId} is the identifier for the checkout, which you have created in the previous step.
Embedded widget has a fixed width of 392px
3. Define JavaScript callback [optional]
Provide a JavaScript function to receive checkout status updates and adjust your frontend accordingly.
// Define callback function functionhandleCheckoutStatusChange(event) {constcheckoutId=event.detail.id;conststatus=event.detail.status;console.log(`Callback Invoked: checkoutId=${checkoutId}, status=${status}`);// Handle the status change according to your business logicif (status ==='SUCCESS') {// Payment was successful, update the frontend accordingly } elseif (status ==='CONFLICT') {// Payment is in conflict, update the frontend accordingly }}// Wait for the widget to loaddocument.addEventListener('DOMContentLoaded',function() {constwidget=document.querySelector('app-widget');// Register "handleCheckoutStatusChange()" for receiving callbacksif (widget) {widget.addEventListener('statusChanged', handleCheckoutStatusChange); }});
In this example, the handleCheckoutStatusChange function is called whenever the status of the checkout changes. The checkoutId and status are then extracted from the event.details object and used to update the frontend according to the business logic of the merchant.
The widget variable is initialized to the app-widget element which represents the crypto widget. An event listener is then added to the widget that listens for status changes. When a status change occurs, the handleCheckoutStatusChange function is called with the event object as an argument.
<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>Payment Widget Test Page</title> <scriptsrc="https://paycrypto.inqud.com/widget.js"defer></script></head><body> <h1>Payment Widget Test</h1> <app-widgetid="YOUR_CHECKOUT_ID"></app-widget> <script>// Define callback function functionhandleCheckoutStatusChange(event) {constcheckoutId=event.detail.id;conststatus=event.detail.status;console.log(`Callback Invoked: checkoutId=${checkoutId}, status=${status}`);// Handle the status change according to your business logicif (status ==='SUCCESS') {// Payment was successful, update the frontend accordinglyconsole.log('Payment Successful'); } elseif (status ==='CONFLICT') {// Payment is in conflict, update the frontend accordinglyconsole.log('Payment Conflict'); } }// Wait for the widget to loaddocument.addEventListener('DOMContentLoaded',function() {constwidget=document.querySelector('app-widget');// Register "handleCheckoutStatusChange()" for receiving callbacksif (widget) {widget.addEventListener('statusChanged', handleCheckoutStatusChange); } }); </script></body></html>
4. Receive a web-hook notification related to the checkout
