"use client"; import { useRouter } from 'next/navigation' import {AirwallexCartNumberElementType} from "@/lib/Airwallex/airwallexInit"; import PaypalButton from "./PaymentButton/PaypalButton"; import { overlayLoading } from "@/components/theme/ui/kernel/loading/api"; import { PlaceOrderFunction,KlarnaOtherData } from "@/types/checkout/type"; import { useCustomToast } from "@/utils/hooks/useToast"; import { usePlaceOrder } from "@/utils/hooks/usePlaceOrder"; import { confirmDialog } from "@/components/theme/ui/kernel/confirm/api"; import { useConfig } from '@utils/hooks/useConfig'; import KlarnaButton from "./PaymentButton/KlarnaButton"; export default function CheckoutPlaceOrder({ paymentMethod, clickPlaceOrder, validateCheckout,// 校验运输方式,地址 }: { paymentMethod: string; clickPlaceOrder: PlaceOrderFunction; validateCheckout: () => Promise; }) { const router = useRouter(); const {store} = useConfig(); const { showToast } = useCustomToast(); const { createPaymentCallback } = usePlaceOrder(); const currentCurrencyCode = store.currentCurrency; const paypalCreateOrder = async () => { overlayLoading.start(); const valid = await validateCheckout(); if(!valid) { overlayLoading.stop(); return { error: true, msg: '', orderId: '', webOrderId: '' }; } // 校验通过 const placeOrderRes = await clickPlaceOrder(); if(placeOrderRes.data !== null) { return { error: false, msg: '', orderId: placeOrderRes.data.gatewayOrderId, webOrderId: placeOrderRes.data.orderId }; } else { return { error: true, msg: '', orderId: '', webOrderId: '' }; } }; const airwallexPlaceOrder = async () => { overlayLoading.start(); const valid = await validateCheckout(); if(!valid) { overlayLoading.stop(); return; } const placeOrderRes = await clickPlaceOrder({ paymentSuccessUrl: window.location.origin + '/paymentresult/result' }); overlayLoading.stop(); if(placeOrderRes.data !== null) { window.location.href = placeOrderRes.data.gatewayOrderId; } }; const cardAirwallexPlaceOrder = async () => { overlayLoading.start(); const valid = await validateCheckout(); if(!valid) { overlayLoading.stop(); return; } const placeOrderRes = await clickPlaceOrder(); if(placeOrderRes.data !== null && placeOrderRes.otherData !== null) { const webOrderId = placeOrderRes.data.orderId; const cardNumberElement = placeOrderRes.otherData; const paymentIntentIdClientSecret = placeOrderRes.data.gatewayOrderId.split(':'); const paymentIntentId = paymentIntentIdClientSecret[0]; const paymentIntentClientSecret = paymentIntentIdClientSecret[1]; cardNumberElement.confirm({ intent_id: paymentIntentId, client_secret: paymentIntentClientSecret, }).then((result) => { overlayLoading.stop(); console.log('cardNumberElement.confirm result ---- ', result); // 支付成功 跳转页面 router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=success'); }).catch((error) => { overlayLoading.stop(); console.log('cardNumberElement.confirm error ---- ', error); // 支付失败 router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=failure'); }); } }; const afterpayPlaceOrder = async () => { if(window.AfterPay) { overlayLoading.start(); const valid = await validateCheckout(); if(!valid) { overlayLoading.stop(); return; } const placeOrderRes = await clickPlaceOrder({ paymentSuccessUrl: window.location.origin + '/paymentresult/result', paymentCancelUrl: window.location.origin + '/paymentresult/result' }); if(placeOrderRes.data !== null) { const afterpayToken = placeOrderRes.data.gatewayOrderId; const webOrderId = placeOrderRes.data.orderId; let countryCode = "US"; if(currentCurrencyCode === "CAD") { countryCode = "CA"; } else if(currentCurrencyCode === "AUD") { countryCode = "AU"; } else if(currentCurrencyCode === "NZD") { countryCode = "NZ"; } else if(currentCurrencyCode === "GBP") { countryCode = "GB"; } // if(paymentMethod === "clearpay") { // countryCode = "GB"; // } window.AfterPay.initialize({countryCode: countryCode}); // To avoid triggering browser anti-popup rules, the AfterPay.open() // function must be directly called inside the click event listener window.AfterPay.open(); // If you don't already have a checkout token at this point, you can // AJAX to your backend to retrieve one here. The spinning animation // will continue until `AfterPay.transfer` is called. // If you fail to get a token you can call AfterPay.close() window.AfterPay.onComplete = async (event) => { console.log('window.AfterPay.onComplete event ---- ', event); const status: "success" | "cancel" | "failure" = event.data.status === "SUCCESS" ? 'success' : 'cancel'; const resCallback = await createPaymentCallback({ orderId: Number(webOrderId), gatewayOrderId: event.data.orderToken, status: status, }); overlayLoading.stop(); if (event.data.status == "SUCCESS") { // The customer confirmed the payment schedule. // The token is now ready to be captured from your server backend. // 跳转结果页 成功 if(!resCallback.error) { // 后端capture成功,跳转到成功落地页 router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=success'); } else { // capture 失败,提示错误 confirmDialog({ title: "Somthing Wrong", content: resCallback.msg + " Please contact customer service." + " OrderId: "+ webOrderId, noCancel: true, }).then(() => { router.replace('/'); }); } } else { // The customer cancelled the payment or closed the popup window. // 跳转结果页 取消 router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=cancel'); } } window.AfterPay.transfer({token: afterpayToken}); } } else { showToast("Please wait for the Afterpay to load completely.","warning"); } }; const klarnaPlaceOrder = async () => { overlayLoading.start(); const valid = await validateCheckout(); if(!valid) { overlayLoading.stop(); return; } const placeOrderRes = await clickPlaceOrder({ paymentSuccessUrl: window.location.origin + '/paymentresult/result', paymentCancelUrl: window.location.origin + '/paymentresult/result' }); if(placeOrderRes.data !== null && placeOrderRes.otherData) { const klarnaToken = placeOrderRes.data.gatewayOrderId; const webOrderId = placeOrderRes.data.orderId; const {billingAddress, shippingAddress} = placeOrderRes.otherData; const klarnaClientToken = klarnaToken.split("|")[0]; const klarnaVerifyToken = klarnaToken.split("|")[1]; window.Klarna.Payments.init({ client_token: klarnaClientToken, }); //klarna-widget-container window.Klarna.Payments.load({ container: '#klarna-widget-container', }, (response) => { if(!response.show_form) { // klarna不可用 // 跳转结果页 router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=failure'); } else { window.Klarna.Payments.authorize( {}, { billing_address: { given_name: billingAddress.firstName, family_name: billingAddress.lastName, email: billingAddress.email, phone: billingAddress.phone, street_address: billingAddress.address, postal_code: billingAddress.postcode, city: billingAddress.city, country: billingAddress.country }, shipping_address: { given_name: shippingAddress.firstName, family_name: shippingAddress.lastName, email: shippingAddress.email, street_address: shippingAddress.address, postal_code: shippingAddress.postcode, city: shippingAddress.city, phone: shippingAddress.phone, region: shippingAddress.state, country: shippingAddress.country }, // customer: { // date_of_birth: "1941-03-21", // }, }, async function(res) { console.log('klarna authorize res ---- ',res); if(res.approved && res.authorization_token) { // 可以支付 const resCallback = await createPaymentCallback({ orderId: Number(webOrderId), gatewayOrderId: res.authorization_token, verifyToken: klarnaVerifyToken, status: "success", }); // 跳转结果页 overlayLoading.stop(); if(!resCallback.error) { router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=success'); } else { // callback 失败,提示错误 confirmDialog({ title: "Somthing Wrong", content: resCallback.msg + " Please contact customer service." + " OrderId: "+ webOrderId, noCancel: true, }).then(() => { router.replace('/'); }); } } else { // if(res.show_form) { // klarna可用,但是有报错 // } else { // // klarna 不可用 跳转结果页 // } overlayLoading.stop(); router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=failure'); } } ); } }); } }; return ( <>
{paymentMethod === 'paypal_smart_button' && } {(paymentMethod === 'awxklarna' || paymentMethod === 'awxafterpay') && } {paymentMethod === 'airwallex' && } {(paymentMethod === 'afterpay' || paymentMethod === 'clearpay') && } {paymentMethod === 'klarna' && }
); }