Add Swish support

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",

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 {

public/ts/payment_common.tsx

@@ -1,4 +1,11 @@
-/// <reference path="../node_modules/@types/stripe-v3/index.d.ts" />
+import { useStripe } from "@stripe/react-stripe-js";
+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 +20,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 +71,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 +344,7 @@ export function ProductDataFromProducts(
 export const StripeCardInput = ({
     element,
 }: {
-    element: stripe.elements.Element;
+    element: StripeCardElement;
 }) => {
     const mountPoint = useRef<HTMLDivElement>(null);
 
@@ -350,7 +357,9 @@ export const StripeCardInput = ({
 
 export const createStripeCardInput = () => {
     // Create an instance of Elements.
-    const elements = stripe.elements({ locale: "sv" });
+    const stripe = useStripe();
+    const elements = stripe?.elements({ locale: "sv" });
+
     // Custom styling can be passed to options when creating an Element.
     const stripeStyle = {
         base: {
@@ -370,7 +379,7 @@ export const createStripeCardInput = () => {
     };
 
     // Create an instance of the card Element.
-    return elements.create("card", {
+    return elements?.create("card", {
         style: stripeStyle,
         hidePostalCode: true,
     });
@@ -566,10 +575,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 +660,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 +716,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 +740,7 @@ export async function negotiatePayment<
 }
 
 export async function pay(
-    paymentMethod: stripe.paymentMethod.PaymentMethod,
+    paymentMethod: PaymentMethod,
     cart: Cart,
     productData: ProductData,
     discount: Discount,

public/ts/register.tsx

@@ -1,3 +1,9 @@
+import { Elements } from "@stripe/react-stripe-js";
+import {
+    loadStripe,
+    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";
@@ -7,7 +13,12 @@ import * as common from "./common";
 import { ServerResponse, trackPlausible } from "./common";
 import { LoadCurrentMemberInfo, member_t } from "./member_common";
 import {
+    calculateAmountToPay,
+    createPaymentMethod,
+    createStripeCardInput,
     Discount,
+    extractRelevantProducts,
+    pay,
     PaymentFailedError,
     PriceLevel,
     Product,
@@ -16,12 +27,6 @@ import {
     RegisterPageData,
     StripeCardInput,
     ToPayPreview,
-    calculateAmountToPay,
-    createPaymentMethod,
-    createStripeCardInput,
-    extractRelevantProducts,
-    initializeStripe,
-    pay,
 } from "./payment_common";
 import { TranslationWrapper, Translator, useTranslation } from "./translations";
 import { URL_RELATIVE_MEMBER_PORTAL } from "./urls";
@@ -423,7 +428,7 @@ const Confirmation = ({
     productData: ProductData;
     discount: Discount;
     discountInfo: DiscountsInfo;
-    card: stripe.elements.Element;
+    card: StripeCardElement;
     onRegistered: (r: RegistrationSuccess) => void;
     onBack: () => void;
 }) => {
@@ -538,7 +543,7 @@ type RegistrationSuccess = {
 };
 
 async function registerMember(
-    paymentMethod: stripe.paymentMethod.PaymentMethod,
+    paymentMethod: PaymentMethod,
     productData: ProductData,
     memberInfo: MemberInfoValidated,
     selectedPlan: Plan,
@@ -1188,12 +1193,14 @@ const RegisterPage = ({}: {}) => {
 
 common.documentLoaded().then(() => {
     const root = document.getElementById("root");
-    initializeStripe();
+    const stripe = loadStripe(window.stripeKey);
     if (root != null) {
         render(
             <TranslationWrapper>
                 <div className="content-wrapper">
-                    <RegisterPage />
+                    <Elements stripe={stripe}>
+                        <RegisterPage />
+                    </Elements>
                 </div>
             </TranslationWrapper>,
             root,

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[];