@primer-io/primer-js 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/custom-elements.json +58 -17
- package/dist/primer-loader.d.ts +150 -81
- package/dist/primer-loader.js +10 -10
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
{
|
|
66
66
|
"kind": "variable",
|
|
67
67
|
"name": "Ee",
|
|
68
|
-
"default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this.disableLoader=!1;this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this._eventListenerController=null;this.locale=\"en-GB\";this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.sdkContextController=new za(this),this.sdkStateController=new $a(this),this.primerEventsController=new Ft(this),this.styleProcessingController=new ja(this),this.vaultManagerController=new ia(this),this.cardNetworkController=new Ma(this),this.achPaymentEventsController=new Cr(this),this.headlessSdkController=new br(this)}set jsInitialized(e){this.requestUpdate(),this._jsInitialized=e}get jsInitialized(){return this._jsInitialized}get primerJS(){return this.headlessSdkController?.primerJSInstance??void 0}connectedCallback(){super.connectedCallback(),this.sdkContextController.setEventsController(this.primerEventsController),this._eventListenerController=new AbortController,document.addEventListener(\"primer:card-submit\",this.handleExternalCardSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:vault-submit\",this.handleExternalVaultSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:show-other-payments-toggle\",this.handleExternalShowOtherPaymentsToggle.bind(this),{signal:this._eventListenerController.signal})}attributeChangedCallback(e,a,i){e===
|
|
68
|
+
"default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this.disableLoader=!1;this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this._eventListenerController=null;this.locale=\"en-GB\";this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.sdkContextController=new za(this),this.sdkStateController=new $a(this),this.primerEventsController=new Ft(this),this.styleProcessingController=new ja(this),this.vaultManagerController=new ia(this),this.cardNetworkController=new Ma(this),this.achPaymentEventsController=new Cr(this),this.headlessSdkController=new br(this)}set jsInitialized(e){this.requestUpdate(),this._jsInitialized=e}get jsInitialized(){return this._jsInitialized}get primerJS(){return this.headlessSdkController?.primerJSInstance??void 0}connectedCallback(){super.connectedCallback(),this.sdkContextController.setEventsController(this.primerEventsController),this._eventListenerController=new AbortController,document.addEventListener(\"primer:card-submit\",this.handleExternalCardSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:vault-submit\",this.handleExternalVaultSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:show-other-payments-toggle\",this.handleExternalShowOtherPaymentsToggle.bind(this),{signal:this._eventListenerController.signal})}attributeChangedCallback(e,a,i){e===Su.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(i):super.attributeChangedCallback(e,a,i)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkStateController?.currentState.isLoading&&this.sdkStateController.forceCompleteLoading(),this._eventListenerController&&(this._eventListenerController.abort(),this._eventListenerController=null),super.disconnectedCallback()}willUpdate(e){e.has(\"options\")&&(this.options?.locale&&(Ni(this.options?.locale)?this.locale=Li(this.options?.locale):E.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to default locale `en-GB`\")),ki(this.locale||\"en-GB\"))}updated(){let e=getComputedStyle(this);this.sdkContextController.setComputedStyles(e),this.checkLoadingStateChange()}handleExternalCardSubmit(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:card-submit\",e.detail)}handleExternalVaultSubmit(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:vault-submit\",e.detail)}handleExternalShowOtherPaymentsToggle(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:show-other-payments-toggle\",e.detail)}checkLoadingStateChange(){let e=this.sdkStateController?.currentState.isLoading||!1;this.previousLoadingState&&!e&&(this.jsInitialized=!0,Q({eventName:\"CHECKOUT_FLOW_STARTED\"})),this.previousLoadingState=e,e&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkStateController?.currentState.isLoading&&(E.warn(\"Loading timeout in component, forcing completion\"),this.sdkStateController.forceCompleteLoading(),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!e&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let e=this.sdkStateController.currentState,a=e.isLoading,i=e.primerJsError,n=!a&&!i;return p` ${L(a,()=>g)} ${L(i,()=>p`<primer-checkout-error></primer-checkout-error>`)} ${L(n,()=>p`<slot name=\"main\" @slotchange=${this.onSlotChange}></slot>${L(this.hasAssignedContent,()=>g,()=>p`<primer-main></primer-main>`)} `,()=>g)} `}addEventListener(e,a,i){super.addEventListener(e,a,i)}removeEventListener(e,a,i){super.removeEventListener(e,a,i)}}"
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
71
|
"kind": "function",
|
|
@@ -77,11 +77,11 @@
|
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
"kind": "function",
|
|
80
|
-
"name": "
|
|
80
|
+
"name": "Eu"
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
83
|
"kind": "function",
|
|
84
|
-
"name": "
|
|
84
|
+
"name": "Tu"
|
|
85
85
|
},
|
|
86
86
|
{
|
|
87
87
|
"kind": "variable",
|
|
@@ -201,17 +201,17 @@
|
|
|
201
201
|
{
|
|
202
202
|
"kind": "variable",
|
|
203
203
|
"name": "oe",
|
|
204
|
-
"default": "class extends v{constructor(){super(...arguments);this.configuration=null;this.headlessUtils=null;this.formData={};this.errors={};this.touchedFields=new Set;this.dirtyFields=new Set;this.focusedField=null;this.submitted=!1;this.countryOptions=[];this._initializationTask=new D(this,{task:async([e,a])=>{if(!e||!a)return _;let i=this.extractFieldConfig(e);return await this.initializeCountryOptions(),i},args:()=>[this.configuration,this.headlessUtils]})}connectedCallback(){super.connectedCallback(),this._initializationTask.value}extractFieldConfig(e){if(e?.checkoutModules){let a=e.checkoutModules.find(i=>i.type===\"BILLING_ADDRESS\");if(a?.options){let i=a.options;return Object.keys(Wi).reduce((n,o)=>({...n,[o]:i[o]??!1}),{})}}return this.defaultFieldConfig}async initializeCountryOptions(){try{let e=ji(\"en\");this.countryOptions=[...e.map(([n,o])=>({value:n,label:o}))],this.requestUpdate(\"countryOptions\");let a=
|
|
204
|
+
"default": "class extends v{constructor(){super(...arguments);this.configuration=null;this.headlessUtils=null;this.formData={};this.errors={};this.touchedFields=new Set;this.dirtyFields=new Set;this.focusedField=null;this.submitted=!1;this.countryOptions=[];this._initializationTask=new D(this,{task:async([e,a])=>{if(!e||!a)return _;let i=this.extractFieldConfig(e);return await this.initializeCountryOptions(),i},args:()=>[this.configuration,this.headlessUtils]})}connectedCallback(){super.connectedCallback(),this._initializationTask.value}extractFieldConfig(e){if(e?.checkoutModules){let a=e.checkoutModules.find(i=>i.type===\"BILLING_ADDRESS\");if(a?.options){let i=a.options;return Object.keys(Wi).reduce((n,o)=>({...n,[o]:i[o]??!1}),{})}}return this.defaultFieldConfig}async initializeCountryOptions(){try{let e=ji(\"en\");this.countryOptions=[...e.map(([n,o])=>({value:n,label:o}))],this.requestUpdate(\"countryOptions\");let a=Ii();if(a===\"en\"||a===\"en-GB\"||a.startsWith(\"en-\"))return;if(await dl(a)){let n=ji(a);this.countryOptions=[...n.map(([o,s])=>({value:o,label:s}))],this.requestUpdate(\"countryOptions\")}}catch(e){E.errorWithDatadog(\"Failed to load country locale\",{error:e})}}get fieldConfig(){return this.extractFieldConfig(this.configuration)}get defaultFieldConfig(){return Object.keys(Wi).reduce((e,a)=>({...e,[a]:!1}),{})}get shouldShowForm(){return this.fieldConfig.postalCode}handleInput(e,a){this.formData={...this.formData,[e]:a},this.dirtyFields.add(e),(this.submitted||this.dirtyFields.has(e)&&this.touchedFields.has(e))&&this.validateField(e),this.dispatchEvent(new CustomEvent(\"primer-billing-address-change\",{detail:this.formData,bubbles:!0,composed:!0}))}handleFocus(e){this.focusedField=e}handleBlur(e){this.focusedField=null,this.touchedFields.add(e),this.validateField(e)}validateField(e){let a=this.formData[e],i=this.fieldConfig[e];if(!i){delete this.errors[e];return}if(i&&(!a||a.trim()===\"\")){let n=`${e}ErrorRequired`;this.errors={...this.errors,[e]:b(\"This field is required\",{id:n})}}else{let n={...this.errors};delete n[e],this.errors=n}}validateForm(){return Object.keys(Wi).forEach(e=>{let a=e;this.fieldConfig[a]&&this.validateField(a)}),Object.keys(this.errors).length===0}async validateForSubmission(){if(!this.shouldShowForm)return!0;this.submitted=!0,Object.keys(this.fieldConfig).forEach(a=>{this.fieldConfig[a]&&this.touchedFields.add(a)});let e=this.validateForm();return this.requestUpdate(),await this.updateComplete,e}async submitToSDK(){if(this.headlessUtils?.setBillingAddress)try{return await this.headlessUtils.setBillingAddress(this.formData),this.dispatchEvent(new CustomEvent(\"primer-billing-address-submit\",{detail:this.formData,bubbles:!0,composed:!0})),!0}catch(e){return E.errorWithDatadog(\"Failed to set billing address\",{error:e}),!1}return!0}shouldShowError(e){let a=!!this.errors[e],i=this.dirtyFields.has(e),n=this.touchedFields.has(e);return a&&(this.submitted||i&&n)}render(){return this._initializationTask.render({pending:()=>g,error:()=>g,complete:()=>this.shouldShowForm?(this.removeAttribute(\"hidden\"),p`<div class=\"billing-address-form\"><div class=\"billing-address-title\">${b(\"Billing address\",{id:\"billingAddressLabel\"})}</div>${L(this.fieldConfig.countryCode,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"countryCode\"} .hasError=${this.shouldShowError(\"countryCode\")} ><primer-input-label slot=\"label\">${b(\"Country code\",{id:\"countryCodeLabel\"})}</primer-input-label><primer-select slot=\"input\" id=\"countryCode\" name=\"countryCode\" .value=${this.formData.countryCode||\"\"} .options=${this.countryOptions} .hasError=${this.shouldShowError(\"countryCode\")} placeholder=${b(\"Select a country\",{id:\"countrySelectPlaceholder\"})} @input=${e=>this.handleInput(\"countryCode\",e.detail)} @focus=${()=>this.handleFocus(\"countryCode\")} @blur=${()=>this.handleBlur(\"countryCode\")} ></primer-select>${L(this.shouldShowError(\"countryCode\"),()=>p`<primer-input-error slot=\"error\">${this.errors.countryCode}</primer-input-error>`)}</primer-input-wrapper>`)} ${L(this.fieldConfig.firstName||this.fieldConfig.lastName,()=>p`<div class=\"billing-address-row\">${L(this.fieldConfig.firstName,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"firstName\"} .hasError=${this.shouldShowError(\"firstName\")} ><primer-input-label slot=\"label\">${b(\"First name\",{id:\"firstNameLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"firstName\" name=\"firstName\" type=\"text\" .value=${this.formData.firstName||\"\"} placeholder=${b(\"First name\",{id:\"firstNamePlaceholder\"})} @input=${e=>this.handleInput(\"firstName\",e.detail)} @focus=${()=>this.handleFocus(\"firstName\")} @blur=${()=>this.handleBlur(\"firstName\")} ></primer-input>${L(this.shouldShowError(\"firstName\"),()=>p`<primer-input-error slot=\"error\">${this.errors.firstName}</primer-input-error>`)}</primer-input-wrapper>`)} ${L(this.fieldConfig.lastName,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"lastName\"} .hasError=${this.shouldShowError(\"lastName\")} ><primer-input-label slot=\"label\">${b(\"Last name\",{id:\"lastNameLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"lastName\" name=\"lastName\" type=\"text\" .value=${this.formData.lastName||\"\"} placeholder=${b(\"Last name\",{id:\"lastNamePlaceholder\"})} @input=${e=>this.handleInput(\"lastName\",e.detail)} @focus=${()=>this.handleFocus(\"lastName\")} @blur=${()=>this.handleBlur(\"lastName\")} ></primer-input>${L(this.shouldShowError(\"lastName\"),()=>p`<primer-input-error slot=\"error\">${this.errors.lastName}</primer-input-error>`)}</primer-input-wrapper>`)}</div>`)} ${L(this.fieldConfig.addressLine1,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"addressLine1\"} .hasError=${this.shouldShowError(\"addressLine1\")} ><primer-input-label slot=\"label\">${b(\"Address line 1\",{id:\"addressLine1\"})}</primer-input-label><primer-input slot=\"input\" id=\"addressLine1\" name=\"addressLine1\" type=\"text\" .value=${this.formData.addressLine1||\"\"} placeholder=${b(\"Address line 1\",{id:\"addressLine1Placeholder\"})} @input=${e=>this.handleInput(\"addressLine1\",e.detail)} @focus=${()=>this.handleFocus(\"addressLine1\")} @blur=${()=>this.handleBlur(\"addressLine1\")} ></primer-input>${L(this.shouldShowError(\"addressLine1\"),()=>p`<primer-input-error slot=\"error\">${this.errors.addressLine1}</primer-input-error>`)}</primer-input-wrapper>`)} ${L(this.fieldConfig.addressLine2,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"addressLine2\"} .hasError=${this.shouldShowError(\"addressLine2\")} ><primer-input-label slot=\"label\">${b(\"Address line 2\",{id:\"addressLine2\"})}</primer-input-label><primer-input slot=\"input\" id=\"addressLine2\" name=\"addressLine2\" type=\"text\" .value=${this.formData.addressLine2||\"\"} placeholder=${b(\"Address line 2\",{id:\"addressLine2Placeholder\"})} @input=${e=>this.handleInput(\"addressLine2\",e.detail)} @focus=${()=>this.handleFocus(\"addressLine2\")} @blur=${()=>this.handleBlur(\"addressLine2\")} ></primer-input>${L(this.shouldShowError(\"addressLine2\"),()=>p`<primer-input-error slot=\"error\">${this.errors.addressLine2}</primer-input-error>`)}</primer-input-wrapper>`)} ${L(this.fieldConfig.postalCode||this.fieldConfig.city,()=>p`<div class=\"billing-address-row\">${L(this.fieldConfig.postalCode,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"postalCode\"} .hasError=${this.shouldShowError(\"postalCode\")} ><primer-input-label slot=\"label\">${b(\"Postal code\",{id:\"postalCodeLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"postalCode\" name=\"postalCode\" type=\"text\" .value=${this.formData.postalCode||\"\"} placeholder=${b(\"90210\",{id:\"postalCodePlaceholder\"})} @input=${e=>this.handleInput(\"postalCode\",e.detail)} @focus=${()=>this.handleFocus(\"postalCode\")} @blur=${()=>this.handleBlur(\"postalCode\")} ></primer-input>${L(this.shouldShowError(\"postalCode\"),()=>p`<primer-input-error slot=\"error\">${this.errors.postalCode}</primer-input-error>`)}</primer-input-wrapper>`)} ${L(this.fieldConfig.city,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"city\"} .hasError=${this.shouldShowError(\"city\")} ><primer-input-label slot=\"label\">${b(\"City\",{id:\"cityLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"city\" name=\"city\" type=\"text\" .value=${this.formData.city||\"\"} placeholder=${b(\"Cape Town\",{id:\"cityPlaceholder\"})} @input=${e=>this.handleInput(\"city\",e.detail)} @focus=${()=>this.handleFocus(\"city\")} @blur=${()=>this.handleBlur(\"city\")} ></primer-input>${L(this.shouldShowError(\"city\"),()=>p`<primer-input-error slot=\"error\">${this.errors.city}</primer-input-error>`)}</primer-input-wrapper>`)}</div>`)} ${L(this.fieldConfig.state,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"state\"} .hasError=${this.shouldShowError(\"state\")} ><primer-input-label slot=\"label\">${b(\"State / Region / County\",{id:\"stateLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"state\" name=\"state\" type=\"text\" .value=${this.formData.state||\"\"} placeholder=${b(\"State / Region / County\",{id:\"statePlaceholder\"})} @input=${e=>this.handleInput(\"state\",e.detail)} @focus=${()=>this.handleFocus(\"state\")} @blur=${()=>this.handleBlur(\"state\")} ></primer-input>${L(this.shouldShowError(\"state\"),()=>p`<primer-input-error slot=\"error\">${this.errors.state}</primer-input-error>`)}</primer-input-wrapper>`)}</div>`):(this.setAttribute(\"hidden\",\"\"),g)})}}"
|
|
205
205
|
},
|
|
206
206
|
{
|
|
207
207
|
"kind": "variable",
|
|
208
208
|
"name": "W",
|
|
209
|
-
"default": "class extends v{constructor(){super();this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.contextEventsController=null;this.hasSlottedSubmit=!1;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\";this.animationDuration=300;this._isHandlingContextEvent=!1;this._contextVaultSubmitListener=null;this.deleteAssetConfig=null;this.handleSubmitSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasSlottedSubmit=i.length>0};this.handleToggleEditMode=e=>{this.isEditMode=e.detail,this.deletePaymentMethodId=null,this.isEditMode&&this.vaultItemContext&&this.vaultItemContext.setSelectedVaultedPaymentMethod(null)};this.handleDeletePaymentMethod=async e=>{if(this.deletePaymentMethodId=e.detail,this.deletePaymentMethodId&&this.vaultManagerContext&&this.headlessUtils){let a=this.vaultManagerContext.vaultedPaymentMethods.find(i=>i.id===this.deletePaymentMethodId);a&&(this.deleteAssetConfig=await
|
|
209
|
+
"default": "class extends v{constructor(){super();this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.contextEventsController=null;this.hasSlottedSubmit=!1;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\";this.animationDuration=300;this._isHandlingContextEvent=!1;this._contextVaultSubmitListener=null;this.deleteAssetConfig=null;this.handleSubmitSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasSlottedSubmit=i.length>0};this.handleToggleEditMode=e=>{this.isEditMode=e.detail,this.deletePaymentMethodId=null,this.isEditMode&&this.vaultItemContext&&this.vaultItemContext.setSelectedVaultedPaymentMethod(null)};this.handleDeletePaymentMethod=async e=>{if(this.deletePaymentMethodId=e.detail,this.deletePaymentMethodId&&this.vaultManagerContext&&this.headlessUtils){let a=this.vaultManagerContext.vaultedPaymentMethods.find(i=>i.id===this.deletePaymentMethodId);a&&(this.deleteAssetConfig=await Ir(a,this.headlessUtils,this.vaultManagerContext))}};this.handleCancelDelete=()=>{this.deletePaymentMethodId=null,this.deleteAssetConfig=null};this.handleConfirmDelete=async()=>{if(!this.vaultManagerContext?.deleteVaultedPaymentMethod||!this.deletePaymentMethodId){this.errorMessage=b(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"});return}try{this.isDeleting=!0,await this.vaultManagerContext.deleteVaultedPaymentMethod(this.deletePaymentMethodId),this.deletePaymentMethodId=null,this.deleteAssetConfig=null}catch(e){this.errorMessage=e instanceof Error?e.message:b(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"})}finally{this.isDeleting=!1}};this.handlePaymentError=e=>{let a=e.detail?.error;this.errorMessage=a instanceof Error?a.message:b(\"payment_processing_error\",{id:\"payment_processing_error\"})};this.handleCloseError=()=>{this.errorMessage=\"\"};this.handleSlotButtonClick=e=>{let i=e.target.closest(\"button, primer-button\");if(!i)return;let n=i;this.isSubmitButton(n)&&(e.preventDefault(),this.submitVaultPayment())};this.handleDirectSubmit=()=>{this.submitVaultPayment()};this.handleContextVaultSubmit=e=>{if(!this._isHandlingContextEvent){this._isHandlingContextEvent=!0;try{e.target!==this&&(e.stopPropagation(),this.submitVaultPayment())}finally{this._isHandlingContextEvent=!1}}};new Jt(this,{defaultOptions:{keyframeOptions:{duration:Number(getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-duration\").trim().replace(\"ms\",\"\")),easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim()}}})}getAnimationConfig(){return{keyframeOptions:{duration:this.animationDuration,easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim(),fill:\"both\"}}}isSubmitButton(e){let a=e.tagName.toLowerCase(),i=a===\"button\",n=a===\"primer-button\";return i&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))||n&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))}async submitVaultPayment(){if(this.vaultManagerContext)try{await this.vaultManagerContext.startVaultedPaymentFlow()}catch(e){this.dispatchEvent(new CustomEvent(\"primer-vault-payment-error\",{detail:{error:e},bubbles:!0,composed:!0}))}}getPaymentMethodName(e){if(!this.vaultManagerContext)return\"\";let a=this.vaultManagerContext.vaultedPaymentMethods.find(i=>i.id===e);if(!a)return\"\";try{return Ji(a).description||\"\"}catch{return\"\"}}setupContextEventListeners(){this.contextEventsController?.host&&this._contextVaultSubmitListener&&this.contextEventsController.host.addEventListener(\"primer:vault-submit\",this._contextVaultSubmitListener)}cleanupContextEventListeners(){this.contextEventsController?.host&&this._contextVaultSubmitListener&&this.contextEventsController.host.removeEventListener(\"primer:vault-submit\",this._contextVaultSubmitListener)}connectedCallback(){super.connectedCallback(),this.addEventListener(\"click\",this.handleSlotButtonClick),this.addEventListener(\"primer:vault-submit\",this.handleDirectSubmit),this._contextVaultSubmitListener=e=>{this.handleContextVaultSubmit(e)},this.setupContextEventListeners()}disconnectedCallback(){this.removeEventListener(\"click\",this.handleSlotButtonClick),this.removeEventListener(\"primer:vault-submit\",this.handleDirectSubmit),this.cleanupContextEventListeners(),super.disconnectedCallback()}renderLoadingOverlay(){return p`<div class=\"loading-overlay\" ${Ct({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ><primer-spinner size=\"medium\" color=\"var(--primer-color-loader)\" ></primer-spinner></div>`}renderDeleteConfirmation(){if(!this.deletePaymentMethodId||!this.deleteAssetConfig)return g;let e=this.getPaymentMethodName(this.deletePaymentMethodId);return p`<div class=\"delete-confirmation-container\"><primer-button disabled variant=\"secondary\"><primer-payment-method-content .assetConfig=${this.deleteAssetConfig} ></primer-payment-method-content></primer-button><primer-vault-delete-confirmation .isDeleting=${this.isDeleting} .paymentMethodId=${this.deletePaymentMethodId} .paymentMethodName=${e} @confirm-delete=${this.handleConfirmDelete} @cancel-delete=${this.handleCancelDelete} ${Ct({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-delete-confirmation></div>`}renderPaymentMethodItem(e){return this.deletePaymentMethodId===e.id?g:p`<primer-vault-payment-method-item .paymentMethod=${e} .isEditMode=${this.isEditMode} @delete-payment-method=${this.handleDeletePaymentMethod} ${Ct({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-method-item>`}renderPaymentMethodList(){let e=this.vaultManagerContext?.vaultedPaymentMethods||[],a=!this.isEditMode&&e.length>0&&!this.deletePaymentMethodId;return p`<div class=\"payment-methods-list\">${e.map(i=>this.renderPaymentMethodItem(i))} ${L(a,()=>p`<div class=\"submit-button-container\"><slot name=\"submit-button\" @slotchange=${this.handleSubmitSlotChange} ${Ct({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></slot>${L(!this.hasSlottedSubmit,()=>p`<primer-vault-payment-submit class=\"submit-button\" @primer-vault-payment-error=${this.handlePaymentError} ></primer-vault-payment-submit>`)}</div>`,()=>g)}</div>`}render(){if(!this.vaultManagerContext?.enabled||this.vaultManagerContext?.headless)return g;let e=this.vaultManagerContext.vaultedPaymentMethods.length>0,a=this.vaultManagerContext.isLoading,i=this.vaultManagerContext.isUpdating;return p` ${L(!this.vaultManagerContext?.showEmptyState&&!e,()=>g,()=>p`<slot name=\"vault-empty-state\"><div class=\"vault-manager ${i?\"is-updating\":\"\"}\"><primer-vault-manager-header .isEditMode=${this.isEditMode} .hasPaymentMethods=${e} @toggle-edit-mode=${this.handleToggleEditMode} ></primer-vault-manager-header>${L(this.errorMessage,()=>p`<primer-vault-error-message .errorMessage=${this.errorMessage} @close-error=${this.handleCloseError} ${Ct({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-error-message>`,()=>g)}<div class=\"vault-manager-content\">${L(!a&&!e,()=>p`<div class=\"content-container\"><primer-vault-empty-state ${Ct({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-empty-state></div>`,()=>g)} ${L(!a&&e,()=>p`<div class=\"content-container\">${L(this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>this.renderPaymentMethodList())}</div>`,()=>g)}</div>${L(i,()=>this.renderLoadingOverlay(),()=>g)}</div></slot>`)} `}}"
|
|
210
210
|
},
|
|
211
211
|
{
|
|
212
212
|
"kind": "variable",
|
|
213
213
|
"name": "Ce",
|
|
214
|
-
"default": "class extends v{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new D(this,{task:async([e,a,i])=>await
|
|
214
|
+
"default": "class extends v{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new D(this,{task:async([e,a,i])=>await Ir(e,a,i),args:()=>[this.paymentMethod,this.headlessUtils,this.vaultManagerContext]});this.handleClick=()=>{this.isEditMode||!this.vaultManagerContext||!this.paymentMethod||(this.isSelected()?this.vaultItemContext?.setSelectedVaultedPaymentMethod(null):this.vaultItemContext?.setSelectedVaultedPaymentMethod(this.paymentMethod))};this.handleDeleteClick=e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent(\"delete-payment-method\",{detail:this.paymentMethod?.id,bubbles:!0,composed:!0}))}}isSelected(){if(!this.vaultManagerContext||!this.paymentMethod)return!1;let e=this.vaultItemContext?.selectedVaultedPaymentMethod;return!!e&&e.id===this.paymentMethod.id}render(){return this._getAssetsTask.render({error:()=>g,complete:e=>{let a=this.isSelected()?\"checked\":\"default\",i=!1,n=e?.description;return p`<div class=\"payment-method-wrapper\"><div class=\"payment-method-container\"><primer-button variant=\"secondary\" class=\"payment-method-button ${e.shouldShowCVV?\"with-cvv\":\"\"}\" selectable ?disabled=${this.isEditMode} selectionState=${a} .flex=${i} @click=${this.handleClick} ><primer-payment-method-content .assetConfig=${e} ></primer-payment-method-content>${L(e.shouldShowCVV&&this.isSelected()&&!this.isEditMode,()=>p`<div class=\"payment-method-row mt-2\"><span class=\"flex-center\"><primer-icon name=\"lock\" size=\"sm\"></primer-icon><span class=\"payment-method-subtitle\"> Input the card CVV for a secure payment</span ></span><span class=\"cell-2\"><primer-vault-cvv-input .paymentMethod=\"${this.paymentMethod}\" ><span slot=\"label\"></span></primer-vault-cvv-input></span></div>`,()=>g)}</primer-button>${this.isEditMode?p`<primer-button variant=\"tertiary\" class=\"delete-button\" @click=${this.handleDeleteClick} aria-label=${`${b(\"delete\",{id:\"delete\"})} ${n}`} ><primer-icon name=\"close\" size=\"sm\"></primer-icon></primer-button>`:g}</div></div>`}})}}"
|
|
215
215
|
},
|
|
216
216
|
{
|
|
217
217
|
"kind": "variable",
|
|
@@ -251,7 +251,7 @@
|
|
|
251
251
|
{
|
|
252
252
|
"kind": "variable",
|
|
253
253
|
"name": "te",
|
|
254
|
-
"default": "class extends v{constructor(){super(...arguments);this.hideLabels=!1;this.disabled=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.formErrorMessage=null;this.paymentMethodSelectionSent=!1;this.paymentManagers=new Map;this.clientOptions=null;this.headlessUtils=null;this.analyticsUtils=null;this.contextEventsController=null;this.cardFormProvider=new $(this,{context:Zt,initialValue:null});this.eventsController=new Ft(this);this._contextCardSubmitListener=null;this._isHandlingContextEvent=!1;this.inputControllers=new Map;this.setupCardFormTask=new D(this,{task:([e])=>{if(!e?.manager)return _;let{manager:a}=e,i=a.createHostedInputs(),{cardNumberInput:n,expiryInput:o,cvvInput:s}=i;return this.cardFormProvider.setValue({cardholderNameInput:i.cardholderNameInput,cardNumberInput:n,expiryInput:o,cvvInput:s,setCardholderName:l=>{a.setCardholderName(l),this.shouldRequireCardholderName&&a.validate?.().then(c=>{let y=c?.validationErrors?.find(A=>A.name===_l.cardholderName),
|
|
254
|
+
"default": "class extends v{constructor(){super(...arguments);this.hideLabels=!1;this.disabled=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.formErrorMessage=null;this.paymentMethodSelectionSent=!1;this.paymentManagers=new Map;this.clientOptions=null;this.headlessUtils=null;this.analyticsUtils=null;this.contextEventsController=null;this.cardFormProvider=new $(this,{context:Zt,initialValue:null});this.eventsController=new Ft(this);this._contextCardSubmitListener=null;this._isHandlingContextEvent=!1;this.inputControllers=new Map;this.setupCardFormTask=new D(this,{task:([e])=>{if(!e?.manager)return _;let{manager:a}=e,i=a.createHostedInputs(),{cardNumberInput:n,expiryInput:o,cvvInput:s}=i;return this.cardFormProvider.setValue({cardholderNameInput:i.cardholderNameInput,cardNumberInput:n,expiryInput:o,cvvInput:s,setCardholderName:l=>{a.setCardholderName(l),this.shouldRequireCardholderName&&a.validate?.().then(c=>{let y=c?.validationErrors?.find(A=>A.name===_l.cardholderName),m=this.inputControllers.get(\"cardholderName\");m&&m.updateMetaFromValidation({valid:!1,error:y?.message||y?.error||null,errorCode:y?.message||y?.error||null})})},setCardNetwork:l=>{this.selectedCardNetwork=l},validate:()=>a.validate(),submit:l=>a.submit(l),hideLabels:this.hideLabels,disabled:this.disabled,setSubmissionState:l=>{this.inputControllers.forEach(c=>{c.setSubmitted(l)})},propagateValidationErrors:l=>{l&&l.forEach(c=>{let h=c.field||c.name,y=c.message||c.error,m=_l[h];if(m){let A=this.inputControllers.get(m);if(A){let C={valid:!1,error:y,errorCode:y};A.updateMetaFromValidation(C)}}})},registerInputController:(l,c)=>{this.inputControllers.set(l,c)},unregisterInputController:l=>{this.inputControllers.delete(l)},onUserInteraction:()=>{this.sendPaymentMethodSelectionEvent(),this.checkAndSendPaymentDetailsEnteredEvent()}}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.paymentDetailsEnteredSent=!1;this.handleSlotButtonClick=e=>{let i=e.target.closest(\"button, primer-button\");if(!i)return;let n=i;this.isSubmitButton(n)&&(e.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=e=>{e.stopPropagation(),this.submitCardPayment()};this.handleContextCardSubmit=e=>{if(!this._isHandlingContextEvent){this._isHandlingContextEvent=!0;try{e.target!==this&&(e.stopPropagation(),this.submitCardPayment())}finally{this._isHandlingContextEvent=!1}}};this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0};this.handleFormSubmit=e=>{e.preventDefault(),e.stopPropagation(),this.submitCardPayment()}}updated(e){if(super.updated(e),(e.has(\"hideLabels\")||e.has(\"disabled\"))&&this.cardFormProvider.value&&this.cardFormProvider.setValue({...this.cardFormProvider.value,hideLabels:this.hideLabels,disabled:this.disabled}),e.has(\"contextEventsController\")){let a=e.get(\"contextEventsController\");a?.host&&this._contextCardSubmitListener&&a.host.removeEventListener(\"primer:card-submit\",this._contextCardSubmitListener),this.setupContextEventListeners()}}get shouldShowCardholderName(){let e=this.clientOptions?.card?.cardholderName;return typeof e?.visible==\"boolean\"?e.visible:!0}get shouldRequireCardholderName(){if(!this.shouldShowCardholderName)return!1;let e=this.clientOptions?.card?.cardholderName;return typeof e?.required==\"boolean\"?e.required:!0}sendPaymentMethodSelectionEvent(){this.paymentMethodSelectionSent||(this.paymentMethodSelectionSent=!0,Q({eventName:\"PAYMENT_METHOD_SELECTION\",paymentMethod:\"PAYMENT_CARD\"}))}checkAndSendPaymentDetailsEnteredEvent(){if(this.paymentDetailsEnteredSent)return;let e=this.inputControllers.get(\"cardNumber\"),a=this.inputControllers.get(\"expire\"),i=this.inputControllers.get(\"cvv\"),n=e?.meta?.dirty===!0,o=a?.meta?.dirty===!0,s=i?.meta?.dirty===!0,l=!0;this.shouldRequireCardholderName&&(l=this.inputControllers.get(\"cardholderName\")?.meta?.dirty===!0),n&&o&&s&&l&&(this.sendPaymentDetailsEnteredEvent(),this.paymentDetailsEnteredSent=!0)}sendPaymentDetailsEnteredEvent(){Q({eventName:\"PAYMENT_DETAILS_ENTERED\",paymentMethod:\"PAYMENT_CARD\"})}connectedCallback(){super.connectedCallback(),this.addEventListener(\"click\",this.handleSlotButtonClick),this.addEventListener(\"primer:card-submit\",this.handleDirectSubmit),this._contextCardSubmitListener=e=>{this.handleContextCardSubmit(e)},this.setupContextEventListeners()}disconnectedCallback(){this.removeEventListener(\"click\",this.handleSlotButtonClick),this.removeEventListener(\"primer:card-submit\",this.handleDirectSubmit),this.cleanupContextEventListeners(),super.disconnectedCallback()}setupContextEventListeners(){this.contextEventsController?.host&&this._contextCardSubmitListener&&this.contextEventsController.host.addEventListener(\"primer:card-submit\",this._contextCardSubmitListener)}cleanupContextEventListeners(){this.contextEventsController?.host&&this._contextCardSubmitListener&&this.contextEventsController.host.removeEventListener(\"primer:card-submit\",this._contextCardSubmitListener)}isSubmitButton(e){let a=e.tagName.toLowerCase(),i=a===\"button\",n=a===\"primer-button\";return i&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))||n&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))}async submitCardPayment(){let e=this.cardFormProvider.value;if(!e||this.disabled)return;this.formErrorMessage=null,e.setSubmissionState?.(!0);let a=this.querySelector(\"primer-billing-address\")||this.renderRoot.querySelector(\"primer-billing-address\"),i=!0;a&&(i=await a.validateForSubmission());let n=await e.validate?.();if(n?.valid&&i){if(a&&!await a.submitToSDK()){let c=b(\"tokenizationError\",{id:\"tokenizationError\"});this.formErrorMessage=c,this.eventsController.dispatchFormSubmitErrors([{field:\"billingAddress\",name:\"billingAddress\",error:\"BILLING_ADDRESS_SUBMISSION_FAILED\",message:c}]);return}let o=this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0;await e.submit?.(o);let s={success:!0};this.eventsController.dispatchFormSubmitSuccess(s)}else{let o=n?.validationErrors;e.propagateValidationErrors?.(o||[]),this.cardFormProvider.setValue({...e,errors:o}),this.eventsController.dispatchFormSubmitErrors(o)}}render(){return this.setupCardFormTask.status===yt.ERROR||this.setupCardFormTask.status===yt.INITIAL?g:p`<form @submit=${this.handleFormSubmit}><slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot>${this.setupCardFormTask.render({complete:()=>L(this.hasAssignedContent,()=>g,()=>p`<div class=\"card-form\"><primer-input-card-number></primer-input-card-number><div class=\"card-form-row\"><primer-input-card-expiry></primer-input-card-expiry><primer-input-cvv></primer-input-cvv></div>${L(this.shouldShowCardholderName,()=>p`<primer-input-card-holder-name></primer-input-card-holder-name>`,()=>g)}<primer-billing-address></primer-billing-address></div><primer-card-form-submit></primer-card-form-submit><primer-error-message message=\"${this.formErrorMessage||\"\"}\" ?visible=\"${!!this.formErrorMessage}\" ></primer-error-message>`)})}</form>`}}"
|
|
255
255
|
},
|
|
256
256
|
{
|
|
257
257
|
"kind": "variable",
|
|
@@ -310,7 +310,7 @@
|
|
|
310
310
|
},
|
|
311
311
|
{
|
|
312
312
|
"kind": "function",
|
|
313
|
-
"name": "
|
|
313
|
+
"name": "Jw"
|
|
314
314
|
}
|
|
315
315
|
],
|
|
316
316
|
"exports": [
|
|
@@ -726,7 +726,7 @@
|
|
|
726
726
|
"kind": "js",
|
|
727
727
|
"name": "injectDarkTheme",
|
|
728
728
|
"declaration": {
|
|
729
|
-
"name": "
|
|
729
|
+
"name": "Tu",
|
|
730
730
|
"module": "dist/primer-loader.js"
|
|
731
731
|
}
|
|
732
732
|
},
|
|
@@ -734,7 +734,7 @@
|
|
|
734
734
|
"kind": "js",
|
|
735
735
|
"name": "injectLightTheme",
|
|
736
736
|
"declaration": {
|
|
737
|
-
"name": "
|
|
737
|
+
"name": "Eu",
|
|
738
738
|
"module": "dist/primer-loader.js"
|
|
739
739
|
}
|
|
740
740
|
},
|
|
@@ -758,7 +758,7 @@
|
|
|
758
758
|
"kind": "js",
|
|
759
759
|
"name": "loadPrimer",
|
|
760
760
|
"declaration": {
|
|
761
|
-
"name": "
|
|
761
|
+
"name": "Jw",
|
|
762
762
|
"module": "dist/primer-loader.js"
|
|
763
763
|
}
|
|
764
764
|
}
|
|
@@ -894,6 +894,14 @@
|
|
|
894
894
|
"module": "./controllers/primer-js"
|
|
895
895
|
}
|
|
896
896
|
},
|
|
897
|
+
{
|
|
898
|
+
"kind": "js",
|
|
899
|
+
"name": "VaultAPI",
|
|
900
|
+
"declaration": {
|
|
901
|
+
"name": "VaultAPI",
|
|
902
|
+
"module": "./controllers/primer-js"
|
|
903
|
+
}
|
|
904
|
+
},
|
|
897
905
|
{
|
|
898
906
|
"kind": "js",
|
|
899
907
|
"name": "PrepareHandler",
|
|
@@ -926,6 +934,14 @@
|
|
|
926
934
|
"module": "./controllers/primer-js"
|
|
927
935
|
}
|
|
928
936
|
},
|
|
937
|
+
{
|
|
938
|
+
"kind": "js",
|
|
939
|
+
"name": "VaultedMethodsUpdateData",
|
|
940
|
+
"declaration": {
|
|
941
|
+
"name": "VaultedMethodsUpdateData",
|
|
942
|
+
"module": "./controllers/primer-js"
|
|
943
|
+
}
|
|
944
|
+
},
|
|
929
945
|
{
|
|
930
946
|
"kind": "js",
|
|
931
947
|
"name": "Payment",
|
|
@@ -934,6 +950,14 @@
|
|
|
934
950
|
"module": "./types/compatibility-types"
|
|
935
951
|
}
|
|
936
952
|
},
|
|
953
|
+
{
|
|
954
|
+
"kind": "js",
|
|
955
|
+
"name": "CvvInput",
|
|
956
|
+
"declaration": {
|
|
957
|
+
"name": "CvvInput",
|
|
958
|
+
"module": "./types/compatibility-types"
|
|
959
|
+
}
|
|
960
|
+
},
|
|
937
961
|
{
|
|
938
962
|
"kind": "js",
|
|
939
963
|
"name": "PrimerCheckoutComponent",
|
|
@@ -4051,6 +4075,14 @@
|
|
|
4051
4075
|
}
|
|
4052
4076
|
],
|
|
4053
4077
|
"exports": [
|
|
4078
|
+
{
|
|
4079
|
+
"kind": "js",
|
|
4080
|
+
"name": "VaultedPaymentMethodSummary",
|
|
4081
|
+
"declaration": {
|
|
4082
|
+
"name": "VaultedPaymentMethodSummary",
|
|
4083
|
+
"module": "src/contexts/payments-objects.ts"
|
|
4084
|
+
}
|
|
4085
|
+
},
|
|
4054
4086
|
{
|
|
4055
4087
|
"kind": "js",
|
|
4056
4088
|
"name": "InitializedPayments",
|
|
@@ -4892,6 +4924,17 @@
|
|
|
4892
4924
|
"privacy": "private",
|
|
4893
4925
|
"default": "null"
|
|
4894
4926
|
},
|
|
4927
|
+
{
|
|
4928
|
+
"kind": "field",
|
|
4929
|
+
"name": "vault",
|
|
4930
|
+
"type": {
|
|
4931
|
+
"text": "VaultAPI"
|
|
4932
|
+
},
|
|
4933
|
+
"privacy": "public",
|
|
4934
|
+
"readonly": true,
|
|
4935
|
+
"description": "Vault namespace providing programmatic access to vaulted payment method operations.\nUse for building custom vault UIs with headless flows.",
|
|
4936
|
+
"default": "{ createCvvInput: (options) => this.createCvvInputInternal(options), startPayment: (paymentMethodId, options) => this.startVaultPaymentInternal(paymentMethodId, options), delete: (paymentMethodId) => this.deleteVaultPaymentMethod(paymentMethodId), }"
|
|
4937
|
+
},
|
|
4895
4938
|
{
|
|
4896
4939
|
"kind": "field",
|
|
4897
4940
|
"name": "onPaymentStart",
|
|
@@ -4982,7 +5025,8 @@
|
|
|
4982
5025
|
"description": "CVV input configuration"
|
|
4983
5026
|
}
|
|
4984
5027
|
],
|
|
4985
|
-
"description": "Creates a CVV input for vaulted payment method CVV recapture
|
|
5028
|
+
"description": "Creates a CVV input for vaulted payment method CVV recapture.",
|
|
5029
|
+
"deprecated": "Use primerJS.vault.createCvvInput() instead.\nThis method will be removed in a future major version."
|
|
4986
5030
|
},
|
|
4987
5031
|
{
|
|
4988
5032
|
"kind": "method",
|
|
@@ -5007,13 +5051,10 @@
|
|
|
5007
5051
|
"text": "{ cvv?: string }"
|
|
5008
5052
|
},
|
|
5009
5053
|
"description": "Optional payment options"
|
|
5010
|
-
},
|
|
5011
|
-
{
|
|
5012
|
-
"description": "CVV value token (required if cvvRecapture is true)",
|
|
5013
|
-
"name": "options.cvv"
|
|
5014
5054
|
}
|
|
5015
5055
|
],
|
|
5016
|
-
"description": "Initiates payment using a vaulted payment method
|
|
5056
|
+
"description": "Initiates payment using a vaulted payment method.",
|
|
5057
|
+
"deprecated": "Use primerJS.vault.startPayment() instead.\nThis method will be removed in a future major version."
|
|
5017
5058
|
},
|
|
5018
5059
|
{
|
|
5019
5060
|
"kind": "method",
|
package/dist/primer-loader.d.ts
CHANGED
|
@@ -376,36 +376,106 @@ export interface PaymentSummary {
|
|
|
376
376
|
};
|
|
377
377
|
}
|
|
378
378
|
/**
|
|
379
|
-
*
|
|
380
|
-
*
|
|
379
|
+
* Base interface for common vaulted payment method fields.
|
|
380
|
+
* All payment-method-specific interfaces extend this base.
|
|
381
381
|
*/
|
|
382
|
-
export interface
|
|
382
|
+
export interface BaseVaultedPaymentMethodSummary {
|
|
383
383
|
/** Payment instrument ID */
|
|
384
384
|
id: string;
|
|
385
385
|
/** Analytics tracking ID */
|
|
386
386
|
analyticsId: string;
|
|
387
387
|
/** Payment method type (e.g., "PAYMENT_CARD", "PAYPAL") */
|
|
388
388
|
paymentMethodType: PaymentMethodType$1;
|
|
389
|
-
/**
|
|
390
|
-
|
|
391
|
-
|
|
389
|
+
/** Optional user-provided description for the payment method */
|
|
390
|
+
userDescription?: string;
|
|
391
|
+
}
|
|
392
|
+
/**
|
|
393
|
+
* Vaulted payment card summary with card-specific fields.
|
|
394
|
+
*/
|
|
395
|
+
export interface CardVaultedPaymentMethodSummary extends BaseVaultedPaymentMethodSummary {
|
|
396
|
+
/** Discriminant for card payment instruments */
|
|
397
|
+
paymentInstrumentType: "PAYMENT_CARD";
|
|
398
|
+
/** Card-specific payment instrument data */
|
|
392
399
|
paymentInstrumentData?: {
|
|
393
|
-
/** Last 4 digits of card
|
|
400
|
+
/** Last 4 digits of card */
|
|
394
401
|
last4Digits?: string;
|
|
395
|
-
/** Card network (e.g., "VISA", "MASTERCARD")
|
|
402
|
+
/** Card network (e.g., "VISA", "MASTERCARD") */
|
|
396
403
|
network?: string;
|
|
397
|
-
/**
|
|
404
|
+
/** Cardholder name */
|
|
405
|
+
cardholderName?: string;
|
|
406
|
+
/** Expiration month (1-12) */
|
|
407
|
+
expirationMonth?: string;
|
|
408
|
+
/** Expiration year (e.g., "2025") */
|
|
409
|
+
expirationYear?: string;
|
|
410
|
+
};
|
|
411
|
+
}
|
|
412
|
+
/**
|
|
413
|
+
* Vaulted PayPal billing agreement summary with PayPal-specific fields.
|
|
414
|
+
*/
|
|
415
|
+
export interface PayPalVaultedPaymentMethodSummary extends BaseVaultedPaymentMethodSummary {
|
|
416
|
+
/** Discriminant for PayPal billing agreement instruments */
|
|
417
|
+
paymentInstrumentType: "PAYPAL_BILLING_AGREEMENT";
|
|
418
|
+
/** PayPal-specific payment instrument data */
|
|
419
|
+
paymentInstrumentData?: {
|
|
420
|
+
/** External PayPal payer ID */
|
|
421
|
+
externalPayerId?: string;
|
|
422
|
+
/** PayPal account email */
|
|
423
|
+
email?: string;
|
|
424
|
+
/** First name */
|
|
425
|
+
firstName?: string;
|
|
426
|
+
/** Last name */
|
|
427
|
+
lastName?: string;
|
|
428
|
+
};
|
|
429
|
+
}
|
|
430
|
+
/**
|
|
431
|
+
* Vaulted Klarna customer token summary with Klarna-specific fields.
|
|
432
|
+
*/
|
|
433
|
+
export interface KlarnaVaultedPaymentMethodSummary extends BaseVaultedPaymentMethodSummary {
|
|
434
|
+
/** Discriminant for Klarna customer token instruments */
|
|
435
|
+
paymentInstrumentType: "KLARNA_CUSTOMER_TOKEN";
|
|
436
|
+
/** Klarna-specific payment instrument data */
|
|
437
|
+
paymentInstrumentData?: {
|
|
438
|
+
/** Klarna account email */
|
|
439
|
+
email?: string;
|
|
440
|
+
/** First name */
|
|
441
|
+
firstName?: string;
|
|
442
|
+
/** Last name */
|
|
443
|
+
lastName?: string;
|
|
444
|
+
/** Phone number */
|
|
445
|
+
phoneNumber?: string;
|
|
446
|
+
};
|
|
447
|
+
}
|
|
448
|
+
/**
|
|
449
|
+
* Vaulted ACH (Automated Clearing House) summary with ACH-specific fields.
|
|
450
|
+
*/
|
|
451
|
+
export interface ACHVaultedPaymentMethodSummary extends BaseVaultedPaymentMethodSummary {
|
|
452
|
+
/** Discriminant for ACH instruments */
|
|
453
|
+
paymentInstrumentType: "AUTOMATED_CLEARING_HOUSE";
|
|
454
|
+
/** ACH-specific payment instrument data */
|
|
455
|
+
paymentInstrumentData?: {
|
|
456
|
+
/** Last 4 digits of account number */
|
|
398
457
|
accountNumberLastFourDigits?: string;
|
|
399
|
-
/** Bank name
|
|
458
|
+
/** Bank name */
|
|
400
459
|
bankName?: string;
|
|
401
|
-
/** Account type (
|
|
460
|
+
/** Account type (e.g., "CHECKING", "SAVINGS") */
|
|
402
461
|
accountType?: string;
|
|
403
|
-
/** Email for wallet payment methods */
|
|
404
|
-
email?: string;
|
|
405
462
|
};
|
|
406
|
-
/** Optional user-provided description for the payment method */
|
|
407
|
-
userDescription?: string;
|
|
408
463
|
}
|
|
464
|
+
/**
|
|
465
|
+
* Generic vaulted payment method summary for payment instruments
|
|
466
|
+
* not explicitly modeled with their own interface.
|
|
467
|
+
*/
|
|
468
|
+
export interface GenericVaultedPaymentMethodSummary extends BaseVaultedPaymentMethodSummary {
|
|
469
|
+
/** Discriminant for all other payment instrument types */
|
|
470
|
+
paymentInstrumentType: Exclude<PaymentInstrumentType$1, "PAYMENT_CARD" | "PAYPAL_BILLING_AGREEMENT" | "KLARNA_CUSTOMER_TOKEN" | "AUTOMATED_CLEARING_HOUSE">;
|
|
471
|
+
/** Generic payment instrument data for unknown/other payment methods */
|
|
472
|
+
paymentInstrumentData?: Record<string, unknown>;
|
|
473
|
+
}
|
|
474
|
+
/**
|
|
475
|
+
* Discriminated union of all vaulted payment method summaries.
|
|
476
|
+
* Use the paymentInstrumentType field to narrow to specific types.
|
|
477
|
+
*/
|
|
478
|
+
export type VaultedPaymentMethodSummary = CardVaultedPaymentMethodSummary | PayPalVaultedPaymentMethodSummary | KlarnaVaultedPaymentMethodSummary | ACHVaultedPaymentMethodSummary | GenericVaultedPaymentMethodSummary;
|
|
409
479
|
export type APIVersionOption = "legacy" | "2.4";
|
|
410
480
|
declare enum HeadlessManagerType {
|
|
411
481
|
CARD = "CARD",
|
|
@@ -1962,6 +2032,38 @@ export interface VaultedMethodsUpdateData {
|
|
|
1962
2032
|
/** Unix timestamp in seconds */
|
|
1963
2033
|
timestamp: number;
|
|
1964
2034
|
}
|
|
2035
|
+
/**
|
|
2036
|
+
* VaultAPI provides programmatic access to vaulted payment method operations.
|
|
2037
|
+
* Enables merchants to build custom vault UIs and manage vaulted payment methods.
|
|
2038
|
+
*/
|
|
2039
|
+
export interface VaultAPI {
|
|
2040
|
+
/**
|
|
2041
|
+
* Creates a CVV input for vaulted payment method CVV recapture.
|
|
2042
|
+
*
|
|
2043
|
+
* @param options - CVV input configuration options
|
|
2044
|
+
* @returns Promise resolving to CvvInput instance, or null if vault unavailable
|
|
2045
|
+
*/
|
|
2046
|
+
createCvvInput(options: CardSecurityCodeInputOptions): Promise<CvvInput | null>;
|
|
2047
|
+
/**
|
|
2048
|
+
* Starts payment using a vaulted payment method.
|
|
2049
|
+
*
|
|
2050
|
+
* @param paymentMethodId - The unique identifier of the vaulted payment method
|
|
2051
|
+
* @param options - Optional payment configuration
|
|
2052
|
+
* @returns Promise that resolves when payment flow initiates
|
|
2053
|
+
* @throws Error if vault not initialized or payment method not found
|
|
2054
|
+
*/
|
|
2055
|
+
startPayment(paymentMethodId: string, options?: {
|
|
2056
|
+
cvv?: string;
|
|
2057
|
+
}): Promise<void>;
|
|
2058
|
+
/**
|
|
2059
|
+
* Deletes a vaulted payment method from the vault.
|
|
2060
|
+
*
|
|
2061
|
+
* @param paymentMethodId - The unique identifier of the payment method to delete
|
|
2062
|
+
* @returns Promise that resolves when deletion completes
|
|
2063
|
+
* @throws Error if vault not initialized
|
|
2064
|
+
*/
|
|
2065
|
+
delete(paymentMethodId: string): Promise<void>;
|
|
2066
|
+
}
|
|
1965
2067
|
/**
|
|
1966
2068
|
* PrimerJS is a wrapper class that provides a stable API for interfacing with the Primer SDK
|
|
1967
2069
|
* while hiding direct access to the legacy headless instance.
|
|
@@ -1971,6 +2073,20 @@ export declare class PrimerJS {
|
|
|
1971
2073
|
private paymentMethods;
|
|
1972
2074
|
private paymentManagers;
|
|
1973
2075
|
private vaultController;
|
|
2076
|
+
/**
|
|
2077
|
+
* Vault namespace providing programmatic access to vaulted payment method operations.
|
|
2078
|
+
* Use for building custom vault UIs with headless flows.
|
|
2079
|
+
*
|
|
2080
|
+
* @example
|
|
2081
|
+
* ```typescript
|
|
2082
|
+
* // Start payment with vaulted method
|
|
2083
|
+
* await primerJS.vault.startPayment(methodId);
|
|
2084
|
+
*
|
|
2085
|
+
* // Delete a vaulted method
|
|
2086
|
+
* await primerJS.vault.delete(methodId);
|
|
2087
|
+
* ```
|
|
2088
|
+
*/
|
|
2089
|
+
readonly vault: VaultAPI;
|
|
1974
2090
|
/**
|
|
1975
2091
|
* Called when payment flow begins.
|
|
1976
2092
|
* Use for analytics tracking or UI updates (e.g., disable form).
|
|
@@ -2107,88 +2223,41 @@ export declare class PrimerJS {
|
|
|
2107
2223
|
* @internal
|
|
2108
2224
|
*/
|
|
2109
2225
|
setVaultController(controller: VaultManagerController | null): void;
|
|
2226
|
+
/**
|
|
2227
|
+
* Internal implementation of createCvvInput.
|
|
2228
|
+
* @internal
|
|
2229
|
+
*/
|
|
2230
|
+
private createCvvInputInternal;
|
|
2231
|
+
/**
|
|
2232
|
+
* Internal implementation of startVaultPayment.
|
|
2233
|
+
* @internal
|
|
2234
|
+
*/
|
|
2235
|
+
private startVaultPaymentInternal;
|
|
2236
|
+
/**
|
|
2237
|
+
* Deletes a vaulted payment method.
|
|
2238
|
+
* @internal
|
|
2239
|
+
*/
|
|
2240
|
+
private deleteVaultPaymentMethod;
|
|
2110
2241
|
/**
|
|
2111
2242
|
* Creates a CVV input for vaulted payment method CVV recapture.
|
|
2112
2243
|
*
|
|
2113
|
-
*
|
|
2114
|
-
*
|
|
2244
|
+
* @deprecated Use primerJS.vault.createCvvInput() instead.
|
|
2245
|
+
* This method will be removed in a future major version.
|
|
2115
2246
|
*
|
|
2116
2247
|
* @param options - CVV input configuration
|
|
2117
2248
|
* @returns Promise resolving to CvvInput or null if vault unavailable
|
|
2118
|
-
*
|
|
2119
|
-
* @example
|
|
2120
|
-
* ```typescript
|
|
2121
|
-
* const method = vaultedPayments.get(selectedId);
|
|
2122
|
-
* const cvvInput = await primerJS.createCvvInput({
|
|
2123
|
-
* cardNetwork: method.paymentInstrumentData.network,
|
|
2124
|
-
* container: "#cvv-container",
|
|
2125
|
-
* placeholder: "123"
|
|
2126
|
-
* });
|
|
2127
|
-
*
|
|
2128
|
-
* if (cvvInput.metadata.error) {
|
|
2129
|
-
* // Handle validation error
|
|
2130
|
-
* }
|
|
2131
|
-
* ```
|
|
2132
2249
|
*/
|
|
2133
2250
|
createCvvInput(options: CardSecurityCodeInputOptions): Promise<CvvInput | null>;
|
|
2134
2251
|
/**
|
|
2135
2252
|
* Initiates payment using a vaulted payment method.
|
|
2136
2253
|
*
|
|
2137
|
-
*
|
|
2138
|
-
*
|
|
2254
|
+
* @deprecated Use primerJS.vault.startPayment() instead.
|
|
2255
|
+
* This method will be removed in a future major version.
|
|
2139
2256
|
*
|
|
2140
2257
|
* @param paymentMethodId - The ID of the vaulted payment method
|
|
2141
2258
|
* @param options - Optional payment options
|
|
2142
|
-
* @param options.cvv - CVV value token (required if cvvRecapture is true)
|
|
2143
2259
|
* @returns Promise that resolves when payment flow starts
|
|
2144
2260
|
* @throws Error if vault not initialized or payment method not found
|
|
2145
|
-
*
|
|
2146
|
-
* @example
|
|
2147
|
-
* ```typescript
|
|
2148
|
-
* // Complete headless vault flow
|
|
2149
|
-
* let vaultedMethods;
|
|
2150
|
-
* let needsCvv = false;
|
|
2151
|
-
*
|
|
2152
|
-
* primerJS.onVaultedMethodsUpdate = ({ vaultedPayments, cvvRecapture }) => {
|
|
2153
|
-
* vaultedMethods = vaultedPayments.toArray();
|
|
2154
|
-
* needsCvv = cvvRecapture;
|
|
2155
|
-
*
|
|
2156
|
-
* // Build custom vault UI
|
|
2157
|
-
* vaultedMethods.forEach(method => {
|
|
2158
|
-
* displayVaultItem({
|
|
2159
|
-
* id: method.id,
|
|
2160
|
-
* last4: method.paymentInstrumentData?.last4Digits,
|
|
2161
|
-
* network: method.paymentInstrumentData?.network
|
|
2162
|
-
* });
|
|
2163
|
-
* });
|
|
2164
|
-
* };
|
|
2165
|
-
*
|
|
2166
|
-
* // When user submits payment
|
|
2167
|
-
* async function handlePayment(selectedMethodId) {
|
|
2168
|
-
* try {
|
|
2169
|
-
* if (needsCvv) {
|
|
2170
|
-
* const method = vaultedMethods.find(m => m.id === selectedMethodId);
|
|
2171
|
-
* const cvvInput = await primerJS.createCvvInput({
|
|
2172
|
-
* cardNetwork: method.paymentInstrumentData.network,
|
|
2173
|
-
* container: "#cvv-container"
|
|
2174
|
-
* });
|
|
2175
|
-
*
|
|
2176
|
-
* if (cvvInput.metadata.error) {
|
|
2177
|
-
* showError("Invalid CVV");
|
|
2178
|
-
* return;
|
|
2179
|
-
* }
|
|
2180
|
-
*
|
|
2181
|
-
* await primerJS.startVaultPayment(selectedMethodId, {
|
|
2182
|
-
* cvv: cvvInput.valueToken
|
|
2183
|
-
* });
|
|
2184
|
-
* } else {
|
|
2185
|
-
* await primerJS.startVaultPayment(selectedMethodId);
|
|
2186
|
-
* }
|
|
2187
|
-
* } catch (error) {
|
|
2188
|
-
* console.error("Payment failed:", error);
|
|
2189
|
-
* }
|
|
2190
|
-
* }
|
|
2191
|
-
* ```
|
|
2192
2261
|
*/
|
|
2193
2262
|
startVaultPayment(paymentMethodId: string, options?: {
|
|
2194
2263
|
cvv?: string;
|