Is there a sandbox environment for testing?

Yes, the skill includes configurations for both production and sandbox environments, allowing you to test the full checkout flow without processing real transactions.

Does the Drop-In UI require PCI compliance?

No, because the payment sensitive data is handled within HitPay's secure modal overlay, it minimizes your PCI scope significantly.

What payment methods are best for the Drop-In UI?

The Drop-In UI is optimized for QR-based methods like PayNow, GrabPay, and ShopeePay. For credit cards, Apple Pay, or Google Pay, the redirect flow is recommended to ensure 3DS authentication works correctly.

Should I rely on the onSuccess callback for order fulfillment?

No, the onSuccess callback is client-side and can be spoofed. You should always verify payment status via server-side webhooks before fulfilling any orders.

Can I use this skill with Next.js?

Yes, the skill provides specific implementation patterns for Next.js, including using the next/script component and handling server-side payment requests via API routes.

HitPay Drop-In UI

Name: HitPay Drop-In UI
Author: hit-pay

byhit-pay

0•

E-commerce Solutions

Embeds a customizable, modal-based checkout UI into web applications for seamless Southeast Asian payment processing.

The HitPay Drop-In UI skill enables developers to quickly integrate an embedded checkout overlay into their web projects using HitPay.js. It is specifically optimized for QR-based payment methods common in Southeast Asia, such as PayNow, GrabPay, and ShopeePay. By providing a pre-built modal interface, it eliminates the need for complex custom UI development while maintaining a low PCI compliance scope. This skill guides developers through script inclusion, server-side payment request creation, and client-side event handling, ensuring a secure and efficient checkout experience for both production and sandbox environments.

Key Features

01Zero-PCI scope implementation for secure payment handling

02Client-side event callbacks for success, error, and closure handling

03Next.js and React-ready patterns for modern web frameworks

040 GitHub stars

05Modal-based checkout overlay via HitPay.js integration

06Optimization for QR payment methods including PayNow and GrabPay

Use Cases

01Integrating Southeast Asian QR payment methods without building custom forms

02Implementing a quick checkout popup that avoids full-page redirects

03Adding an embedded payment modal to a Next.js or React application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hit-pay/claude-code-plugin drop-in-ui

For use in Claude.ai and ChatGPT

Key Features

01Zero-PCI scope implementation for secure payment handling

02Client-side event callbacks for success, error, and closure handling

03Next.js and React-ready patterns for modern web frameworks

040 GitHub stars

05Modal-based checkout overlay via HitPay.js integration

06Optimization for QR payment methods including PayNow and GrabPay

Use Cases

01Integrating Southeast Asian QR payment methods without building custom forms

02Implementing a quick checkout popup that avoids full-page redirects

03Adding an embedded payment modal to a Next.js or React application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hit-pay/claude-code-plugin drop-in-ui

For use in Claude.ai and ChatGPT