JezK

Edit File: sc-stripe-add-method.cjs.entry.js.map

{"file":"sc-stripe-add-method.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,yPAAyP,CAAC;AACvR,gCAAe,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;kFC6CA,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8EAkEJ,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8EA4BF,UAAE;;;;;mVAUH,UAAE,2sDA2BvB,UAAE;;;;;;;;;;","names":[],"sources":["src/components/ui/sc-stripe-add-method/sc-stripe-add-method.scss?tag=sc-stripe-add-method","src/components/ui/sc-stripe-add-method/sc-stripe-add-method.tsx"],"sourcesContent":["sc-stripe-add-method {\n display: block;\n\n [hidden] {\n display: none;\n }\n}\n\n.loader {\n display: grid;\n height: 128px;\n gap: 2em;\n\n &__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1em;\n }\n\n &__details {\n display: grid;\n gap: 0.5em;\n }\n}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { Stripe } from '@stripe/stripe-js';\nimport { loadStripe } from '@stripe/stripe-js/pure';\nimport { __ } from '@wordpress/i18n';\nimport apiFetch from '../../../functions/fetch';\nimport { PaymentIntent } from '../../../types';\nimport { addQueryArgs } from '@wordpress/url';\n\n@Component({\n tag: 'sc-stripe-add-method',\n styleUrl: 'sc-stripe-add-method.scss',\n shadow: false,\n})\nexport class ScStripeAddMethod {\n /** Holds the element container. */\n private container: HTMLDivElement;\n // holds the elements instance.\n private elements: any;\n // holds the stripe element.\n private element: any;\n // holds the stripe instance.\n private stripe: Stripe;\n\n @Prop() liveMode: boolean = true;\n @Prop() customerId: string;\n @Prop() successUrl: string;\n\n @State() loading: boolean;\n @State() loaded: boolean;\n @State() error: string;\n @State() paymentIntent: PaymentIntent;\n\n componentWillLoad() {\n this.createPaymentIntent();\n }\n\n @Watch('paymentIntent')\n async handlePaymentIntentCreate() {\n // we need this data.\n if (!this.paymentIntent?.processor_data?.stripe?.publishable_key || !this.paymentIntent?.processor_data?.stripe?.account_id) return;\n\n // check if stripe has been initialized\n if (!this.stripe) {\n try {\n this.stripe = await loadStripe(this.paymentIntent?.processor_data?.stripe?.publishable_key, { stripeAccount: this.paymentIntent?.processor_data?.stripe?.account_id });\n } catch (e) {\n this.error = e?.message || __('Stripe could not be loaded', 'surecart');\n // don't continue.\n return; \n }\n }\n\n // load the element.\n // we need a stripe instance and client secret.\n if (!this.paymentIntent?.processor_data?.stripe?.client_secret || !this.container) {\n console.warn('do not have client secret or container');\n return;\n }\n\n // get the computed styles.\n const styles = getComputedStyle(document.body);\n\n // we have what we need, load elements.\n this.elements = this.stripe.elements({\n clientSecret: this.paymentIntent?.processor_data?.stripe?.client_secret,\n appearance: {\n variables: {\n colorPrimary: styles.getPropertyValue('--sc-color-primary-500'),\n colorText: styles.getPropertyValue('--sc-input-label-color'),\n borderRadius: styles.getPropertyValue('--sc-input-border-radius-medium'),\n colorBackground: styles.getPropertyValue('--sc-input-background-color'),\n fontSizeBase: styles.getPropertyValue('--sc-input-font-size-medium'),\n },\n rules: {\n '.Input': {\n border: styles.getPropertyValue('--sc-input-border'),\n },\n '.Input::placeholder': {\n color: styles.getPropertyValue('--sc-input-placeholder-color'),\n },\n },\n },\n });\n\n // create the payment element.\n this.elements\n .create('payment', {\n wallets: {\n applePay: 'never',\n googlePay: 'never',\n },\n })\n .mount('.sc-payment-element-container');\n this.element = this.elements.getElement('payment');\n this.element.on('ready', () => (this.loaded = true));\n }\n\n async createPaymentIntent() {\n try {\n this.loading = true;\n this.error = '';\n this.paymentIntent = await apiFetch({\n method: 'POST',\n path: 'surecart/v1/payment_intents',\n data: {\n processor_type: 'stripe',\n live_mode: this.liveMode,\n customer_id: this.customerId,\n refresh_status: true,\n },\n });\n } catch (e) {\n this.error = e?.message || __('Something went wrong', 'surecart');\n } finally {\n this.loading = false;\n }\n }\n\n /**\n * Handle form submission.\n */\n async handleSubmit(e) {\n e.preventDefault();\n this.loading = true;\n try {\n const confirmed = await this.stripe.confirmSetup({\n elements: this.elements,\n confirmParams: {\n return_url: addQueryArgs(this.successUrl, {\n payment_intent: this.paymentIntent?.id,\n }),\n },\n redirect: 'always',\n });\n if (confirmed?.error) {\n this.error = confirmed.error.message;\n throw confirmed.error;\n }\n } catch (e) {\n console.error(e);\n this.error = e?.message || __('Something went wrong', 'surecart');\n this.loading = false;\n }\n }\n\n render() {\n return (\n <sc-form onScFormSubmit={e => this.handleSubmit(e)}>\n {this.error && (\n <sc-alert open={!!this.error} type=\"danger\">\n <span slot=\"title\">{__('Error', 'surecart')}</span>\n {this.error}\n </sc-alert>\n )}\n <div class=\"loader\" hidden={this.loaded}>\n <div class=\"loader__row\">\n <div style={{ width: '50%' }}>\n <sc-skeleton style={{ width: '50%', marginBottom: '0.5em' }}></sc-skeleton>\n <sc-skeleton></sc-skeleton>\n </div>\n <div style={{ flex: '1' }}>\n <sc-skeleton style={{ width: '50%', marginBottom: '0.5em' }}></sc-skeleton>\n <sc-skeleton></sc-skeleton>\n </div>\n <div style={{ flex: '1' }}>\n <sc-skeleton style={{ width: '50%', marginBottom: '0.5em' }}></sc-skeleton>\n <sc-skeleton></sc-skeleton>\n </div>\n </div>\n <div class=\"loader__details\">\n <sc-skeleton style={{ height: '1rem' }}></sc-skeleton>\n <sc-skeleton style={{ height: '1rem', width: '30%' }}></sc-skeleton>\n </div>\n </div>\n <div hidden={!this.loaded} class=\"sc-payment-element-container\" ref={el => (this.container = el as HTMLDivElement)}></div>\n\n <sc-button type=\"primary\" submit full loading={this.loading}>\n {__('Save Payment Method', 'surecart')}\n </sc-button>\n </sc-form>\n );\n }\n}\n"],"version":3}