Dynamic payments

routers/paypal.py

@@ -42,11 +42,11 @@ def generateAccessToken():
 
 # Create an order to start the transaction.
 # @see https://developer.paypal.com/docs/api/orders/v2/#orders_create
-def createOrder(cart, uid):
+def createOrder(payload, uid):
     # use the cart information passed from the front-end to calculate the purchase unit details
     print(
         "shopping cart information passed from the frontend createOrder() callback:",
-        cart,
+        payload,
     )
 
     accessToken = generateAccessToken()
@@ -57,7 +57,7 @@ def createOrder(cart, uid):
             {
                 "amount": {
                     "currency_code": "USD",
-                    "value": "0.01",
+                    "value": payload["price"],
                 },
                 "custom_id": uid + "," + str(100),
             },
@@ -106,12 +106,18 @@ def handleResponse(response):
     return (jsonResponse, response.status_code)
 
 
+async def request_body(request: Request):
+    return await request.body()
+
+
 @router.post("/__/paypal/orders/{uid}")
-def orders(req: Request, uid: str):
+def orders(req: Request, uid: str, _payload: bytes = Depends(request_body)):
     # use the cart information passed from the front-end to calculate the order amount detals
-    cart = None  # req.text()
-    print("shopping cart information passed from the frontend orders() callback:", cart)
-    jsonResponse, httpStatusCode = createOrder(cart, uid)
+    payload: dict = json.loads(_payload)
+    print(
+        "shopping cart information passed from the frontend orders() callback:", payload
+    )
+    jsonResponse, httpStatusCode = createOrder(payload, uid)
     return JSONResponse(jsonResponse, httpStatusCode)
 
 
@@ -128,10 +134,6 @@ def create_payment(request: Request):
     return templates.TemplateResponse("create_payment.html", context)
 
 
-async def request_body(request: Request):
-    return await request.body()
-
-
 @router.post("/__/paypal/webhook", status_code=200)
 def create_webhook(request: Request, _payload: bytes = Depends(request_body)):
     print("initial payload", _payload)

templates/account.html

@@ -57,9 +57,8 @@ <h2>Remaining Credits: {{ humanize.intcomma(user_credits) }}</h2>
             <div class="buy-credits-container">
                 <h2>Buy Credits</h2>
                 <div class="pb-2">
-                    Payments processed via Stripe. 
-                    <a href="https://gooey.ai/paypal/">Pay via PayPal or Venmo</a>
-                    instead.
+                    Payments processed via Stripe.
+                    <a href="/paypal">Pay via PayPal or Venmo</a> instead.
                     </div>
                 <div class="plans-container">
                     {% for lookup_key, subscription in available_subscriptions.items() %}

templates/create_payment.html

@@ -4,12 +4,21 @@
 <section class="text-center">
     <div class="description Box-root">
         <h3>Pay with Paypal</h3>
+        <form id="payment-amount" onsubmit="submitAmount(); return false;">
+            <h5>Buy a one-time top up @ 100 Credits per dollar (minimum $10).</h5>
+            <label>$<input id="input-amount" type="number" required style="display: inline;" min="10" placeholder="10"></label>
+            <button class="streamlit-like-btn" id="show-payment-types" type="submit">Buy</button>
+        </form>
     </div>
-    <div style="margin: auto; width: fit-content;" id="paypal-button-container"></div>
+    <div style="margin: auto; width: fit-content; display: none;" id="paypal-button-container"></div>
     <p id="result-message"></p>
     <!-- Replace the "test" client-id value with your client-id -->
     <script src="https://www.paypal.com/sdk/js?client-id={{ settings.PAYPAL_CLIENT_ID }}&currency=USD&enable-funding=venmo"></script>
     <script>
+        function submitAmount() {
+            document.getElementById("paypal-button-container").style.display = "block";
+            document.getElementById("input-amount").disabled = true;
+        }
         window.paypal
             .Buttons({
                 async createOrder() {
@@ -22,12 +31,7 @@ <h3>Pay with Paypal</h3>
                         // use the "body" param to optionally pass additional order information
                         // like product ids and quantities
                         body: JSON.stringify({
-                            cart: [
-                            {
-                                id: "YOUR_PRODUCT_ID",
-                                quantity: "YOUR_PRODUCT_QUANTITY",
-                            },
-                            ],
+                            price: document.getElementById("input-amount").value,
                         }),
                     });
                     const orderData = await response.json();