FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
surecart
/
dist
/
components
/
esm
Edit File: sc-stripe-element.entry.js
import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-745b6bec.js'; import { p as pure } from './pure-963214cb.js'; import { o as openWormhole } from './consumer-e06b16d3.js'; import { s as state } from './watchers-86705798.js'; import { a as availableProcessors } from './getters-b5084f91.js'; import { c as createErrorNotice } from './mutations-ed6d0770.js'; import { u as updateFormState } from './mutations-6bbbe793.js'; import { t as toStripeAddress, b as getResolvedBillingAddress } from './getters-347239e7.js'; import './index-06061d4e.js'; import './util-50af2a83.js'; import './utils-cd1431df.js'; import './index-c5a96d53.js'; import './remove-query-args-938c53ea.js'; import './add-query-args-0e2a8393.js'; import './google-a86aa761.js'; import './currency-a0c9bff4.js'; import './store-627acec4.js'; import './price-af9f0dbf.js'; import './address-6bd346f2.js'; const scStripeElementCss = "sc-stripe-element{display:block;--focus-ring:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary)}sc-stripe-element sc-input{--sc-input-height-medium:auto}.sc-stripe *{font-family:var(--sc-input-font-family);font-weight:var(--sc-input-font-weight);font-size:var(--sc-input-font-size)}.sc-stripe-element{border-radius:var(--sc-input-border-radius-medium);font-size:var(--sc-input-font-size-medium);height:var(--sc-input-height-medium);width:100%;box-sizing:border-box !important;background-color:var(--sc-input-background-color);border:solid 1px var(--sc-input-border-color, var(--sc-input-border));box-shadow:var(--sc-input-box-shadow);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}.sc-stripe-element:hover{background-color:var(--sc-input-background-color-hover);border-color:var(--sc-input-border-color-hover)}.sc-stripe-element.StripeElement--focus{background-color:var(--sc-input-background-color-focus);border-color:var(--sc-input-border-color-focus);box-shadow:var(--focus-ring)}.sc-stripe fieldset{margin:0 15px 20px;padding:0;border-style:none;background-color:#7795f8;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;border-radius:4px}.sc-stripe .row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:15px}.sc-stripe .row+.row{border-top:1px solid #819efc}.sc-stripe label{width:15%;min-width:70px;padding:11px 0;color:#c4f0ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-stripe input,.sc-stripe button{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border-style:none}.sc-stripe input:-webkit-autofill{-webkit-text-fill-color:#fce883;transition:background-color 100000000s;-webkit-animation:1ms void-animation-out}.sc-stripe .StripeElement--webkit-autofill{background:transparent !important}.sc-stripe .StripeElement{width:100%;padding:var(--sc-input-spacing-small)}.sc-stripe input{width:100%;padding:11px;color:#fff;background-color:transparent;-webkit-animation:1ms void-animation-out}.sc-stripe input::-webkit-input-placeholder{color:#87bbfd}.sc-stripe input::-moz-placeholder{color:#87bbfd}.sc-stripe input:-ms-input-placeholder{color:#87bbfd}.sc-stripe button{display:block;width:calc(100% - 30px);height:40px;margin:40px 15px 0;background-color:#f6a4eb;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;border-radius:4px;color:#fff;font-weight:600;cursor:pointer}.sc-stripe button:active{background-color:#d782d9;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}.sc-stripe .error svg .base{fill:#fff}.sc-stripe .error svg .glyph{fill:#6772e5}.sc-stripe .error .message{color:#fff}.sc-stripe .success .icon .border{stroke:#87bbfd}.sc-stripe .success .icon .checkmark{stroke:#fff}.sc-stripe .success .title{color:#fff}.sc-stripe .success .message{color:#9cdbff}.sc-stripe .success .reset path{fill:#fff}"; const ScStripeElementStyle0 = scStripeElementCss; const ScStripeElement = class { constructor(hostRef) { registerInstance(this, hostRef); this.scPaid = createEvent(this, "scPaid", 7); this.scSetState = createEvent(this, "scSetState", 7); this.scPaymentInfoAdded = createEvent(this, "scPaymentInfoAdded", 7); this.disabled = undefined; this.order = undefined; this.mode = 'live'; this.size = 'medium'; this.label = undefined; this.secureText = ''; this.showLabel = true; this.hasFocus = undefined; this.selectedProcessorId = undefined; this.formState = undefined; this.error = undefined; this.confirming = undefined; } async componentWillLoad() { const processor = (availableProcessors() || []).find(processor => processor.processor_type === 'stripe'); if (!processor) { return; } const { account_id, publishable_key } = (processor === null || processor === void 0 ? void 0 : processor.processor_data) || {}; try { this.stripe = await pure.loadStripe(publishable_key, { stripeAccount: account_id }); this.elements = this.stripe.elements(); } catch (e) { this.error = (e === null || e === void 0 ? void 0 : e.message) || wp.i18n.__('Stripe could not be loaded', 'surecart'); } } /** * Watch order status and maybe confirm the order. */ async maybeConfirmOrder(val) { var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y; // must be paying if (val !== 'paying') return; // this processor is not selected. if ((state === null || state === void 0 ? void 0 : state.id) !== 'stripe') return; // must be a stripe session if (((_b = (_a = this.order) === null || _a === void 0 ? void 0 : _a.payment_intent) === null || _b === void 0 ? void 0 : _b.processor_type) !== 'stripe') return; // must have an external intent id if (!((_d = (_c = this.order) === null || _c === void 0 ? void 0 : _c.payment_intent) === null || _d === void 0 ? void 0 : _d.external_intent_id)) return; // must have a secret if (!((_h = (_g = (_f = (_e = this.order) === null || _e === void 0 ? void 0 : _e.payment_intent) === null || _f === void 0 ? void 0 : _f.processor_data) === null || _g === void 0 ? void 0 : _g.stripe) === null || _h === void 0 ? void 0 : _h.client_secret)) return; // need an external_type if (!((_m = (_l = (_k = (_j = this.order) === null || _j === void 0 ? void 0 : _j.payment_intent) === null || _k === void 0 ? void 0 : _k.processor_data) === null || _l === void 0 ? void 0 : _l.stripe) === null || _m === void 0 ? void 0 : _m.type)) return; // prevent possible double-charges if (this.confirming) return; this.confirming = true; try { let response; if (((_r = (_q = (_p = (_o = this.order) === null || _o === void 0 ? void 0 : _o.payment_intent) === null || _p === void 0 ? void 0 : _p.processor_data) === null || _q === void 0 ? void 0 : _q.stripe) === null || _r === void 0 ? void 0 : _r.type) == 'setup') { response = await this.confirmCardSetup((_u = (_t = (_s = this.order) === null || _s === void 0 ? void 0 : _s.payment_intent) === null || _t === void 0 ? void 0 : _t.processor_data) === null || _u === void 0 ? void 0 : _u.stripe.client_secret); } else { response = await this.confirmCardPayment((_y = (_x = (_w = (_v = this.order) === null || _v === void 0 ? void 0 : _v.payment_intent) === null || _w === void 0 ? void 0 : _w.processor_data) === null || _x === void 0 ? void 0 : _x.stripe) === null || _y === void 0 ? void 0 : _y.client_secret); } if (response === null || response === void 0 ? void 0 : response.error) { this.error = response.error.message; throw response.error; } this.scSetState.emit('PAID'); // paid this.scPaid.emit(); } catch (e) { updateFormState('REJECT'); createErrorNotice(e); if (e.message) { this.error = e.message; } this.confirming = false; this.scSetState.emit('REJECT'); } } /** Get billing details for Stripe. */ getBillingDetails() { const order = this.order; const address = toStripeAddress(getResolvedBillingAddress(order)); return { ...((order === null || order === void 0 ? void 0 : order.name) ? { name: order.name } : {}), ...((order === null || order === void 0 ? void 0 : order.email) ? { email: order.email } : {}), ...((order === null || order === void 0 ? void 0 : order.phone) ? { phone: order.phone } : {}), ...(address ? { address } : {}), }; } /** Confirm card payment */ async confirmCardPayment(secret) { return this.stripe.confirmCardPayment(secret, { payment_method: { card: this.element, billing_details: this.getBillingDetails(), }, }); } /** Confirm card setup. */ async confirmCardSetup(secret) { return this.stripe.confirmCardSetup(secret, { payment_method: { card: this.element, billing_details: this.getBillingDetails(), }, }); } componentDidLoad() { if (!this.elements) { return; } // get the computed styles. const styles = getComputedStyle(document.body); this.elements .create('card', { style: { base: { 'color': styles.getPropertyValue('--sc-input-label-color'), 'fontSize': '16px', 'iconColor': styles.getPropertyValue('--sc-stripe-icon-color'), 'fontSmoothing': 'antialiased', '::placeholder': { color: styles.getPropertyValue('--sc-input-placeholder-color'), }, }, invalid: { 'color': styles.getPropertyValue('--sc-color-error-500'), ':focus': { color: styles.getPropertyValue('--sc-input-label-color'), }, }, }, }) .mount(this.container); this.element = this.elements.getElement('card'); this.element.on('change', (event) => { var _a, _b, _c; if (event.complete) { this.scPaymentInfoAdded.emit({ processor_type: 'stripe', checkout_id: this.order.id, currency: this.order.currency, total_amount: this.order.total_amount, line_items: this.order.line_items, payment_method: { billing_details: { name: ((_a = this === null || this === void 0 ? void 0 : this.order) === null || _a === void 0 ? void 0 : _a.name) ? this.order.name : '', email: ((_b = this === null || this === void 0 ? void 0 : this.order) === null || _b === void 0 ? void 0 : _b.email) ? this.order.email : '', }, }, }); } this.error = ((_c = event === null || event === void 0 ? void 0 : event.error) === null || _c === void 0 ? void 0 : _c.message) ? event.error.message : ''; }); this.element.on('focus', () => (this.hasFocus = true)); this.element.on('blur', () => (this.hasFocus = false)); } render() { return (h(Fragment, { key: '43a9b69acbe5dbf0b445ac5c208d3c4e3a0905d5' }, h("sc-form-control", { key: '74a5b40ff4b16303d7255b2ec80b8b25550a7acb', class: "sc-stripe", size: this.size, label: this.label }, h("div", { key: '6f41ba335c024916224bedb8a19c7a3288dbdf00', class: "sc-stripe-element", ref: el => (this.container = el) })), this.error && (h("sc-text", { key: '733feda679648d610a5152bfb2206bc42752e6e0', style: { 'color': 'var(--sc-color-danger-500)', '--font-size': 'var(--sc-font-size-small)', 'marginTop': '0.5em', } }, this.error)))); } get el() { return getElement(this); } static get watchers() { return { "formState": ["maybeConfirmOrder"] }; } }; openWormhole(ScStripeElement, ['order', 'mode', 'selectedProcessorId', 'formState'], false); ScStripeElement.style = ScStripeElementStyle0; export { ScStripeElement as sc_stripe_element }; //# sourceMappingURL=sc-stripe-element.entry.js.map
Save
Back