diff options
Diffstat (limited to 'src/components/PayPalButtons.astro')
| -rw-r--r-- | src/components/PayPalButtons.astro | 150 |
1 files changed, 0 insertions, 150 deletions
diff --git a/src/components/PayPalButtons.astro b/src/components/PayPalButtons.astro deleted file mode 100644 index cdea5cb..0000000 --- a/src/components/PayPalButtons.astro +++ /dev/null @@ -1,150 +0,0 @@ ---- -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; ---- - -<paypal-buttons - data-paypal-client-id={PAYPAL_CLIENT_ID} - data-success-page-url={successPageUrl} - data-product-description={productDescription} - data-short-description={shortDescription} - data-total-price={totalPrice} -> - <div id="paypal-button-container"></div> -</paypal-buttons> - -<script> - import { PayPalNamespace, loadScript } from '@paypal/paypal-js'; - - const backendUrl = '/api'; - - class PayPalButtons 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 - ) { - const productDescription = this.getStringDataAttribute('productDescription'); - const shortDescription = this.getStringDataAttribute('shortDescription'); - const totalPrice = this.getStringDataAttribute('totalPrice'); - - return constructButtons({ - // This function is called to set up the transaction details without actually carrying it out - async createOrder() { - const body = JSON.stringify({ - productDescription, - shortDescription, - totalPrice, - }); - const headers = { - 'Content-Type': 'application/json', - }; - - let response; - try { - response = await fetch(`${backendUrl}/order`, { method: 'POST', body, headers }); - } catch (err) { - throw new Error(`Failed to create order. ${err}`); - } - - if (!response.ok) { - throw new Error(` - Failed to create order. Backend response was - ${response.status} ${response.statusText}. ${await response.text()} - `); - } - - const { orderId, approvalLink } = await response.json(); - console.info(` - Successfully created order with ID - ${orderId}. Approval link: ${approvalLink} - `); - return orderId; - }, - - // This function is called after payment is confirmed - async onApprove(data) { - const body = JSON.stringify({ - id: data.orderID, - isApproved: true, - }); - const headers = { - 'Content-Type': 'application/json', - }; - - let response; - try { - response = await fetch(`${backendUrl}/order`, { method: 'PATCH', body, headers }); - } catch (err) { - throw new Error(`Failed to capture order. ${err}`); - } - - if (!response.ok) { - throw new Error(` - Failed to capture order. Backend response was ${response.status} - ${response.statusText}. ${await response.text()} - `); - } - - const { orderId, requestStatus } = await response.json(); - console.info(` - Successfully captured order with ID ${orderId}, - request status is ${requestStatus}. - `); - - console.info('Redirecting to confirmation page...'); - window.location.href = successPageUrl; - }, - }); - } - - 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.`); - } - return value; - } - } - - customElements.define('paypal-buttons', PayPalButtons); -</script> |
