diff --git a/webapp/.env.example b/webapp/.env.example
index 0df16bd4..68895321 100644
--- a/webapp/.env.example
+++ b/webapp/.env.example
@@ -38,4 +38,8 @@ WEB_PUSH_PRIVATE_KEY=web-push-private-key
 # Widget
 NEXT_PUBLIC_WIDGET_TOKEN_NAME=widget-token
 WIDGET_SECRET_JWT=secret1
-WIDGET_SECRET_DATA_ENCRYPTION=secret2
\ No newline at end of file
+WIDGET_SECRET_DATA_ENCRYPTION=secret2
+
+# Obiz API
+OBIZ_PARTNER_ID=default
+OBIZ_SECRET=default
\ No newline at end of file
diff --git a/webapp/src/components/obiz/DiscountAmountBlock.tsx b/webapp/src/components/obiz/DiscountAmountBlock.tsx
new file mode 100644
index 00000000..e1b1bd61
--- /dev/null
+++ b/webapp/src/components/obiz/DiscountAmountBlock.tsx
@@ -0,0 +1,119 @@
+import {
+  Center,
+  Divider,
+  Flex,
+  FormControl,
+  FormLabel,
+  Input,
+  NumberInput,
+  NumberInputField,
+  Text,
+} from "@chakra-ui/react";
+import { Dispatch, SetStateAction } from "react";
+
+const DiscountAmountBlock = ({
+  amount,
+  setAmount,
+  minAmount,
+  maxAmount,
+  discount,
+}: {
+  amount: number;
+  setAmount: Dispatch<SetStateAction<number>>;
+  minAmount: number;
+  maxAmount: number;
+  discount: number;
+}) => {
+  const isDisabled = amount === 0;
+  const isInvalid =
+    !isDisabled &&
+    (amount < minAmount || amount > maxAmount || amount % 1 !== 0);
+
+  return (
+    <Center flexDir="column">
+      <Flex display="flex" flexDir="column" alignItems="center" mx={10}>
+        <FormLabel
+          textAlign="center"
+          color="disabled"
+          mx={0}
+          mb={3}
+          fontSize={14}
+          fontWeight={500}
+        >
+          Choisissez le montant du bon
+        </FormLabel>
+        <Input
+          type="number"
+          variant="unstyled"
+          bgColor={isInvalid ? "errorLight" : "bgGray"}
+          borderRadius="2.5xl"
+          fontWeight={800}
+          textAlign="center"
+          fontSize="52px"
+          w="200px"
+          py={6}
+          autoComplete="off"
+          step={1}
+          onChange={(e) =>
+            setAmount(e.target.value ? Number(e.target.value) : 0)
+          }
+          placeholder="0€"
+          min={minAmount}
+          max={maxAmount}
+        />
+      </Flex>
+      <Flex alignItems="center" mt={6}>
+        <Center flexDir="column">
+          <Text fontSize={14} fontWeight={500}>
+            Vous payez
+          </Text>
+          <Flex alignItems="center" gap={2}>
+            {!isDisabled && (
+              <Text
+                fontSize={18}
+                fontWeight={500}
+                textDecoration="line-through"
+                textDecorationThickness="2px"
+                color="disabled"
+              >
+                {amount}€
+              </Text>
+            )}
+            <Text
+              fontSize={24}
+              fontWeight={800}
+              opacity={isDisabled ? 0.25 : 1}
+            >
+              {(amount - amount * (discount / 100))
+                .toFixed(isDisabled ? 0 : 2)
+                .replace(".", ",")}
+              €
+            </Text>
+          </Flex>
+        </Center>
+        <Divider orientation="vertical" h="50px" mx={6} />
+        <Center flexDir="column">
+          <Text fontSize={14} fontWeight={500}>
+            Vous économisez
+          </Text>
+          <Text
+            bgColor={isDisabled ? "black" : "primaryShades.100"}
+            color={isDisabled ? "white" : "primary"}
+            borderRadius="2xl"
+            px={2}
+            fontSize={24}
+            fontWeight={800}
+            opacity={isDisabled ? 0.25 : 1}
+          >
+            {(amount * (discount / 100))
+              .toFixed(isDisabled ? 0 : 2)
+              .replace(".", ",")}
+            €
+          </Text>
+        </Center>
+      </Flex>
+    </Center>
+  );
+};
+
+export default DiscountAmountBlock;
diff --git a/webapp/src/pages/dashboard/obiz-offer-variable.tsx b/webapp/src/pages/dashboard/obiz-offer-variable.tsx
new file mode 100644
index 00000000..1f42f1a2
--- /dev/null
+++ b/webapp/src/pages/dashboard/obiz-offer-variable.tsx
@@ -0,0 +1,26 @@
+import { Box, Button, Flex } from "@chakra-ui/react";
+import { useState } from "react";
+import DiscountAmountBlock from "~/components/obiz/DiscountAmountBlock";
+import BackButton from "~/components/ui/BackButton";
+
+export default function ObizOfferVariable() {
+  const [amount, setAmount] = useState(0);
+
+  return (
+    <Flex flexDir="column" mt={10} px={8}>
+      <BackButton />
+      <Box mt={8}>
+        <DiscountAmountBlock
+          discount={5}
+          amount={amount}
+          setAmount={setAmount}
+          minAmount={5}
+          maxAmount={100}
+        />
+      </Box>
+      <Button mt={10} onClick={() => setAmount(10)}>
+        Acheter mon bon
+      </Button>
+    </Flex>
+  );
+}
diff --git a/webapp/src/server/api/routers/order.ts b/webapp/src/server/api/routers/order.ts
index 0f6ebe3b..7f0da46b 100644
--- a/webapp/src/server/api/routers/order.ts
+++ b/webapp/src/server/api/routers/order.ts
@@ -1,11 +1,15 @@
+import { z } from "zod";
 import { createTRPCRouter, userProtectedProcedure } from "~/server/api/trpc";
+import { createOrderPayload } from "~/utils/obiz";
 
 export const orderRouter = createTRPCRouter({
-  createOrder: userProtectedProcedure.query(async ({ ctx }) => {
-    // const [test] = await ctx.soapObizClient.ETAT_SITEAsync();
+  createOrder: userProtectedProcedure
+    .input(z.object({ user_id: z.number(), client_id: z.number() }))
+    .query(async ({ ctx, input }) => {
+      const order_payload = createOrderPayload(input);
 
-    // console.log(JSON.stringify(test, null, 2));
+      const [] = await ctx.soapObizClient.CREATION_COMMANDE_ARRAYAsync();
 
-    return { data: "Hello" };
-  }),
+      return { data: "Hello" };
+    }),
 });
diff --git a/webapp/src/utils/obiz.ts b/webapp/src/utils/obiz.ts
new file mode 100644
index 00000000..a7de87e9
--- /dev/null
+++ b/webapp/src/utils/obiz.ts
@@ -0,0 +1,12 @@
+var crypto = require("crypto");
+
+export const obiz_signature = crypto
+  .createHash("sha512")
+  .update(`${process.env.OBIZ_PARTNER_ID}+${process.env.OBIZ_PARTNER_SECRET}`)
+  .digest("hex") as string;
+
+export const createOrderPayload = async ({ user_id }: { user_id: number }) => {
+  return {
+    CE_ID: "",
+  };
+};