Skip to content

Commit 1182915

Browse files
alexanderbyalexanderby
committed
Publish 2024-12-13
1 parent a265b9b commit 1182915

File tree

3 files changed

+148
-45
lines changed

3 files changed

+148
-45
lines changed

‎elements/paddle.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// @ts-check
2+
3+
/** @typedef {any} Paddle */
4+
5+
let didInitializePaddle = false;
6+
7+
/**
8+
* @param {{plusButton?: Element | null; feeButton?: Element | null; corpButton?: Element | null}} options
9+
*/
10+
export async function initPaddle(options) {
11+
/** @type {any} */
12+
let Paddle;
13+
if (!didInitializePaddle) {
14+
// @ts-ignore
15+
await import('https://cdn.paddle.com/paddle/v2/paddle.js');
16+
Paddle = /** @type {any} */(window).Paddle;
17+
Paddle.Initialize({
18+
token: 'live_b32a4d21e35479ee3ea2b849be9',
19+
});
20+
}
21+
22+
/**
23+
* @param {Element} element
24+
* @param {string} priceId
25+
*/
26+
const initClick = (element, priceId) => {
27+
element.addEventListener('click', () => {
28+
Paddle.Checkout.open({
29+
settings: {
30+
displayMode: 'overlay',
31+
theme: 'dark',
32+
variant: 'one-page',
33+
},
34+
items: [
35+
{
36+
priceId,
37+
quantity: 1,
38+
},
39+
],
40+
});
41+
});
42+
};
43+
44+
if (options.plusButton) {
45+
initClick(options.plusButton, 'pri_01je4ebmn474jsee5eh2gmfan9');
46+
}
47+
if (options.feeButton) {
48+
initClick(options.feeButton, 'pri_01jf039mt65me4f2exbgpg3p9m');
49+
}
50+
if (options.corpButton) {
51+
initClick(options.corpButton, 'pri_01jf03sd119pqskcgmj48e0zq2');
52+
}
53+
}

‎elements/pay-tiers.js‎

Lines changed: 92 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @ts-check
22

33
import {country, isEUCountry} from './locales.js';
4+
import {initPaddle} from './paddle.js';
45
import {clicker} from './stats.js';
56
import {
67
createHTMLElement as html,
@@ -170,17 +171,35 @@ const htmlText = `
170171
</div>
171172
</label>
172173
</div>
173-
<div class="button-wrapper">
174-
<a class="button-link button-link--paypal js-link-paypal" href="${DEFAULT_LINK_PAYPAL}" target="_blank" rel="noopener" data-s="d-side-paypal">
174+
<div class="button-wrapper button-wrapper-paddle">
175+
<a class="button-link button-link--paypal button-link--inactive js-link-paypal" href="${DEFAULT_LINK_PAYPAL}" target="_blank" rel="noopener" data-s="d-side-paypal">
175176
<span class="button-link__text"><span data-text="pay_with">Pay with</span> <span class="button-link__text--paypal">PayPal</span></span>
176177
</a>
177-
<a class="button-link button-link--card js-link-stripe" href="${DEFAULT_LINK_STRIPE}" target="_blank" rel="noopener" data-s="d-side-stripe">
178+
<a class="button-link button-link--card button-link--inactive js-link-stripe" href="${DEFAULT_LINK_STRIPE}" target="_blank" rel="noopener" data-s="d-side-stripe">
178179
<i class="button-link__card-icon js-card-icon"></i>
179180
<span class="button-link__text" data-text="card">Debit or Credit Card</span>
180181
</a>
181182
<a class="button-link button-link--other button-link--inactive js-link-other" href="${Links.Redirect.CORPORATE}" target="_blank" rel="noopener" data-s="d-side-other">
182183
<span class="button-link__text" data-text="more">Contact us</span>
183184
</a>
185+
<a class="button-link button-link--paddle js-link-paddle" href="#pay" data-s="d-side-paddle">
186+
<span class="button-link__text">
187+
<span data-text="pay">Pay</span>
188+
<span class="js-price-regular">${DEFAULT_PRICE_REGULAR}</span>
189+
</span>
190+
</a>
191+
<a class="button-link button-link--paddle js-link-paddle-corp" href="#pay-corp" data-s="d-side-paddlecorp" style="display:none;">
192+
<span class="button-link__text">
193+
<span data-text="subscribe">Pay <span class="js-price-corporate">${DEFAULT_PRICE_CORP}</span></span>
194+
</span>
195+
</a>
196+
</div>
197+
<div class="payment-methods">
198+
<i class="payment-methods__paypal"></i>
199+
<i class="payment-methods__gpay"></i>
200+
<i class="payment-methods__visa"></i>
201+
<i class="payment-methods__mastercard"></i>
202+
<i class="payment-methods__amex"></i>
184203
</div>
185204
</div>
186205
</section>
@@ -396,10 +415,12 @@ const cssText = `
396415
display: flex;
397416
flex-direction: column;
398417
gap: 0.25rem;
418+
justify-content: center;
399419
margin-top: 0.25rem;
400420
}
401421
.button-wrapper .button-link {
402422
margin: 0;
423+
max-width: 20rem;
403424
}
404425
.button-link--inactive {
405426
display: none;
@@ -503,6 +524,10 @@ const cssText = `
503524
text-transform: none;
504525
transform: none;
505526
}
527+
.button-link--paddle {
528+
background-color: var(--color-control) !important;
529+
font-weight: bold;
530+
}
506531
.currencies {
507532
align-items: center;
508533
display: flex;
@@ -578,6 +603,46 @@ const cssText = `
578603
background-position-x: -144px;
579604
}
580605
606+
.payment-methods {
607+
align-items: center;
608+
display: flex;
609+
flex-direction: row;
610+
gap: 0.75rem;
611+
justify-content: center;
612+
margin-top: 0.25rem;
613+
}
614+
.payment-methods i {
615+
background-position: center;
616+
background-repeat: no-repeat;
617+
background-size: contain;
618+
display: inline-block;
619+
}
620+
.payment-methods__paypal {
621+
aspect-ratio: 101 / 32;
622+
background-image: url(/images/paypal-logo-white.svg);
623+
height: 1rem;
624+
}
625+
.payment-methods__gpay {
626+
aspect-ratio: 41 / 17;
627+
background-image: url(/images/icon-gpay.svg);
628+
height: 1rem;
629+
}
630+
.payment-methods__visa {
631+
aspect-ratio: 1 / 1;
632+
background-image: url('https://buy.paddle.com/images/icons/visa.svg');
633+
height: 1.5rem;
634+
}
635+
.payment-methods__mastercard {
636+
aspect-ratio: 1 / 1;
637+
background-image: url('https://buy.paddle.com/images/icons/mastercard.svg');
638+
height: 1.5rem;
639+
}
640+
.payment-methods__amex {
641+
aspect-ratio: 1 / 1;
642+
background-image: url('https://buy.paddle.com/images/icons/amex.svg');
643+
height: 1.5rem;
644+
}
645+
581646
.pr-small {
582647
display: none;
583648
}
@@ -684,12 +749,15 @@ const cssText = `
684749
}
685750
.tiers {
686751
flex-direction: row;
687-
justify-content: space-between;
688-
margin: 1rem 0;
752+
gap: 1rem;
753+
justify-content: center;
754+
margin: 0.5rem 0rem;
755+
width: 100%;
689756
}
690757
.tier {
691-
padding: 0 1rem;
692-
width: 100%;
758+
flex: none;
759+
min-width: 13rem;
760+
padding: 0rem;
693761
}
694762
.button-wrapper {
695763
flex-direction: row;
@@ -702,6 +770,8 @@ class PayTiersElement extends HTMLElement {
702770
super();
703771
const shadowRoot = this.attachShadow({mode: 'open'});
704772

773+
const PADDLE_MODE = true;
774+
705775
if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrom')) {
706776
return;
707777
}
@@ -732,12 +802,18 @@ class PayTiersElement extends HTMLElement {
732802
});
733803
s('.js-link-paypal').each((node) => {
734804
/** @type {HTMLAnchorElement} */(node).href = tier === Tiers.DISCOUNT ? Links.PayPal.DISCOUNT[currency] : Links.PayPal.REGULAR[currency];
735-
node.classList.toggle('button-link--inactive', tier === Tiers.CORPORATE);
805+
if (!PADDLE_MODE) {
806+
node.classList.toggle('button-link--inactive', tier === Tiers.CORPORATE);
807+
}
736808
});
737809
s('.js-link-other').each((node) => {
738810
/** @type {HTMLAnchorElement} */(node).href = tier === Tiers.DISCOUNT ? Links.Redirect.DISCOUNT : tier === Tiers.CORPORATE ? Links.Redirect.CORPORATE : Links.Redirect.REGULAR;
739-
node.classList.toggle('button-link--inactive', tier !== Tiers.CORPORATE);
811+
if (!PADDLE_MODE) {
812+
node.classList.toggle('button-link--inactive', tier !== Tiers.CORPORATE);
813+
}
740814
});
815+
s('.js-link-paddle').each((node) => node.style.display = tier === Tiers.CORPORATE ? 'none' : '');
816+
s('.js-link-paddle-corp').each((node) => node.style.display = tier === Tiers.CORPORATE ? '' : 'none');
741817

742818
s('.js-price-regular').each((node) => node.textContent = Prices.REGULAR[currency]);
743819
s('.js-price-discount').each((node) => node.textContent = Prices.DISCOUNT[currency]);
@@ -756,6 +832,13 @@ class PayTiersElement extends HTMLElement {
756832
});
757833
s('.js-card-icon').each((node) => node.classList.add('button-link__card-icon--cn'));
758834
}
835+
836+
if (PADDLE_MODE) {
837+
initPaddle({
838+
feeButton: shadowRoot.querySelector('.js-link-paddle'),
839+
corpButton: shadowRoot.querySelector('.js-link-paddle-corp'),
840+
});
841+
}
759842
}
760843
}
761844

‎elements/plus-tiers.js‎

Lines changed: 3 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @ts-check
22

33
import {country, isEUCountry} from './locales.js';
4+
import {initPaddle} from './paddle.js';
45
import {clicker} from './stats.js';
56
import {
67
createHTMLElement as html,
@@ -616,44 +617,10 @@ class PlusTiersElement extends HTMLElement {
616617
s('.js-card-icon').each((node) => node.classList.add('button-link__card-icon--cn'));
617618
}
618619

619-
initPaddle(this);
620-
}
621-
}
622-
623-
/** @typedef {any} Paddle */
624-
625-
let didInitializePaddle = false;
626-
627-
/**
628-
* @param {PlusTiersElement} element
629-
*/
630-
async function initPaddle(element) {
631-
/** @type {any} */
632-
let Paddle;
633-
if (!didInitializePaddle) {
634-
// @ts-ignore
635-
await import('https://cdn.paddle.com/paddle/v2/paddle.js');
636-
Paddle = /** @type {any} */(window).Paddle;
637-
Paddle.Initialize({
638-
token: 'live_b32a4d21e35479ee3ea2b849be9',
620+
initPaddle({
621+
plusButton: shadowRoot.querySelector('.js-link-paddle'),
639622
});
640623
}
641-
element.shadowRoot?.querySelector('.js-link-paddle')?.addEventListener('click', () => {
642-
Paddle.Checkout.open({
643-
token: 'live_b32a4d21e35479ee3ea2b849be9',
644-
settings: {
645-
displayMode: 'overlay',
646-
theme: 'dark',
647-
variant: 'one-page',
648-
},
649-
items: [
650-
{
651-
priceId: 'pri_01je4ebmn474jsee5eh2gmfan9',
652-
quantity: 1,
653-
},
654-
],
655-
});
656-
});
657624
}
658625

659626
customElements.define('darkreader-plus-tiers', PlusTiersElement);

0 commit comments

Comments
 (0)