vue3-coinbase-commerce/dist/vue3-coinbase-commerce.umd.js

**English** | [简体中文](./README.zh-CN.md)

var __vite_style__=document.createElement("style");__vite_style__.innerHTML=`#iframe-container[data-v-2fa2dfcb]{left:0;right:0;top:0;bottom:0;width:100%;height:100%;position:fixed;z-index:99998;background-color:#00000080}iframe[data-v-2fa2dfcb]{width:100%;max-width:600px;height:100%;position:fixed;z-index:999;right:0;top:0;bottom:0;border:none}#coinbase-commerce-button[data-v-30b04ce1]{border-radius:6px;background-color:#0667d0;background:linear-gradient(#0667d0,#0655ab);color:#fff;height:40px;font-size:14px;font-family:Avenir Next,sans-serif;font-weight:500;user-select:none;text-decoration:none;cursor:pointer}#coinbase-commerce-button[data-v-30b04ce1]:hover{background:#0666d0}#coinbase-commerce-button[data-v-30b04ce1]:active{background:#0655ab}#coinbase-commerce-button[data-v-30b04ce1]:focus{outline:none}#coinbase-commerce-button[data-v-30b04ce1]:disabled{background:#7d95b6;color:#0006;cursor:not-allowed}
(function(r,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(r=typeof globalThis!="undefined"?globalThis:r||self,o(r["vue3-coinbase-commerce"]={},r.Vue))})(this,function(r,o){"use strict";`;document.head.appendChild(__vite_style__);const B={generateUUID(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const e=Math.random()*16|0;return(t==="x"?e:e&3|8).toString(16)})}};var U="",M=(t,e)=>{const n=t.__vccOpts||t;for(const[l,s]of e)n[l]=s;return n};const E={id:"iframe-container"},D=["src"];var y=M(o.defineComponent({name:"coinbase-iframe",props:{checkoutId:{type:String,default:""},chargeId:{type:String,default:""},customMetadata:String,disableCaching:Boolean},emits:["onChargeSuccess","onChargeFailure","onPaymentDetected","onModalLoaded1","onModalLoaded2","onChargeCreated","onError","onModalClose","onLoad"],setup(t,{emit:e}){const n=t,l=o.ref(""),s="https://commerce.coinbase.com",g=B.generateUUID(),i=o.ref(""),C=o.ref(!0);o.onMounted(()=>{window.addEventListener("message",u),l.value=`${window.location.protocol}//${window.location.hostname}${window.location.port?":"+window.location.port:""}/`,i.value=m(l.value),console.log(i.value)}),o.onUnmounted(()=>{window.removeEventListener("message",u)});function u(d){switch(console.log(d.data),d.data.event){case"charge_confirmed":e("onChargeSuccess",d.data);break;case"charge_failed":e("onChargeFailure",d.data);break;case"payment_detected":e("onPaymentDetected",d.data);break;case"error_not_found":e("onError",d.data);break;case"checkout_modal_closed":e("onModalClose");case"checkout_modal_loaded":d.data.checkout!==void 0?e("onModalLoaded1",{checkoutId:d.data.checkout}):e("onModalLoaded2",{orderId:d.data.orderCode});break;case"charge_created":e("onChargeCreated")}}function b(){e("onLoad"),C.value=!1}function m(d){const a={origin:d,version:"0.0.1",buttonId:g,cacheDisabled:n.disableCaching};function h(x){const O=[],S=window.encodeURIComponent;for(const k in x)x.hasOwnProperty(k)&&O.push(`${S(k)}=${S(x[k])}`);return O.join("&")}let c="",p="";if(n.checkoutId!=="")p=n.checkoutId,c="checkout";else if(n.chargeId!=="")p=n.chargeId,c="charge";else throw new Error("must supply either checkoutId or chargeId prop");return`${s}/embed/${c}/${encodeURI(p)}?${h(a)}`}return(d,a)=>(o.openBlock(),o.createElementBlock("div",E,[o.createElementVNode("iframe",{onload:b,src:i.value},null,8,D)]))}}),[["__scopeId","data-v-2fa2dfcb"]]),V="";const $={rel:"external",title:"Pay with Bitcoin, Bitcoin Cash, DAI, Litecoin, Dogecoin, Ethereum, or USD Coin"};var f=M(o.defineComponent({name:"coinbase-commerce-button",props:{checkoutId:{type:String,default:""},chargeId:{type:String,default:""},disableCaching:{type:Boolean,default:!0}},emits:["onChargeSuccess","onChargeFailure","onPaymentDetected","onModalLoaded1","onModalLoaded2","onChargeCreated","onModalClose","onLoad"],setup(t,{emit:e}){const n=o.ref(!1);function l(a){console.error(a),n.value=!1}function s(){n.value=!1,e("onModalClose")}const g=a=>e("onChargeSuccess",a),i=a=>e("onChargeFailure",a),C=a=>e("onPaymentDetected",a),u=()=>e("onLoad"),b=a=>e("onModalLoaded1",a),m=a=>e("onModalLoaded2",a),d=()=>e("onChargeCreated");return(a,h)=>(o.openBlock(),o.createElementBlock("div",null,[o.createElementVNode("a",$,[o.createElementVNode("button",{id:"coinbase-commerce-button",onClick:h[0]||(h[0]=c=>n.value=!0)},[o.renderSlot(a.$slots,"default",{},void 0,!0)])]),n.value?(o.openBlock(),o.createBlock(y,{key:0,"checkout-id":t.checkoutId,"charge-id":t.chargeId,"disable-caching":t.disableCaching,onOnChargeSuccess:g,onOnModalLoaded1:b,onOnModalLoaded2:m,onOnChargeCreated:d,onOnChargeFailure:i,onOnPaymentDetected:C,onOnError:l,onOnModalClose:s,onOnLoad:u},null,8,["checkout-id","charge-id","disable-caching"])):o.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-30b04ce1"]]);const _=o.ref(!1),I=o.ref(""),L=o.ref("");function v(){return{coinbaseOpen:_,checkoutId:I,chargeId:L,openWithCheckoutId:n=>{_.value=!0,I.value=n},openWithChargeId:n=>{_.value=!0,L.value=n}}}const w=o.defineComponent({name:"coinbase-wrap",props:{disableCaching:{type:Boolean,default:!0}},emits:["onChargeSuccess","onChargeFailure","onPaymentDetected","onModalLoaded1","onModalLoaded2","onChargeCreated","onModalClose","onLoad"],setup(t,{emit:e}){const{coinbaseOpen:n,chargeId:l,checkoutId:s}=v();function g(c){console.error(c),n.value=!1}function i(){n.value=!1,e("onModalClose")}const C=c=>e("onChargeSuccess",c),u=c=>e("onChargeFailure",c),b=c=>e("onPaymentDetected",c),m=()=>e("onLoad"),d=c=>e("onModalLoaded1",c),a=c=>e("onModalLoaded2",c),h=()=>e("onChargeCreated");return(c,p)=>o.unref(n)?(o.openBlock(),o.createBlock(y,{key:0,"checkout-id":o.unref(s),"charge-id":o.unref(l),"disable-caching":t.disableCaching,onOnChargeSuccess:C,onOnModalLoaded1:d,onOnModalLoaded2:a,onOnChargeCreated:h,onOnChargeFailure:u,onOnPaymentDetected:b,onOnError:g,onOnModalClose:i,onOnLoad:m},null,8,["checkout-id","charge-id","disable-caching"])):o.createCommentVNode("",!0)}}),P=[f,w];f.install=function(t){t.component(f.name,f)};var F={install:function(t){P.forEach(e=>{t.component("CoinbaseCommerceButton",e)})}};r.CoinbaseCommerceButton=f,r.CoinbaseWrap=w,r.default=F,r.useCoinbase=v,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});