@godaddy/react
Version:
The `createCheckoutSession` function creates a new checkout session with GoDaddy's commerce API.
229 lines (217 loc) • 6.92 kB
JavaScript
import { O as PaymentMethodType, _ as useConfirmCheckout, g as PaymentProvider, m as usePoyntCollect, o as useCheckoutContext, rt as useGoDaddyContext, y as useLoadPoyntCollect } from "./checkout-CCruxHvk.js";
import { k as GraphQLErrorWithCodes } from "./utils-DWBfAHfx.js";
import { useLayoutEffect, useRef, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/checkout/payment/payment-methods/credit-card/godaddy.tsx
function GoDaddyCreditCardForm() {
const { t } = useGoDaddyContext();
const { session } = useCheckoutContext();
const { setCollect, setIsLoadingNonce } = usePoyntCollect();
const { isPoyntLoaded } = useLoadPoyntCollect();
const { godaddyPaymentsConfig, setCheckoutErrors } = useCheckoutContext();
const [error, setError] = useState("");
const confirmCheckout = useConfirmCheckout();
const options = {
iFrame: {
width: "100%",
height: "115px"
},
displayComponents: {
labels: true,
firstName: false,
lastName: false,
zipCode: false,
line1: false,
city: false,
territory: false,
cvcIcon: true
},
customCss: {
inputLabel: "display: none",
inputDefault: `
display: flex;
height: 48px;
width: 100%;
border-radius: 0.4375rem; /* var(--radius-md): calc(0.625rem - 2px) ≈ 0.4375rem */
border: 1px solid oklch(0.9 0.025 245);
background: oklch(1 0 0);
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 14px;
line-height: 1.5;
color: oklch(0.13 0 0);
font-family: "GD Sherpa", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
transition: color 0.2s, background 0.2s, border-color 0.2s;
&::placeholder {
color: oklch(0.556 0 0);
}
&:focus-visible {
outline: none;
border-color: oklch(0.57 0.22 255);
box-shadow: 0px 0px 0px 2px oklch(0.57 0.22 255) inset;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
/* File input styles */
&::file-selector-button {
border: 0;
background: transparent;
font-size: 14px;
font-weight: 500;
color: oklch(0.13 0 0);
}
`,
cardIcon: `
left: auto !important;
right: 8px;
width: 30px;
height: 20px;
`,
cvcIcon: `
left: auto !important;
right: 8px;
width: 30px;
height: 20px;
`,
container: `
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
`,
rowCardNumber: `
grid-column: 1 / span 2;
padding: 0;
margin: 0;
`,
rowExpiration: `
grid-column: 1;
padding: 0;
order: 4;
`,
rowCVV: `
grid-column: 2;
padding: 0;
order: 5;
`,
input: { cardPayment: {
cardNumber: `
padding: 16px;
padding-left: 16px !important;
padding-right: 38px;
display: flex;
height: 48px;
width: 100%;
font-size: 14px;
border-radius: 0.4375rem; /* var(--radius-md): calc(0.625rem - 2px) ≈ 0.4375rem */
border: 1px solid oklch(0.9 0.025 245);
background: oklch(1 0 0);
line-height: 1.5;
color: oklch(0.13 0 0);
font-family: "GD Sherpa", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
transition: color 0.2s, background 0.2s, border-color 0.2s;
&::placeholder {
color: oklch(0.556 0 0);
}
&:focus-visible {
outline: none;
border-color: oklch(0.57 0.22 255);
box-shadow: 0px 0px 0px 2px oklch(0.57 0.22 255) inset;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
`,
cvc: `
padding: 16px;
padding-left: 16px !important;
padding-right: 38px;
display: flex;
height: 48px;
width: 100%;
font-size: 14px;
border-radius: 0.4375rem; /* var(--radius-md): calc(0.625rem - 2px) ≈ 0.4375rem */
border: 1px solid oklch(0.9 0.025 245);
background: oklch(1 0 0);
line-height: 1.5;
color: oklch(0.13 0 0);
font-family: "GD Sherpa", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
transition: color 0.2s, background 0.2s, border-color 0.2s;
&::placeholder {
color: oklch(0.556 0 0);
}
&:focus-visible {
outline: none;
border-color: oklch(0.57 0.22 255);
box-shadow: 0px 0px 0px 2px oklch(0.57 0.22 255) inset;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
`
} }
}
};
const collect = useRef(null);
useLayoutEffect(() => {
if (!isPoyntLoaded || !godaddyPaymentsConfig || collect.current || !godaddyPaymentsConfig?.businessId && !session?.businessId) return;
collect.current = new window.TokenizeJs({
businessId: godaddyPaymentsConfig?.businessId || session?.businessId,
storeId: session?.storeId,
channelId: session?.channelId,
applicationId: godaddyPaymentsConfig?.appId
});
collect?.current?.on("ready", () => {
setCollect(collect.current);
});
collect?.current?.mount("gdpay-card-element", document, options);
collect?.current?.on("nonce", async (event) => {
const nonce = event?.data?.nonce;
if (nonce) try {
await confirmCheckout.mutateAsync({
paymentToken: nonce,
paymentType: PaymentMethodType.CREDIT_CARD,
paymentProvider: PaymentProvider.POYNT
});
setIsLoadingNonce(false);
setError("");
} catch (err) {
if (err instanceof GraphQLErrorWithCodes) setCheckoutErrors(err.codes);
}
else {
setCheckoutErrors(["TRANSACTION_PROCESSING_FAILED"]);
setIsLoadingNonce(false);
}
});
collect?.current?.on("error", (event) => {
setError(event?.data?.error?.message || t.errors.errorProcessingPayment);
setIsLoadingNonce(false);
});
collect?.current?.on("validated", (event) => {
if (event?.data?.validated) setError("");
});
}, [
isPoyntLoaded,
godaddyPaymentsConfig,
confirmCheckout.mutateAsync,
setCollect,
setCheckoutErrors,
t,
setIsLoadingNonce,
session?.businessId,
session?.storeId,
session?.channelId
]);
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { id: "gdpay-card-element" }), error ? /* @__PURE__ */ jsx("p", {
className: "text-[0.8rem] font-medium text-destructive",
children: error
}) : null] });
}
//#endregion
export { GoDaddyCreditCardForm };