HaSSO 支付网关扩展
HASAO (Hemen Al Sonra Öde / Buy Now Pay Later) 数据汇总 paketi .
安装
您可以使用以下命令安装最新插件的扩展:
npx @akinon/projectzero@latest --plugins
使用量
扩展安装后,您可以轻松地将HASO支付网关整合到您的应用程序中. 举个例子如何使用.
-
导航到
src/app/[commerce]/[locale]/[currency]/payment-gateway/haso/目录. -
创建名为的文件
page.tsx并包括以下代码:
import { HasoPaymentGateway } from '@akinon/pz-haso';
const HasoGateway = async ({
searchParams: { sessionId },
params: { currency, locale }
}: {
searchParams: Record<string, string>;
params: { currency: string; locale: string };
}) => {
return (
<HasoPaymentGateway
sessionId={sessionId}
currency={currency}
locale={locale}
extensionUrl={process.env.HASO_EXTENSION_URL}
hashKey={process.env.HASO_HASH_KEY}
/>
);
};
export default HasoGateway;
自定义 HASO 组件
您可以使用 renderer 道具 (英语). 这使得您可以为组件的不同部分提供自定义渲染功能.
自定义窗体组件
import { HasoPaymentGateway } from '@akinon/pz-haso';
const HasoGateway = async ({
searchParams: { sessionId },
params: { currency, locale }
}: {
searchParams: Record<string, string>;
params: { currency: string; locale: string };
}) => {
return (
<HasoPaymentGateway
sessionId={sessionId}
currency={currency}
locale={locale}
extensionUrl={process.env.HASO_EXTENSION_URL}
hashKey={process.env.HASO_HASH_KEY}
renderer={{
formComponent: {
renderForm: ({
extensionUrl,
sessionId,
context,
csrfToken,
autoSubmit
}) => (
<div className="custom-haso-form-wrapper">
<h3 className="text-lg font-semibold mb-4">HASO Ödeme</h3>
<p className="mb-4">
HASO ödeme sayfasına yönlendiriliyorsunuz...
</p>
<form
action={`${extensionUrl}/form-page/?sessionId=${sessionId}`}
method="post"
encType="multipart/form-data"
id="haso-custom-form"
className="hidden"
>
<input type="hidden" name="csrf_token" value={csrfToken} />
<input
type="hidden"
name="data"
value={JSON.stringify(context)}
/>
{autoSubmit && (
<script
dangerouslySetInnerHTML={{
__html:
"document.getElementById('haso-custom-form').submit()"
}}
/>
)}
</form>
<div className="loader w-12 h-12 border-4 border-t-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
</div>
)
},
paymentGateway: {
renderContainer: ({ children }) => (
<div className="p-8 max-w-lg mx-auto bg-white rounded-lg shadow-md">
{children}
</div>
)
}
}}
/>
);
};
export default HasoGateway;
自定义渲染器 API
渲染器道具接受一个具有下列结构的物体:
interface HasoRendererProps {
formComponent?: {
renderForm?: (props: {
extensionUrl: string;
sessionId: string;
context: any;
csrfToken: string;
autoSubmit: boolean;
}) => React.ReactNode;
renderLoading?: () => React.ReactNode;
renderError?: (error: string) => React.ReactNode;
};
paymentGateway?: {
renderContainer?: (props: { children: React.ReactNode }) => React.ReactNode;
};
}
配置
将这些变量添加到您的 .env 文件 :
HASO_EXTENSION_URL=<your_extension_url>
HASO_HASH_KEY=<your_hash_key>
数据汇总流程
本套件执行HASO付款的数据汇总模式:
1. start-session → redirectUrl: /payment-gateway/haso/?sessionId=XXX
2. HasoPaymentGateway → Collects data (preOrder, addresses, basket)
3. FormComponent → POST → Extension /form-page/?sessionId=XXX (with SHA-512 hash)
4. Extension → Creates Provider URL → Payment screen
5. Payment completed → return-url → Merchant Store
已收集数据
该软件包从取出时收集以下数据:
- 顺序项目:产品名称、SKU、数量、单价、总额
- 账单地址:城市、国家、名称、地址线、电话、电子邮件、邮政编码
- 航运地址:城市、国家、名称、地址线、电话、电子邮件、邮政编码
- 客户信息: 姓名、电话、电子邮件、身份号码
- 数额: 总额、运费、货币
警卫
所有数据都用SHA-512散列发送以进行验证:
- 使用 :
salt | sessionId | hashKey - 扩展处理前验证散列
API 路由
检查可用性 API
要进行HASO支付可用性检查, 您需要创建 API 路径 。 创建文件于 src/app/api/haso-check-availability/route.ts 内容如下:
import { POST } from '@akinon/pz-haso/src/pages/api/check-availability';
export { POST };
API 端点处理检查 HASO 给定的付款的可用性 :
- 电话号码
- 顺序金额
- 电子邮件( 可选)
- 身份号码( 可选)
端点使用散列式安全措施自动验证请求和响应.
使用检查HasoAvailable 突变
扩展提供了Redux突变钩,您可以用来检查HASO支付可用性. 以下是如何执行的一个例子:
import { useCheckHasoAvailabilityMutation } from '@akinon/pz-haso';
const YourComponent = () => {
const [checkHasoAvailability] = useCheckHasoAvailabilityMutation();
const [isHasoAvailable, setIsHasoAvailable] = useState(false);
useEffect(() => {
const checkAvailability = async () => {
try {
const response = await checkHasoAvailability({
amount: '1000.00',
phone: '+905551234567',
email: '[email protected]',
identity_number: '12345678901' // TC Kimlik No (optional)
}).unwrap();
setIsHasoAvailable(response.is_available);
} catch (error) {
console.error('Error checking HASO availability:', error);
setIsHasoAvailable(false);
}
};
checkAvailability();
}, [checkHasoAvailability]);
return (
// Your component JSX
);
};
变异返回具有以下属性的对象:
is_available:布尔表示是否可用 HASO 付款limit: 数字表示可用的信用限额(可选)salt: 用于散列校验的字符串hash: 用于响应验证的字符串