Replace @types/stripe-v3 with @stripe/stripe-js

makerspace · Apr 23, 2024 · df1597b · df1597b
1 parent f1bfdea
commit df1597b
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 32 deletions.
diff --git a/public/package-lock.json b/public/package-lock.json
diff --git a/public/package.json b/public/package.json
@@ -17,8 +17,9 @@
         "webpack-merge": "^5.8.0"
     },
     "dependencies": {
+        "@stripe/react-stripe-js": "^2.7.0",
+        "@stripe/stripe-js": "^3.3.0",
         "@types/markdown-it": "^12.2.1",
-        "@types/stripe-v3": "^3.1.23",
         "chart.js": "^2.9.4",
         "d3": "^7.8.3",
         "d3-sankey": "^0.12.3",

diff --git a/public/ts/cartpage.tsx b/public/ts/cartpage.tsx
@@ -154,10 +154,10 @@ const PaymentButton = ({
                         e.preventDefault();
                         setInProgress(true);
                         try {
-                            const result = await stripe.createPaymentMethod(
-                                "card",
-                                element,
-                            );
+                            const result = await stripe!.createPaymentMethod({
+                                type: "card",
+                                card: element,
+                            });
                             if (result.error) {
                                 throw result.error;
                             } else {

diff --git a/public/ts/payment_common.tsx b/public/ts/payment_common.tsx
@@ -1,4 +1,10 @@
-/// <reference path="../node_modules/@types/stripe-v3/index.d.ts" />
+import {
+    loadStripe,
+    PaymentMethod,
+    Stripe,
+    StripeCardElement,
+    StripeError,
+} from "@stripe/stripe-js";
 import { useEffect, useRef } from "preact/hooks";
 import Cart, { Item } from "./cart";
 import * as common from "./common";
@@ -13,20 +19,20 @@ import { useTranslation } from "./translations";
 
 declare var UIkit: any;
 
-export var stripe: stripe.Stripe;
-var card: stripe.elements.Element;
+export var stripe: Stripe | null;
+var card: StripeCardElement;
 var spinner: any;
 var payButton: HTMLInputElement;
 var errorElement: any;
 
-export function initializeStripe() {
+export async function initializeStripe() {
     // Create a Stripe client.
-    stripe = Stripe(window.stripeKey);
+    stripe = await loadStripe(window.stripeKey);
 }
 
 export function mountStripe() {
     // Create an instance of Elements.
-    const elements = stripe.elements({ locale: "sv" });
+    const elements = stripe!.elements({ locale: "sv" });
     // Custom styling can be passed to options when creating an Element.
     const stripeStyle = {
         base: {
@@ -64,7 +70,7 @@ interface ResponseFunction {
 export interface PaymentFlowDefinition {
     initiate_payment: InitializePaymentFunction;
     before_initiate_payment?: Function;
-    on_stripe_error?: (error: stripe.Error) => void;
+    on_stripe_error?: (error: StripeError) => void;
     handle_backend_response?: (
         json: ServerResponse<BackendPaymentResponse>,
     ) => void;
@@ -337,7 +343,7 @@ export function ProductDataFromProducts(
 export const StripeCardInput = ({
     element,
 }: {
-    element: stripe.elements.Element;
+    element: StripeCardElement;
 }) => {
     const mountPoint = useRef<HTMLDivElement>(null);
 
@@ -350,7 +356,7 @@ export const StripeCardInput = ({
 
 export const createStripeCardInput = () => {
     // Create an instance of Elements.
-    const elements = stripe.elements({ locale: "sv" });
+    const elements = stripe!.elements({ locale: "sv" });
     // Custom styling can be passed to options when creating an Element.
     const stripeStyle = {
         base: {
@@ -566,10 +572,12 @@ export const extractRelevantProducts = (
 };
 
 export async function createPaymentMethod(
-    element: stripe.elements.Element,
+    element: StripeCardElement,
     memberInfo: member_t,
-): Promise<stripe.paymentMethod.PaymentMethod | null> {
-    const result = await stripe.createPaymentMethod("card", element, {
+): Promise<PaymentMethod | null> {
+    const result = await stripe!.createPaymentMethod({
+        type: "card",
+        card: element,
         billing_details: {
             name: `${memberInfo.firstname} ${memberInfo.lastname}`,
             email: memberInfo.email,
@@ -649,7 +657,7 @@ export async function handleStripeSetupIntent<
                     res.data.action_info!.type ===
                     PaymentIntentNextActionType.USE_STRIPE_SDK
                 ) {
-                    const stripeResult = await stripe.confirmCardSetup(
+                    const stripeResult = await stripe!.confirmCardSetup(
                         res.data.action_info!.client_secret,
                     );
                     if (stripeResult.error) {
@@ -705,7 +713,7 @@ export async function negotiatePayment<
                     res.data.action_info!.type ===
                     PaymentIntentNextActionType.USE_STRIPE_SDK
                 ) {
-                    const stripeResult = await stripe.handleCardAction(
+                    const stripeResult = await stripe!.handleCardAction(
                         res.data.action_info!.client_secret,
                     );
                     if (stripeResult.error) {
@@ -729,7 +737,7 @@ export async function negotiatePayment<
 }
 
 export async function pay(
-    paymentMethod: stripe.paymentMethod.PaymentMethod,
+    paymentMethod: PaymentMethod,
     cart: Cart,
     productData: ProductData,
     discount: Discount,

diff --git a/public/ts/register.tsx b/public/ts/register.tsx
@@ -1,3 +1,4 @@
+import { PaymentMethod, StripeCardElement } from "@stripe/stripe-js";
 import { ComponentChildren, render } from "preact";
 import { StateUpdater, useEffect, useMemo, useState } from "preact/hooks";
 import { PopupModal, useCalendlyEventListener } from "react-calendly";
@@ -423,7 +424,7 @@ const Confirmation = ({
     productData: ProductData;
     discount: Discount;
     discountInfo: DiscountsInfo;
-    card: stripe.elements.Element;
+    card: StripeCardElement;
     onRegistered: (r: RegistrationSuccess) => void;
     onBack: () => void;
 }) => {
@@ -538,7 +539,7 @@ type RegistrationSuccess = {
 };
 
 async function registerMember(
-    paymentMethod: stripe.paymentMethod.PaymentMethod,
+    paymentMethod: PaymentMethod,
     productData: ProductData,
     memberInfo: MemberInfoValidated,
     selectedPlan: Plan,

diff --git a/public/ts/subscriptions.tsx b/public/ts/subscriptions.tsx
@@ -1,3 +1,4 @@
+import { StripeCardElement } from "@stripe/stripe-js";
 import { render } from "preact";
 import { useState } from "preact/hooks";
 import Cart from "./cart";
@@ -60,7 +61,7 @@ const PayDialog = ({
     onCancel,
     onPay,
 }: {
-    stripe: stripe.elements.Element;
+    stripe: StripeCardElement;
     productData: ProductData;
     products: Product[];
     currentMemberships: SubscriptionType[];