# Card

split
## Layout

Split Card
split
Combine Card
combine
Card has two layouts:

- **Split**: Card Number, Expiry Date, and CVV are displayed separately.
- **Combine**: Card Number, Expiry Date, and CVV are displayed together.


## Example

npm

```javascript
// Import Card
import { Card } from '@paykka/card-checkout-ui'

// Initialize the component instance by passing parameters through the create method
const checkoutCard = paykkaCheckout.create(Card, {
  cardInfoLayout: 'split',
  onSubmit: formValidateError => {
    if (!formValidateError) {
      console.log('Form validation passed, proceed to payment')
    }
  },
  onSuccess: returnUrl => {
    console.log('Payment successful, redirect to:', returnUrl)
  },
  onError: error => {
    console.log('Payment failed, error info:', error)
  }
})

const container = document.createElement('div')
checkoutCard.mount(container)

const checkoutCardField = document.querySelector('#checkoutCardField')

// Insert container into the page
checkoutCardField && checkoutCardField.appendChild(container)
```

CDN

```javascript
// Import Card
const { Card } = PayKKaCardCheckoutUI

// Initialize the component instance by passing parameters through the create method
const checkoutCard = paykkaCheckout.create(Card, {
  cardInfoLayout: 'split',
  onSubmit: formValidateError => {
    if (!formValidateError) {
      console.log('Form validation passed, proceed to payment')
    }
  },
  onSuccess: returnUrl => {
    console.log('Payment successful, redirect to:', returnUrl)
  },
  onError: error => {
    console.log('Payment failed, error info:', error)
  }
})

const container = document.createElement('div')
checkoutCard.mount(container)

const checkoutCardField = document.querySelector('#checkoutCardField')

// Insert container into the page
checkoutCardField && checkoutCardField.appendChild(container)
```

## Attributes

### CardProps

Passed when calling the `create` method to create Card.

| **Name**  | **Description**  | **Type** | **Default**  |
|  --- | --- | --- | --- |
| cardInfoLayout | Defines the layout display of card sensitive information form. | `split | combine` | `split` |
| showCardBrands | Whether to display supported card brand icons. | `boolean` | `true` |
| styles | Custom styles.- Currently, you can define the [styles](#elementstylesconfig) of input in the iframe.
- Other styles can be overridden directly by writing CSS.

 | `ElementStylesConfig` | `undefined` |
| showEmail | Whether to display email.- If set to `true` and email is already passed when creating the checkout, it will be displayed as disabled.
- If set to `false` and email is not passed when creating the checkout, it will be displayed normally.

 | `boolean` | `false` |
| showAddress | Whether to display address.- If set to `true` and address is already passed when creating the checkout, it will be displayed normally.
- If set to `false` and address is not passed when creating the checkout, it will be displayed normally.

 | `boolean` | `false` |
| onSubmit | Form submission callback, triggered after clicking the payment button.- `formValidateError` is the error information when form validation fails.

 | `(formValidateError?: Record<string, FormValidateError[]>) => void` | `undefined` |
| onSuccess | Callback after successful payment.- `PaymentSuccessData` contains the information returned after successful payment, please [refer to](#paymentsuccessdata).
- This callback is also triggered when risk control is pending.

 | `(data: PaymentSuccessData) => void` | `undefined` |
| onError | Callback after payment failure, can resubmit the form for payment.- `error` is a `PayKKaError` instance, typically containing the following properties:
  - `type`: Error type.
  - `message`: Error message.
  - `code`: Error code, when an API error occurs, it will return a specific [error code](/payments/docs/developer-resources/transanction-error-code).

 | `(error: PayKKaError) => void` | `undefined` |
| onTimeout | Callback when payment times out, can resubmit the form for payment. | `() => void` | `undefined` |
| onExpired | Callback when the checkout counter has expired during payment, cannot pay again. | `() => void` | `undefined` |


### CardRef

Methods and properties exposed by Card, can be called by the Card instance created via the `create` method, e.g.: `checkoutCard.ref.payment()`.

| **Name**  | **Description** | **Type** |
|  --- | --- | --- |
| payment | Make a payment, enabled when the payment button is **not visible**. See [usage](/payments/docs/developer-resources/checkout-ui-component#custom-payment-button). | `() => void` |


Below is an explanation of some data types:

### PaymentSuccessData

Information returned after successful payment.


```typescript
interface PaymentSuccessData {
  /** URL that can be redirected to after successful payment */
  returnUrl?: string
}
```

### ElementStylesConfig

Custom form element styles. Currently, you can define the styles of input elements in the iframe. Styles of form elements outside the iframe can be overridden directly by writing CSS.


```typescript
interface ElementStylesConfig {
  /** Styles for iframe input elements */
  input?: {
    /** Default style */
    base?: Partial<CSSStyleDeclaration>
    /** Style when validation passes */
    valid?: Partial<CSSStyleDeclaration>
    /** Style when validation fails */
    invalid?: Partial<CSSStyleDeclaration>
    /** Style when element is focused */
    focus?: Partial<CSSStyleDeclaration>
    /** Placeholder style */
    placeholder?: {
      /** Default style */
      base?: Partial<CSSStyleDeclaration>
      /** Style when element is focused */
      focus?: Partial<CSSStyleDeclaration>
    }
    /** Style when mouse hovers over the element */
    hover?: Partial<CSSStyleDeclaration>
  }
}
```

Example:


```typescript
const cardProps = {
  // ...
  styles: {
    input: {
      base: {
        color: 'black'
      },
      valid: {
        color: 'green'
      },
      invalid: {
        color: 'red'
      },
      focus: {
        color: 'blue'
      },
      placeholder: {
        base: {
          color: 'gray'
        },
        focus: {
          color: 'black'
        }
      },
      hover: {
        color: 'pink'
      }
    }
  }
}
```