diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/LallansIssue.astro | 4 | ||||
| -rw-r--r-- | src/components/ProductPayPalButtons.astro (renamed from src/components/PayPalButtons.astro) | 10 | ||||
| -rw-r--r-- | src/components/Scotsoun.astro | 4 | ||||
| -rw-r--r-- | src/components/SubscriptionPayPalButtons.astro | 112 |
4 files changed, 121 insertions, 9 deletions
diff --git a/src/components/LallansIssue.astro b/src/components/LallansIssue.astro index c8bc6eb..9fe686a 100644 --- a/src/components/LallansIssue.astro +++ b/src/components/LallansIssue.astro @@ -7,7 +7,7 @@ import type LallansIssue from '$types/LallansIssue'; import { Image } from 'astro:assets'; import LallansIssueContributions from './LallansIssueContributions.astro'; import LallansIssueContributors from './LallansIssueContributors.astro'; -import PayPalButtons from './PayPalButtons.astro'; +import ProductPayPalButtons from './ProductPayPalButtons.astro'; interface Props { issue: LallansIssue; @@ -27,7 +27,7 @@ const t = translate(locale); <div class="product__action-block"> <Image alt="" src={issue.img.width274} /> - <PayPalButtons + <ProductPayPalButtons successPageUrl={relativePath(Astro.url.pathname, `payment-success-confirmation`)} productDescription={`Lallans ${issue.issueNumber} | ${issue.issueName}`} shortDescription={`Lallans ${issue.issueNumber}`} diff --git a/src/components/PayPalButtons.astro b/src/components/ProductPayPalButtons.astro index cdea5cb..952e6a8 100644 --- a/src/components/PayPalButtons.astro +++ b/src/components/ProductPayPalButtons.astro @@ -15,7 +15,7 @@ const PAYPAL_CLIENT_ID = env.ENVIRONMENT === 'prod' ? env.PAYPAL_LIVE_CLIENT_ID : env.PAYPAL_SANDBOX_CLIENT_ID; --- -<paypal-buttons +<product-paypal-buttons data-paypal-client-id={PAYPAL_CLIENT_ID} data-success-page-url={successPageUrl} data-product-description={productDescription} @@ -23,14 +23,14 @@ const PAYPAL_CLIENT_ID = data-total-price={totalPrice} > <div id="paypal-button-container"></div> -</paypal-buttons> +</product-paypal-buttons> <script> import { PayPalNamespace, loadScript } from '@paypal/paypal-js'; const backendUrl = '/api'; - class PayPalButtons extends HTMLElement { + class ProductPayPalButtons extends HTMLElement { constructor() { super(); @@ -140,11 +140,11 @@ const PAYPAL_CLIENT_ID = getStringDataAttribute(key: string): string { const value = this.dataset[key]; if (!value || typeof value !== 'string') { - throw new Error(`data-${key} attribute not provided to PayPalButtons component.`); + throw new Error(`data-${key} attribute not provided to ProductPayPalButtons component.`); } return value; } } - customElements.define('paypal-buttons', PayPalButtons); + customElements.define('product-paypal-buttons', ProductPayPalButtons); </script> diff --git a/src/components/Scotsoun.astro b/src/components/Scotsoun.astro index bbf9730..8252e71 100644 --- a/src/components/Scotsoun.astro +++ b/src/components/Scotsoun.astro @@ -4,7 +4,7 @@ import translate from '$i18n/translate'; import tSite from '$i18n/translations/site'; import tComponent from '$i18n/translations/components/scotsoun'; import type Scotsoun from '$types/Scotsoun'; -import PayPalButtons from './PayPalButtons.astro'; +import ProductPayPalButtons from './ProductPayPalButtons.astro'; import relativePath from '$lib/relativePath'; import { getLocaleFromPathOrThrow } from '$lib/getLocaleFromPath'; @@ -27,7 +27,7 @@ const t = translate(locale); </header> <div class="product__action-block"> <Image src={scotsoun.img.width192} alt="" /> - <PayPalButtons + <ProductPayPalButtons successPageUrl={relativePath(Astro.url.pathname, `payment-success-confirmation`)} productDescription={`SSCD${scotsoun.scotsounId} | ${scotsoun.longName}`} shortDescription={`SSCD${scotsoun.scotsounId}`} diff --git a/src/components/SubscriptionPayPalButtons.astro b/src/components/SubscriptionPayPalButtons.astro new file mode 100644 index 0000000..bc77580 --- /dev/null +++ b/src/components/SubscriptionPayPalButtons.astro @@ -0,0 +1,112 @@ +--- +import env from '$lib/env'; +import type Price from '$types/Price'; + +interface Props { + successPageUrl: string; + productDescription: string; + shortDescription: string; + totalPrice: Price; +} + +const { successPageUrl, productDescription, shortDescription, totalPrice } = Astro.props; + +const PAYPAL_CLIENT_ID = + env.ENVIRONMENT === 'prod' ? env.PAYPAL_LIVE_CLIENT_ID : env.PAYPAL_SANDBOX_CLIENT_ID; +--- + +<subscription-paypal-buttons + data-paypal-client-id={PAYPAL_CLIENT_ID} + data-success-page-url={successPageUrl} + data-failure-page-url={failurePageUrl} +> + <div id="paypal-button-container"></div> +</subscription-paypal-buttons> + +<script> + import { PayPalNamespace, loadScript } from '@paypal/paypal-js'; + + const backendUrl = '/api'; + + class ProductPayPalButtons extends HTMLElement { + constructor() { + super(); + + const paypalClientId = this.getStringDataAttribute('paypalClientId'); + + const paypalOptions = { + clientId: paypalClientId, + locale: 'en_GB', + commit: false, + currency: 'GBP', + intent: 'capture', + }; + + loadScript(paypalOptions) + .catch((err) => { + throw new Error('Failed to load the PayPal JS SDK script. ', err); + }) + .then((paypal) => { + const constructButtons = paypal?.Buttons; + if (paypal && constructButtons) { + const successPageUrl = this.dataset['successPageUrl'] ?? '.'; + this.makePaypalButtons(constructButtons, successPageUrl).render( + '#paypal-button-container' + ); + } + }); + } + + makePaypalButtons( + constructButtons: Required<PayPalNamespace>['Buttons'], + successPageUrl: string + ) { + // TODO: figure out where subscriptionId is coming from! Probably it’s going to be + // generated by PayPal on the backend, and you don’t want it here at all. + + // TODO: get emailAddress from user session. + + return constructButtons({ + async createSubscription() { + try { + const response = await fetch("/api/create-subscription", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ subscriptionId, emailAddress }), + }); + + const data = await response.json(); + + if (data?.id) { + console.info('Subscription successful. Redirecting to confirmation page...'); + window.location.href = successPageUrl; + return data.id; + } else { + console.error( + { callback: "createSubscription", serverResponse: data }, + JSON.stringify(data, null, 2), + ); + console.info('Redirecting to failure page...'); + window.location.href = failurePageUrl; + } + } catch (error) { + console.error('Redirecting to failure page, because of an error creating a subscription.' error); + window.location.href = failurePageUrl; + } + }, + }).render("#paypal-button-container"); // Renders the PayPal button + } + + getStringDataAttribute(key: string): string { + const value = this.dataset[key]; + if (!value || typeof value !== 'string') { + throw new Error(`data-${key} attribute not provided to ProductPayPalButtons component.`); + } + return value; + } + } + + customElements.define('product-paypal-buttons', ProductPayPalButtons); +</script> |