Documentation Index Fetch the complete documentation index at: https://docs.caibo.digital/llms.txt
Use this file to discover all available pages before exploring further.
Overview The embedded checkout SDK is framework-agnostic. The snippets below show idiomatic integrations for the three most common frontend frameworks. The pattern is the same in each: lazy-load the SDK script, then call CaiboCheckout.init() with the paymentUrl you constructed using your merchantId, the requestId returned by the Create a Payment Request call, and your apiKey.
import { useEffect , useRef } from 'react' ; function CheckoutButton ({ merchantId , requestId , apiKey , onSuccess , onFailure }) { function loadSdk () { return new Promise (( resolve ) => { if ( window . CaiboCheckout ) { resolve (); return ; } const s = document . createElement ( 'script' ); s . src = 'https://pay.caibo.digital/assets/js/checkout-sdk.js' ; s . onload = resolve ; document . head . appendChild ( s ); }); } async function pay () { await loadSdk (); window . CaiboCheckout . init ({ mode: 'modal' , paymentUrl: `https://pay.caibo.digital/main?merchantId= ${ merchantId } &requestId= ${ requestId } &apiKey= ${ apiKey } ` , onSuccess , onFailure }); } return < button onClick = { pay } > Pay Now </ button > ; }
async pay (): Promise < void > { await this.loadSdk(); (window as any ).CaiboCheckout.init({ mode : 'modal' , paymentUrl : `https://pay.caibo.digital/main?merchantId= ${ this . merchantId } &requestId= ${ this . requestId } &apiKey= ${ this . apiKey } ` , onSuccess : ( data : any ) => this . handleSuccess ( data ), onFailure : ( data : any ) => this . handleFailure ( data ), onCancel : () => this . handleCancel () }); } private loadSdk (): Promise < void > { return new Promise (( resolve ) => { if (( window as any ).CaiboCheckout) { resolve (); return ; } const script = document . createElement ( 'script' ); script . src = 'https://pay.caibo.digital/assets/js/checkout-sdk.js' ; script . onload = () => resolve (); document . head . appendChild ( script ); }); }
async function pay () { await loadSdk ( 'https://pay.caibo.digital/assets/js/checkout-sdk.js' ); window . CaiboCheckout . init ({ mode: 'modal' , paymentUrl: `https://pay.caibo.digital/main?merchantId= ${ merchantId } &requestId= ${ requestId } &apiKey= ${ apiKey } ` , onSuccess : ( data ) => emit ( 'success' , data ), onFailure : ( data ) => emit ( 'failure' , data ) }); } function loadSdk ( src ) { return new Promise (( resolve ) => { if ( window . CaiboCheckout ) { resolve (); return ; } const s = document . createElement ( 'script' ); s . src = src ; s . onload = resolve ; document . head . appendChild ( s ); }); }
Common Patterns
Lazy-load the SDK Inject the script tag only when the user clicks Pay , so first-page-load performance is not affected.
Reuse a single SDK instance The script exposes window.CaiboCheckout once. Guard against duplicate <script> injection by checking for it before loading.
Forward callbacks idiomatically React: pass props. Angular: bind to component methods. Vue: re-emit as component events.
Build the URL on the server For better security, return the fully-formed paymentUrl from your backend after creating the payment request.
Next Steps 
