Components {#uc-integration-methods-components}
===============================================

Components UI {#uc-integration-methods-components_section_rrx_wlh_njc}
----------------------------------------------------------------------

This image shows the `Unified Checkout` components UI.

#### Figure: {#uc-integration-methods-components_fig_tvf_2qh_njc}

`Unified Checkout` Components UI ![](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-int-components-750x400.svg/jcr:content/renditions/original)

Components Integration JavaScript Example {#uc-integration-methods-components_section_iqk_xlh_njc}
--------------------------------------------------------------------------------------------------

```
// ============================================================
// COMPONENTS API - USAGE GUIDE
// ============================================================

// ============================================================
// FLOW 1: AUTO-PROCESSING (autoProcessing: true)
// Mount returns complete result
// ============================================================

// Initialize the Unified Checkout client
const client = await window.VAS.UnifiedCheckout(sessionJWT);

// Create component with auto-processing enabled
const component = client.createComponent('PANENTRY', {
    autoProcessing: true
});

// Mount - automatically processes payment and returns complete result
const paymentResult = await component.mount('#payment-container');
console.log('Payment complete:', paymentResult);

// Clean up
component.destroy();


// ============================================================
// FLOW 2: MANUAL COMPLETE (autoProcessing: false)
// Mount returns transient token, then the merchant can manually complete payment
// ============================================================

// Initialize the Unified Checkout client
const client = await window.VAS.UnifiedCheckout(sessionJWT);

// Create component with auto-processing disabled
const component = client.createComponent('PANENTRY', {
    autoProcessing: false
});

// Mount - returns transient token only
const token = await component.mount('#payment-container');
console.log('Received token:', token);

// Manually complete the payment
const paymentResult = await component.complete(token);
console.log('Payment complete:', paymentResult);

// Clean up
component.destroy();


// ============================================================
// FLOW 3: TRANSIENT TOKEN ONLY (autoProcessing: false, no complete)
// Mount returns transient token only.
// ============================================================

// Initialize the Unified Checkout client
const client = await window.VAS.UnifiedCheckout(sessionJWT);

// Create component with auto-processing disabled
const component = client.createComponent('PANENTRY', {
    autoProcessing: false
});

// Mount - returns transient token only
const token = await component.mount('#payment-container');
console.log('Received token:', token);

// Clean up
component.destroy();


// ============================================================
// LIFECYCLE METHODS (available in all flows)
// ============================================================

// Mount - display the payment form
const result = await component.mount('#payment-container');

// Unmount - hide the form without destroying it
component.unmount();

// Remount - can mount again after unmounting
await component.mount('#payment-container');

// Check mounted state
const mounted = component.isMounted();  // true or false

// Destroy - permanently destroy the component
component.destroy();

// Check destroyed state
const destroyed = component.isDestroyed();  // true or false


// ============================================================
// EVENT HANDLING (optional for all flows)
// ============================================================

// Subscribe to events
component.on('mounted', () => console.log('Form displayed'));
component.on('unmounted', () => console.log('Form hidden'));
component.on('destroyed', () => console.log('Component destroyed'));

// ============================================================
// SUPPORTED PAYMENT TYPES
// ============================================================

client.createComponent('PANENTRY');    // Manual card entry
client.createComponent('CLICKTOPAY');  // Click to Pay
client.createComponent('CHECK');       // Check payment (US & CA Only)
```

{#uc-integration-methods-components_codeblock_y3v_3sh_njc}  
When `CLICKTOPAY` is included in allowedPaymentTypes, use `client.createComponent('CLICKTOPAY')` and not `client.createComponent('PANENTRY')`. `CLICKTOPAY` renders the full `Click to Pay` lookup flow and automatically displays an option to pay with a new card for users without a `Click to Pay` profile. This option ensures that the PAN entry flow is also included. Using only `PANENTRY` bypasses `Click to Pay`, even if it is included in your capture context.  
This table provides an overview of how to use the components integration method:

|       allowedPaymentTypes Method        |                                   Components Use                                   |
|-----------------------------------------|------------------------------------------------------------------------------------|
| `CLICKTOPAY` with or without `PANENTRY` | `createComponent('CLICKTOPAY', ...)`                                               |
| `PANENTRY` only                         | `createComponent(PANENTRY, ...)`                                                   |
| Multiple wallets + `CLICKTOPAY`         | `createCheckout(...)` The Checkout API renders all checkout options automatically. |
[Components Integration Method]

> IMPORTANT
> There is no error if you load ` PANENTRY ` when ` CLICKTOPAY ` is included in your capture context. The component will be mounted successfully, but ` Click to Pay ` is not shown in the UI. This may result in one-time password emails on the server-side but no ` Click to Pay ` UI displaying on the client side.