Merge pull request #224 from codeableorg/payments

Integrate Culqi payment gateway in Checkout component

Author: diegotc86

.env.example

@@ -10,3 +10,7 @@ DB_PASSWORD=your_db_password
 
 # Admin Database (for database creation/deletion)
 ADMIN_DB_NAME=postgres
+
+# Culqui Keys
+CULQI_PRIVATE_KEY="sk_test_xxx"
+VITE_CULQI_PUBLIC_KEY="pk_test_xxx"

.env.test

@@ -1,4 +1,10 @@
 DATABASE_URL="postgresql://diego@localhost:5432/fullstock_test?schema=public"
 
 # Admin Database (for database creation/deletion)
-ADMIN_DB_NAME=postgres
+ADMIN_DB_NAME=postgres
+
+# Cloud Storage base url
+CS_BASE_URL="https://fullstock-images.s3.us-east-2.amazonaws.com"
+
+CULQI_PRIVATE_KEY="sk_test_EC8oOLd3ZiCTKqjN"
+VITE_CULQI_PUBLIC_KEY="pk_test_Ws4NXfH95QXlZgaz"

.github/workflows/tests.yaml

@@ -61,6 +61,11 @@ jobs:
   e2e-test:
     runs-on: ubuntu-latest
     needs: [test]
+    env:
+      CS_BASE_URL: "https://fullstock-images.s3.us-east-2.amazonaws.com"
+      CULQI_PRIVATE_KEY: "sk_test_EC8oOLd3ZiCTKqjN"
+      VITE_CULQI_PUBLIC_KEY: "pk_test_Ws4NXfH95QXlZgaz"
+      DATABASE_URL: "postgresql://diego@localhost:5432/fullstock_test?schema=public"
     services:
       postgres:
         image: postgres:15

package.json

@@ -19,6 +19,7 @@
     "prisma:studio": "prisma studio",
     "prisma:seed": "prisma db seed",
     "test:prisma:migrate:deploy": "dotenv -e .env.test -- prisma migrate deploy",
+    "test:prisma:migrate:reset": "dotenv -e .env.test -- prisma migrate reset",
     "test:e2e": "playwright test",
     "test:prisma:seed": "dotenv -e .env.test prisma db seed"
   },

prisma/migrations/20250806155625_add_payment_id_to_order/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "orders" ADD COLUMN     "payment_id" TEXT;

prisma/schema.prisma

@@ -103,6 +103,7 @@ model Order {
   userId      Int      @map("user_id")
   totalAmount Decimal  @map("total_amount") @db.Decimal(10, 2)
   email       String
+  paymentId   String?  @map("payment_id")
   firstName   String   @map("first_name")
   lastName    String   @map("last_name")
   company     String?

public/.well-known/appspecific/com.chrome.devtools.json

@@ -1,7 +1,12 @@
 // import { createOrderFormData } from "@/lib/utils.tests";
 import { expect, test } from "@playwright/test";
 
-import { baseUrl, cleanDatabase, createOrderFormData } from "./utils-tests-e2e";
+import {
+  baseUrl,
+  cleanDatabase,
+  createOrderFormData,
+  creditCards,
+} from "./utils-tests-e2e";
 
 export type OrderFormData = Record<string, string>;
 
@@ -33,9 +38,43 @@ test.describe("Guest", () => {
 
     await page.getByRole("button", { name: "Confirmar Orden" }).click();
 
+    const checkoutFrame = page.locator('iframe[name="checkout_frame"]');
+    await expect(checkoutFrame).toBeVisible({ timeout: 10000 });
+
+    const validCard = creditCards.valid;
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("textbox", { name: "#### #### #### ####" })
+      .fill(validCard.number);
+
     await expect(
-      page.getByText("¡Muchas gracias por tu compra!")
+      checkoutFrame.contentFrame().getByRole("img", { name: "Culqi icon" })
     ).toBeVisible();
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("textbox", { name: "MM/AA" })
+      .fill(validCard.exp);
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("textbox", { name: "CVV" })
+      .fill(validCard.cvv);
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("textbox", { name: "[email protected]" })
+      .fill(orderForm["Correo electrónico"]);
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("button", { name: "Pagar S/" })
+      .click();
+
+    await expect(page.getByText("¡Muchas gracias por tu compra!")).toBeVisible({
+      timeout: 10000,
+    });
     await expect(page.getByTestId("orderId")).toBeVisible();
   });
 });

src/e2e/guest-create-order.spec.ts

@@ -4,7 +4,7 @@ import { prisma } from "@/db/prisma";
 import { hashPassword } from "@/lib/security";
 import type { CreateUserDTO } from "@/models/user.model";
 
-import { baseUrl, cleanDatabase } from "./utils-tests-e2e";
+import { baseUrl, cleanDatabase, creditCards } from "./utils-tests-e2e";
 
 test.beforeEach(async () => {
   await cleanDatabase();
@@ -76,9 +76,43 @@ test.describe("User", () => {
 
     await page.getByRole("button", { name: "Confirmar Orden" }).click();
 
+    const checkoutFrame = page.locator('iframe[name="checkout_frame"]');
+    await expect(checkoutFrame).toBeVisible({ timeout: 10000 });
+
+    const validCard = creditCards.valid;
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("textbox", { name: "#### #### #### ####" })
+      .fill(validCard.number);
+
     await expect(
-      page.getByText("¡Muchas gracias por tu compra!")
+      checkoutFrame.contentFrame().getByRole("img", { name: "Culqi icon" })
     ).toBeVisible();
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("textbox", { name: "MM/AA" })
+      .fill(validCard.exp);
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("textbox", { name: "CVV" })
+      .fill(validCard.cvv);
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("textbox", { name: "[email protected]" })
+      .fill(loginForm["Correo electrónico"]);
+
+    await checkoutFrame
+      .contentFrame()
+      .getByRole("button", { name: "Pagar S/" })
+      .click();
+
+    await expect(page.getByText("¡Muchas gracias por tu compra!")).toBeVisible({
+      timeout: 10000,
+    });
     await expect(page.getByTestId("orderId")).toBeVisible();
   });
 });

src/e2e/user-create-order.spec.ts

@@ -19,6 +19,19 @@ export const createOrderFormData = (
   ...overrides,
 });
 
+export const creditCards = {
+  valid: {
+    number: "4111 1111 1111 1111",
+    exp: "12/30",
+    cvv: "123",
+  },
+  declined: {
+    number: "4000 0200 0000 0000",
+    exp: "12/30",
+    cvv: "354",
+  },
+};
+
 export async function cleanDatabase() {
   await prisma.order.deleteMany();
   await prisma.cart.deleteMany();