diff --git a/elements/plus-tiers.js b/elements/plus-tiers.js
index 4c17a4f..d4e8248 100644
--- a/elements/plus-tiers.js
+++ b/elements/plus-tiers.js
@@ -58,6 +58,7 @@ const Prices = {
CNY: '¥68.00',
AUD: '$14.99',
},
+ /*
PLUS: {
USD: '$4.99',
GBP: '£3.99',
@@ -67,6 +68,16 @@ const Prices = {
CNY: '¥38.00',
AUD: '$7.99',
},
+ */
+ PLUS: {
+ USD: '$9.99',
+ GBP: '£7.99',
+ EUR: '€9.99',
+ JPY: '¥1,500',
+ CAD: '$12.99',
+ CNY: '¥68.00',
+ AUD: '$14.99',
+ },
CORPORATE: {
USD: '$9.99/yr',
GBP: '£7.99/yr',
@@ -146,6 +157,7 @@ const htmlText = `
+
+
+
+
+
+
@@ -411,6 +437,9 @@ const cssText = `
text-transform: none;
transform: none;
}
+.button-link--paddle {
+ font-weight: bold;
+}
.currencies {
align-items: center;
display: flex;
@@ -447,6 +476,7 @@ const cssText = `
flex: none;
font-weight: 300;
}
+
.flag {
background-image: url('/images/flags.svg');
background-position-y: center;
@@ -479,6 +509,47 @@ const cssText = `
.flag-au {
background-position-x: -9em;
}
+
+.payment-methods {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ justify-content: center;
+ margin-top: 0.25rem;
+}
+.payment-methods i {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ display: inline-block;
+}
+.payment-methods__paypal {
+ aspect-ratio: 101 / 32;
+ background-image: url(/images/paypal-logo-white.svg);
+ height: 1rem;
+}
+.payment-methods__gpay {
+ aspect-ratio: 41 / 17;
+ background-image: url(/images/icon-gpay.svg);
+ height: 1rem;
+}
+.payment-methods__visa {
+ aspect-ratio: 1 / 1;
+ background-image: url('https://buy.paddle.com/images/icons/visa.svg');
+ height: 1.5rem;
+}
+.payment-methods__mastercard {
+ aspect-ratio: 1 / 1;
+ background-image: url('https://buy.paddle.com/images/icons/mastercard.svg');
+ height: 1.5rem;
+}
+.payment-methods__amex {
+ aspect-ratio: 1 / 1;
+ background-image: url('https://buy.paddle.com/images/icons/amex.svg');
+ height: 1.5rem;
+}
+
:host {
container-type: inline-size;
font-size: 1.25rem;
@@ -547,4 +618,39 @@ class PlusTiersElement extends HTMLElement {
}
}
+/** @typedef {any} Paddle */
+
+let didInitializePaddle = false;
+
+/**
+ * @param {PlusTiersElement} element
+ */
+async function initPaddle(element) {
+ /** @type {any} */
+ let Paddle;
+ if (!didInitializePaddle) {
+ // @ts-ignore
+ await import('https://cdn.paddle.com/paddle/v2/paddle.js');
+ Paddle = /** @type {any} */(window).Paddle;
+ // Paddle.initialize({
+ // token: 'live_b32a4d21e35479ee3ea2b849be9',
+ // });
+ }
+ element.shadowRoot?.querySelector('.js-link-paddle')?.addEventListener('click', () => {
+ Paddle.Checkout.open({
+ token: 'live_b32a4d21e35479ee3ea2b849be9',
+ settings: {
+ displayMode: 'overlay',
+ variant: 'one-page',
+ },
+ items: [
+ {
+ priceId: 'pri_01je4ebmn474jsee5eh2gmfan9',
+ quantity: 1,
+ },
+ ],
+ });
+ });
+}
+
customElements.define('darkreader-plus-tiers', PlusTiersElement);
diff --git a/images/icon-gpay.svg b/images/icon-gpay.svg
new file mode 100644
index 0000000..8979835
--- /dev/null
+++ b/images/icon-gpay.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/icon-paypal.svg b/images/icon-paypal.svg
new file mode 100644
index 0000000..904fc5b
--- /dev/null
+++ b/images/icon-paypal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file