diff --git a/.gitignore b/.gitignore
index e86421e..73125d9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,10 @@
.DS_Store
node_modules
/build
+/dist
/.svelte-kit
/package
.env
.vercel_build_output
/.env.development
+/.vercel
diff --git a/.prettierignore b/.prettierignore
index 0999ffc..5a6fd5c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,6 +3,8 @@ node_modules
/build
/.svelte-kit
/package
+/.vercel
+/dist
/pnpm-lock.yaml
/README.md
diff --git a/.prettierrc b/.prettierrc
index 2ac3a83..2a63e63 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,5 +4,14 @@
"semi": false,
"singleQuote": true,
"trailingComma": "none",
- "printWidth": 100
+ "printWidth": 100,
+ "plugins": ["prettier-plugin-svelte"],
+ "overrides": [
+ {
+ "files": "*.svelte",
+ "options": {
+ "parser": "svelte"
+ }
+ }
+ ]
}
diff --git a/README.md b/README.md
index 3244d24..edbb38a 100644
--- a/README.md
+++ b/README.md
@@ -15,11 +15,10 @@ The following components are provided:
- ``: Input field for the card's expiration date.
- ``: Input field for Card Verification Value.
- ``: All-in-one component that has inputs for card number, expiry, cvc, and zip code.
-- ``: A GooglePay, ApplePay, or Link checkout button, depending on browser and user preferences.
- ``: Input field for IBAN (International bank account number).
- ``: Input field for iDEAL (payment system used in the Netherlands).
- ``: All-in-one component that allows the user to choose the type of payment.
-- ``: Pay with a wallet without leaving the page.
+- ``: Pay with a wallet without leaving the page using GooglePay, ApplePay, or Link.
- ``: Ability to use saved payment methods stored in [Link](https://link.co).
- `
+
{/if}
diff --git a/src/lib/ExpressCheckout.svelte b/src/lib/ExpressCheckout.svelte
index c7d1204..b58c792 100644
--- a/src/lib/ExpressCheckout.svelte
+++ b/src/lib/ExpressCheckout.svelte
@@ -1,73 +1,104 @@
-
-
+
diff --git a/src/lib/Iban.svelte b/src/lib/Iban.svelte
index 187aaf4..bf4a5f8 100644
--- a/src/lib/Iban.svelte
+++ b/src/lib/Iban.svelte
@@ -1,40 +1,52 @@
-
-
+
diff --git a/src/lib/Ideal.svelte b/src/lib/Ideal.svelte
index 29933a7..eb41691 100644
--- a/src/lib/Ideal.svelte
+++ b/src/lib/Ideal.svelte
@@ -1,56 +1,75 @@
-
-
+
diff --git a/src/lib/LinkAuthenticationElement.svelte b/src/lib/LinkAuthenticationElement.svelte
index d0224c4..82c16ac 100644
--- a/src/lib/LinkAuthenticationElement.svelte
+++ b/src/lib/LinkAuthenticationElement.svelte
@@ -1,46 +1,73 @@
-
-
+
diff --git a/src/lib/PaymentElement.svelte b/src/lib/PaymentElement.svelte
index 8ab8719..2de1156 100644
--- a/src/lib/PaymentElement.svelte
+++ b/src/lib/PaymentElement.svelte
@@ -1,44 +1,88 @@
-
-
+
diff --git a/src/lib/PaymentMethodMessaging.svelte b/src/lib/PaymentMethodMessaging.svelte
index a86bad4..259180d 100644
--- a/src/lib/PaymentMethodMessaging.svelte
+++ b/src/lib/PaymentMethodMessaging.svelte
@@ -1,43 +1,51 @@
-
-
+
diff --git a/src/lib/PaymentRequestButton.svelte b/src/lib/PaymentRequestButton.svelte
deleted file mode 100644
index ba848b8..0000000
--- a/src/lib/PaymentRequestButton.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-
-
-
diff --git a/src/lib/types.d.ts b/src/lib/d.ts
similarity index 76%
rename from src/lib/types.d.ts
rename to src/lib/d.ts
index f79e658..5b57836 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/d.ts
@@ -1,6 +1,6 @@
import type { StripeElements, Stripe } from '@stripe/stripe-js'
-interface ElementsContext {
+export interface ElementsContext {
elements: StripeElements
stripe: Stripe
}
diff --git a/src/lib/index.js b/src/lib/index.ts
similarity index 82%
rename from src/lib/index.js
rename to src/lib/index.ts
index c4252ba..bd63f1f 100644
--- a/src/lib/index.js
+++ b/src/lib/index.ts
@@ -2,7 +2,6 @@ export { default as Card } from './Card.svelte'
export { default as CardNumber } from './CardNumber.svelte'
export { default as CardExpiry } from './CardExpiry.svelte'
export { default as CardCvc } from './CardCvc.svelte'
-export { default as PaymentRequestButton } from './PaymentRequestButton.svelte'
export { default as Iban } from './Iban.svelte'
export { default as Ideal } from './Ideal.svelte'
export { default as PaymentElement } from './PaymentElement.svelte'
@@ -12,5 +11,4 @@ export { default as PaymentMethodMessaging } from './PaymentMethodMessaging.svel
export { default as ExpressCheckout } from './ExpressCheckout.svelte'
export { default as EmbeddedCheckout } from './EmbeddedCheckout.svelte'
export { default as Elements } from './Elements.svelte'
-export { default as Container } from './Container.svelte'
-export { isServer } from './util'
+export { isServer } from './util.js'
diff --git a/src/lib/util.js b/src/lib/util.js
deleted file mode 100644
index eb843ac..0000000
--- a/src/lib/util.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @param {HTMLElement} node
- * @param {import('@stripe/stripe-js').StripeElementType} type
- * @param {import('@stripe/stripe-js').StripeElements} elements
- * @param {
(type: EventKey, detail?: any) => void} dispatch
- * @param {import('@stripe/stripe-js').StripeElementsOptions} options
- *
- * @returns {import('@stripe/stripe-js').StripeElementBase}
- */
-export function mount(node, type, elements, dispatch, options = {}) {
- const element = elements.create(type, options)
-
- element.mount(node)
- element.on('change', (e) => dispatch('change', e))
- element.on('ready', (e) => dispatch('ready', e))
- element.on('focus', (e) => dispatch('focus', e))
- element.on('blur', (e) => dispatch('blur', e))
- element.on('escape', (e) => dispatch('escape', e))
- element.on('click', (e) => dispatch('click', e))
- element.on('loaderror', (e) => dispatch('loaderror', e))
- element.on('loaderstart', (e) => dispatch('loaderstart', e))
- element.on('networkschange', (e) => dispatch('networkschange', e))
-
- return element
-}
-
-export const isServer = typeof window === 'undefined'
-
-/**
- * @param {import('@stripe/stripe-js').Stripe} stripe
- * @returns {void}
- */
-export function register(stripe) {
- if (!isServer) {
- return stripe.registerAppInfo({
- name: 'svelte-stripe-js',
- url: 'https://svelte-stripe-js.vercel.app'
- })
- }
-}
diff --git a/src/lib/util.ts b/src/lib/util.ts
new file mode 100644
index 0000000..0ffc171
--- /dev/null
+++ b/src/lib/util.ts
@@ -0,0 +1,12 @@
+import type { Stripe } from '@stripe/stripe-js'
+
+export const isServer: boolean = typeof window === 'undefined'
+
+export function register(stripe: Stripe) {
+ if (!isServer) {
+ return stripe.registerAppInfo({
+ name: 'svelte-stripe-js',
+ url: 'https://svelte-stripe-js.vercel.app'
+ })
+ }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 87de60e..a5ace22 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
-
@@ -66,6 +68,6 @@
-
+ {@render children?.()}
diff --git a/src/routes/+page.md b/src/routes/+page.md
index dc1ad47..7d323a2 100644
--- a/src/routes/+page.md
+++ b/src/routes/+page.md
@@ -41,7 +41,7 @@ SECRET_STRIPE_KEY=sk_test_...
In your payment page, initialize Stripe and add a `