JezK

Edit File: sc-stripe-element.entry.js.map

{"file":"sc-stripe-element.entry.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,8iGAA8iG,CAAC;AAC1kG,8BAAe,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8EC2EA,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkKnC;;;;;","names":[],"sources":["src/components/ui/stripe-element/sc-stripe-element.scss?tag=sc-stripe-element","src/components/ui/stripe-element/sc-stripe-element.tsx"],"sourcesContent":["sc-stripe-element {\n display: block;\n --focus-ring: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n}\n\nsc-stripe-element sc-input {\n --sc-input-height-medium: auto;\n}\n\n.sc-stripe * {\n font-family: var(--sc-input-font-family);\n font-weight: var(--sc-input-font-weight);\n font-size: var(--sc-input-font-size);\n}\n\n.sc-stripe-element {\n border-radius: var(--sc-input-border-radius-medium);\n font-size: var(--sc-input-font-size-medium);\n height: var(--sc-input-height-medium);\n width: 100%;\n box-sizing: border-box !important;\n background-color: var(--sc-input-background-color);\n border: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n box-shadow: var(--sc-input-box-shadow);\n transition: var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;\n\n &:hover {\n background-color: var(--sc-input-background-color-hover);\n border-color: var(--sc-input-border-color-hover);\n }\n\n &.StripeElement--focus {\n background-color: var(--sc-input-background-color-focus);\n border-color: var(--sc-input-border-color-focus);\n box-shadow: var(--focus-ring);\n }\n}\n\n.sc-stripe fieldset {\n margin: 0 15px 20px;\n padding: 0;\n border-style: none;\n background-color: #7795f8;\n box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #829fff;\n border-radius: 4px;\n}\n\n.sc-stripe .row {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n margin-left: 15px;\n}\n\n.sc-stripe .row + .row {\n border-top: 1px solid #819efc;\n}\n\n.sc-stripe label {\n width: 15%;\n min-width: 70px;\n padding: 11px 0;\n color: #c4f0ff;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sc-stripe input,\n.sc-stripe button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n border-style: none;\n}\n\n.sc-stripe input:-webkit-autofill {\n -webkit-text-fill-color: #fce883;\n transition: background-color 100000000s;\n -webkit-animation: 1ms void-animation-out;\n}\n\n.sc-stripe .StripeElement--webkit-autofill {\n background: transparent !important;\n}\n\n.sc-stripe .StripeElement {\n width: 100%;\n padding: var(--sc-input-spacing-small);\n}\n\n.sc-stripe input {\n width: 100%;\n padding: 11px;\n color: #fff;\n background-color: transparent;\n -webkit-animation: 1ms void-animation-out;\n}\n\n.sc-stripe input::-webkit-input-placeholder {\n color: #87bbfd;\n}\n\n.sc-stripe input::-moz-placeholder {\n color: #87bbfd;\n}\n\n.sc-stripe input:-ms-input-placeholder {\n color: #87bbfd;\n}\n\n.sc-stripe button {\n display: block;\n width: calc(100% - 30px);\n height: 40px;\n margin: 40px 15px 0;\n background-color: #f6a4eb;\n box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffb9f6;\n border-radius: 4px;\n color: #fff;\n font-weight: 600;\n cursor: pointer;\n}\n\n.sc-stripe button:active {\n background-color: #d782d9;\n box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #e298d8;\n}\n\n.sc-stripe .error svg .base {\n fill: #fff;\n}\n\n.sc-stripe .error svg .glyph {\n fill: #6772e5;\n}\n\n.sc-stripe .error .message {\n color: #fff;\n}\n\n.sc-stripe .success .icon .border {\n stroke: #87bbfd;\n}\n\n.sc-stripe .success .icon .checkmark {\n stroke: #fff;\n}\n\n.sc-stripe .success .title {\n color: #fff;\n}\n\n.sc-stripe .success .message {\n color: #9cdbff;\n}\n\n.sc-stripe .success .reset path {\n fill: #fff;\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { loadStripe } from '@stripe/stripe-js/pure';\nimport { __ } from '@wordpress/i18n';\nimport { openWormhole } from 'stencil-wormhole';\nimport { state as selectedProcessor } from '@store/selected-processor';\n\nimport { Checkout, FormState, FormStateSetter, PaymentInfoAddedParams, ProcessorName } from '../../../types';\nimport { availableProcessors } from '@store/processors/getters';\nimport { StripeElementChangeEvent } from '@stripe/stripe-js';\nimport { createErrorNotice } from '@store/notices/mutations';\nimport { updateFormState } from '@store/form/mutations';\nimport { getResolvedBillingAddress, getResolvedBillingEmail, toStripeAddress } from '@store/checkout/getters';\n\n@Component({\n tag: 'sc-stripe-element',\n styleUrl: 'sc-stripe-element.scss',\n shadow: false,\n})\nexport class ScStripeElement {\n @Element() el: HTMLElement;\n private container: HTMLDivElement;\n private stripe: any;\n private elements: any;\n private element: any;\n\n /** Whether this field is disabled */\n @Prop() disabled: boolean;\n\n /** The checkout session object for finalizing intents */\n @Prop() order: Checkout;\n\n /** Mode for the payment */\n @Prop() mode: 'live' | 'test' = 'live';\n\n /** The input's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** The input's label. Alternatively, you can use the label slot. */\n @Prop() label: string;\n\n /** The input's help text. Alternatively, you can use the help-text slot. */\n @Prop() secureText: string = '';\n\n /** Should we show the label */\n @Prop() showLabel: boolean = true;\n\n /** Inputs focus */\n @Prop({ mutable: true, reflect: true }) hasFocus: boolean;\n\n /** The selected processor id */\n @Prop() selectedProcessorId: ProcessorName;\n\n /** The form state */\n @Prop() formState: FormState;\n\n /** The order/invoice was paid for */\n @Event() scPaid: EventEmitter<void>;\n /** Set the state */\n @Event() scSetState: EventEmitter<FormStateSetter>;\n\n /** Payment information was added */\n @Event() scPaymentInfoAdded: EventEmitter<PaymentInfoAddedParams>;\n\n @State() error: string;\n @State() confirming: boolean;\n\n async componentWillLoad() {\n const processor = (availableProcessors() || []).find(processor => processor.processor_type === 'stripe');\n if (!processor) {\n return;\n }\n const { account_id, publishable_key } = processor?.processor_data || {};\n try {\n this.stripe = await loadStripe(publishable_key, { stripeAccount: account_id });\n this.elements = this.stripe.elements();\n } catch (e) {\n this.error = e?.message || __('Stripe could not be loaded', 'surecart');\n }\n }\n\n /**\n * Watch order status and maybe confirm the order.\n */\n @Watch('formState')\n async maybeConfirmOrder(val: FormState) {\n // must be paying\n if (val !== 'paying') return;\n // this processor is not selected.\n if (selectedProcessor?.id !== 'stripe') return;\n // must be a stripe session\n if (this.order?.payment_intent?.processor_type !== 'stripe') return;\n // must have an external intent id\n if (!this.order?.payment_intent?.external_intent_id) return;\n // must have a secret\n if (!this.order?.payment_intent?.processor_data?.stripe?.client_secret) return;\n // need an external_type\n if (!this.order?.payment_intent?.processor_data?.stripe?.type) return;\n // prevent possible double-charges\n if (this.confirming) return;\n\n this.confirming = true;\n try {\n let response;\n if (this.order?.payment_intent?.processor_data?.stripe?.type == 'setup') {\n response = await this.confirmCardSetup(this.order?.payment_intent?.processor_data?.stripe.client_secret);\n } else {\n response = await this.confirmCardPayment(this.order?.payment_intent?.processor_data?.stripe?.client_secret);\n }\n if (response?.error) {\n this.error = response.error.message;\n throw response.error;\n }\n\n this.scSetState.emit('PAID');\n // paid\n this.scPaid.emit();\n } catch (e) {\n updateFormState('REJECT');\n createErrorNotice(e);\n if (e.message) {\n this.error = e.message;\n }\n this.confirming = false;\n this.scSetState.emit('REJECT');\n }\n }\n\n /** Get billing details for Stripe. */\n getBillingDetails() {\n const order = this.order;\n const address = toStripeAddress(getResolvedBillingAddress(order));\n const email = getResolvedBillingEmail(order);\n return {\n ...(order?.name ? { name: order.name } : {}),\n ...(email ? { email } : {}),\n ...(order?.phone ? { phone: order.phone } : {}),\n ...(address ? { address } : {}),\n };\n }\n\n /** Confirm card payment */\n @Method('confirmPayment')\n async confirmCardPayment(secret) {\n return this.stripe.confirmCardPayment(secret, {\n payment_method: {\n card: this.element,\n billing_details: this.getBillingDetails(),\n },\n });\n }\n\n /** Confirm card setup. */\n @Method('confirmSetup')\n async confirmCardSetup(secret) {\n return this.stripe.confirmCardSetup(secret, {\n payment_method: {\n card: this.element,\n billing_details: this.getBillingDetails(),\n },\n });\n }\n\n componentDidLoad() {\n if (!this.elements) {\n return;\n }\n // get the computed styles.\n const styles = getComputedStyle(document.body);\n\n this.elements\n .create('card', {\n style: {\n base: {\n 'color': styles.getPropertyValue('--sc-input-label-color'),\n 'fontSize': '16px',\n 'iconColor': styles.getPropertyValue('--sc-stripe-icon-color'),\n 'fontSmoothing': 'antialiased',\n '::placeholder': {\n color: styles.getPropertyValue('--sc-input-placeholder-color'),\n },\n },\n invalid: {\n 'color': styles.getPropertyValue('--sc-color-error-500'),\n ':focus': {\n color: styles.getPropertyValue('--sc-input-label-color'),\n },\n },\n },\n })\n .mount(this.container);\n\n this.element = this.elements.getElement('card');\n\n this.element.on('change', (event: StripeElementChangeEvent) => {\n if (event.complete) {\n this.scPaymentInfoAdded.emit({\n processor_type: 'stripe',\n checkout_id: this.order.id,\n currency: this.order.currency,\n total_amount: this.order.total_amount,\n line_items: this.order.line_items,\n payment_method: {\n billing_details: {\n name: this?.order?.name ? this.order.name : '',\n email: this?.order?.email ? this.order.email : '',\n },\n },\n });\n }\n\n this.error = event?.error?.message ? event.error.message : '';\n });\n this.element.on('focus', () => (this.hasFocus = true));\n this.element.on('blur', () => (this.hasFocus = false));\n }\n\n render() {\n return (\n <Fragment>\n <sc-form-control class=\"sc-stripe\" size={this.size} label={this.label}>\n <div class=\"sc-stripe-element\" ref={el => (this.container = el as HTMLDivElement)}></div>\n </sc-form-control>\n {this.error && (\n <sc-text\n style={{\n 'color': 'var(--sc-color-danger-500)',\n '--font-size': 'var(--sc-font-size-small)',\n 'marginTop': '0.5em',\n }}\n >\n {this.error}\n </sc-text>\n )}\n </Fragment>\n );\n }\n}\n\nopenWormhole(ScStripeElement, ['order', 'mode', 'selectedProcessorId', 'formState'], false);\n"],"version":3}