PayKKa Checkout UI Component

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

How It Works

Preparation

You can install the PayKKa Checkout UI npm package, or embed it into HTML via CDN:

npm i @paykka/card-checkout-ui

import '@paykka/card-checkout-ui/style.css'

Creating PayKKaCheckout Instance

Parameters and events that can be passed when creating a PayKKaCheckout instance:

Here's an example of usage:

import { PayKKaCheckout } from '@paykka/card-checkout-ui'
// Create PayKKaCheckout instance
const paykkaCheckout = new PayKKaCheckout({
  sessionId: 'xxx',
  clientKey: 'xxx',
  env: 'eu',
  locale: 'en-GB',
  hidePaymentButton: false,
  threeDSFrame: {
    modalWidth: '350px',
    modalHeight: '500px',
  },
  onPaymentMethodsReady: (methods) => {
    console.log('Supported payment methods', methods)
  },
  onInitError: (error) => {
    console.log('Initialization error', error)
  },
  onSubmit: (formValidateError) => {
    console.log('Form submission global event', formValidateError)
  },
  onSuccess: ({ returnUrl }) => {
    console.log('Payment success global event', returnUrl)
  },
  onTimeout: () => {
    console.log('Payment timeout global event')
  },
  onExpired: () => {
    console.log('Session expired or invalid global event')
  },
  onError: () => {
    console.log('Payment failure global event')
  }
})

Detailed Explanation

Custom Payment Button

hidePaymentButton is used to configure whether to hide PayKKa's built-in payment button.

If you want to use your own payment button, you can set hidePaymentButton to true to hide PayKKa's payment button. After users click your payment button, you can call the payment method exposed by the component instance to process the payment.

Here's an example using the Card component:

<button onclick="handleClickPayment()">Pay</button>

// Assuming we have initialized the checkout and set hidePaymentButton to true
import { Card } from '@paykka/card-checkout-ui'

// Create Card component
const CheckoutCard = paykkaCheckout.create(Card, {
  // card configuration
})

const handleClickPayment = () => {
  // After clicking the payment button, call the payment method to process payment
  CheckoutCard.ref.payment()
}

Fraud Detection

For fraud detection (FraudDetection) configuration, please refer to Fraud Detection SDK.

Error Codes

See Transaction Error Codes

Creating Component Instance

After creating the checkout instance, you can create components. For example, let's say we need to import the Card component:

Step 1: Create DOM Element

Create a DOM element in your checkout page that will be used to render the Component.

<div id="card-container"></div>

Step 2: Import Component and Build Instance

import { PayKKaCheckout, Card } from '@paykka/card-checkout-ui'

// Steps to create PayKKaCheckout instance omitted here

const checkoutCard = paykkaCheckout.create(Card, {
  // Parameters required for Card component
})

Step 3: Mount Component

const container = document.querySelector('#card-container')
checkoutCard.mount(container)

Using Sandbox Environment

If you want to integrate the checkout in a sandbox environment, follow these steps.

1. If using CDN import, you need to use the sandbox environment link (for npm method, proceed to the next step):

<link href="https://checkout-sandbox.aq.paykka.com/cp/style.css" rel="stylesheet" />
<script src="https://checkout-sandbox.aq.paykka.com/cp/card-checkout-ui.js"></script>

2. When creating the checkout, set env to sandbox:

const paykkaCheckout = new PayKKaCheckout({
  sessionId: 'xxx',
  clientKey: 'xxx',
  env: 'sandbox'
  // ...other options
})