Skip to content

feat: link to easy invoice for client id generation, add option for custom client id in checkout #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+2,625 −2,570
Open

feat: link to easy invoice for client id generation, add option for custom client id in checkout #35

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98721e8
feat: link to easy invoice for client id generation
bassgeta Oct 2, 2025
3dab4bd
feat: add custom reference to checkout and update code for the Paymen…
bassgeta Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ NEXT_PUBLIC_NPM_PACKAGE_URL="https://www.npmjs.com/package/@requestnetwork/payme
NEXT_PUBLIC_DEMO_URL="https://calendly.com/mariana-rn/request-network-intro"
NEXT_PUBLIC_INTEGRATION_URL="https://docs.request.network/building-blocks/templates/request-checkout"
NEXT_PUBLIC_RN_API_CLIENT_ID="rn_f6mr53l2yfcdv4sych5adq7gez3avurq"
NEXT_PUBLIC_REQUEST_API_URL="https://api.stage.request.network"
NEXT_PUBLIC_REQUEST_API_URL="https://api.stage.request.network"
NEXT_PUBLIC_EASY_INVOICE_URL=https://easyinvoice.request.network
Comment on lines +9 to +10
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix quote inconsistency and add EOF blank line.

Issues identified:

  • Line 9 has quotes around the URL value, but line 10 does not
  • Missing blank line at end of file

For consistency and to address linter warnings, either remove quotes from line 9 or add them to line 10, and add a blank line at EOF.

Apply this diff:

-NEXT_PUBLIC_REQUEST_API_URL="https://api.stage.request.network"
-NEXT_PUBLIC_EASY_INVOICE_URL=https://easyinvoice.request.network
+NEXT_PUBLIC_REQUEST_API_URL=https://api.stage.request.network
+NEXT_PUBLIC_EASY_INVOICE_URL=https://easyinvoice.request.network
+

Based on learnings

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
NEXT_PUBLIC_REQUEST_API_URL="https://api.stage.request.network"
NEXT_PUBLIC_EASY_INVOICE_URL=https://easyinvoice.request.network
NEXT_PUBLIC_REQUEST_API_URL=https://api.stage.request.network
NEXT_PUBLIC_EASY_INVOICE_URL=https://easyinvoice.request.network
🧰 Tools
🪛 dotenv-linter (3.3.0)

[warning] 9-9: [QuoteCharacter] The value has quote characters (', ")

(QuoteCharacter)

[warning] 9-9: [UnorderedKey] The NEXT_PUBLIC_REQUEST_API_URL key should go before the NEXT_PUBLIC_RN_API_CLIENT_ID key

(UnorderedKey)

[warning] 10-10: [EndingBlankLine] No blank line at the end of the file

(EndingBlankLine)

[warning] 10-10: [UnorderedKey] The NEXT_PUBLIC_EASY_INVOICE_URL key should go before the NEXT_PUBLIC_GTM_ID key

(UnorderedKey)

🤖 Prompt for AI Agents 
In .env.example around lines 9-10, the URL values are inconsistent (line 9 is
quoted, line 10 is not) and the file lacks a trailing newline; make them
consistent by adding matching double quotes around NEXT_PUBLIC_EASY_INVOICE_URL
so both lines use the same quoting style, and ensure the file ends with a single
blank line (newline at EOF).

39 changes: 30 additions & 9 deletions src/components/PaymentStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@

import { useTicketStore } from "@/store/ticketStore";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { PaymentWidget } from "./payment-widget/payment-widget";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { EASY_INVOICE_URL } from "@/lib/constants";

export function PaymentStep() {
const { tickets, clearTickets } = useTicketStore();
const [total, setTotal] = useState(0);
const router = useRouter();
const [customClientId, setCustomClientId] = useState("");

useEffect(() => {
const newTotal = Object.values(tickets).reduce(
Expand All @@ -33,9 +35,9 @@ export function PaymentStep() {
total: total.toString(),
totalUSD: total.toString(),
};
console.log("ma kaj mona", total, invoiceTotals)

const clientId = process.env.NEXT_PUBLIC_RN_API_CLIENT_ID;
const defaultClientId = process.env.NEXT_PUBLIC_RN_API_CLIENT_ID;
const clientId = customClientId || defaultClientId;

return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
Expand Down Expand Up @@ -72,9 +74,31 @@ export function PaymentStep() {
</div>
</div>

{/* Payment Widget */}
<div role="region" aria-label="Payment Widget">
<h2 className="text-2xl font-semibold mb-6">Payment</h2>
<div className="mb-6 space-y-2">
<Label htmlFor="custom-client-id">Custom Client ID</Label>
<Input
id="custom-client-id"
type="text"
placeholder="Enter your custom client ID"
value={customClientId}
onChange={(e) => setCustomClientId(e.target.value)}
className="w-full"
/>
<p className="text-sm text-gray-600">
Get your Client ID on{" "}
<a
href={`${EASY_INVOICE_URL}/ecommerce/manage`}
target="_blank"
rel="noopener noreferrer"
className="text-green hover:text-dark-green underline"
>
EasyInvoice
</a>
</p>
</div>

{clientId && (
<PaymentWidget
amountInUsd={total.toString()}
Expand Down Expand Up @@ -126,15 +150,12 @@ export function PaymentStep() {
}}
onSuccess={() => {
clearTickets();
setTimeout(() => {
router.push("/");
}, 10000);
}}
onError={(error) => {
console.error("Payment failed:", error);
}}
>
<div className="px-8 py-2 bg-[#099C77] text-white rounded-lg hover:bg-[#087f63] transition-colors text-center">
<div className="px-10 py-2 bg-[#099C77] text-white rounded-lg hover:bg-[#087f63] transition-colors text-center">
Pay with crypto
</div>
</PaymentWidget>
Expand Down
12 changes: 12 additions & 0 deletions src/components/Playground/blocks/customize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { PlaygroundFormData } from "@/lib/validation";
import { Switch } from "../../ui/switch";
import { useEffect } from "react";
import { CurrencyCombobox } from "../../ui/combobox";
import { EASY_INVOICE_URL } from "@/lib/constants";

export const CustomizeForm = () => {
const {
Expand Down Expand Up @@ -126,6 +127,17 @@ export const CustomizeForm = () => {
{errors.paymentConfig?.rnApiClientId?.message && (
<Error>{errors.paymentConfig.rnApiClientId.message}</Error>
)}
<p className="text-sm text-gray-600">
Get your Client ID on{" "}
<a
href={`${EASY_INVOICE_URL}/ecommerce/manage`}
target="_blank"
rel="noopener noreferrer"
className="text-green hover:text-dark-green underline"
>
EasyInvoice
</a>
</p>
</div>

<div className="flex flex-col gap-2">
Expand Down
3 changes: 2 additions & 1 deletion src/lib/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,5 @@ export const CURRENCY_ID = {
FAU_SEPOLIA: "FAU-sepolia",
"ETH-ZKSYNC_ZKSYNCERA": "ETH-zksync-zksyncera",
"ETH-BASE_BASE": "ETH-base-base",
} as const;
} as const;
export const EASY_INVOICE_URL = process.env.NEXT_PUBLIC_EASY_INVOICE_URL || "https://easyinvoice.request.network";