diff --git a/README.md b/README.md index 4186c7b..0defb58 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Demo Plug Checkout Full VanillaJS +# Demo Malga Checkout Full VanillaJS -This project is a demo of Plug Checkout Full running on VanillaJS +This project is a demo of Malga Checkout Full running on VanillaJS ## Running App @@ -8,4 +8,4 @@ Clone this app and open `index.html` in your browser ## Learn More -You can know more about Plug on our [website](https://www.plugpagamentos.com/). +You can know more about Malga on our [website](https://www.malga.io/). diff --git a/index.css b/index.css index 826ca5b..e630bac 100644 --- a/index.css +++ b/index.css @@ -1,80 +1,60 @@ :root { /* Colors */ - --plug-checkout-color-brand-accent-light: #4ebff1; - --plug-checkout-color-brand-accent-normal: #0055a2; - --plug-checkout-color-brand-clean: #d8dff0; - --plug-checkout-color-brand-light: #0091ea; - --plug-checkout-color-brand-normal: #5c7ec0; - --plug-checkout-color-brand-middle: #344383; - --plug-checkout-color-brand-dark: #141b4d; - --plug-checkout-color-grey-light: #aaafc5; - --plug-checkout-color-grey-normal: #8b90a7; - --plug-checkout-color-grey-middle: #5e6277; - --plug-checkout-color-grey-dark: #3f4252; - --plug-checkout-color-grey-darkness: #1d1f2a; - --plug-checkout-color-accent-light: #ffffff; - --plug-checkout-color-accent-normal: #eef2f6; - --plug-checkout-color-accent-middle: #aebfd0; - --plug-checkout-color-warning-light: #fff8e1; - --plug-checkout-color-warning-normal: #fac30e; - --plug-checkout-color-warning-middle: #ffa200; - --plug-checkout-color-modal-success: #32c000; - --plug-checkout-color-modal-error: #ff1744; - --plug-checkout-color-modal-action-button-error: #344383; - --plug-checkout-color-modal-action-button-error-hover: #5c7ec0; - --plug-checkout-color-modal-action-button-success: #344383; - --plug-checkout-color-modal-action-button-success-hover: #5c7ec0; - --plug-checkout-color-modal-action-button-success-font-color: #ffffff; - --plug-checkout-color-modal-action-button-error-font-color: #ffffff; + --malga-checkout-color-page-background: #eef2f6; + --malga-checkout-color-brand-accent-light: #79dbd4; + --malga-checkout-color-brand-accent-normal: #39bfad; + --malga-checkout-color-brand-clean: #c3f4ef; + --malga-checkout-color-brand-light: #79dbd4; + --malga-checkout-color-brand-normal: #39bfad; + --malga-checkout-color-brand-middle: #2fac9b; + --malga-checkout-color-brand-dark: #147f70; + --malga-checkout-color-grey-light: #666666; + --malga-checkout-color-grey-normal: #4d4d4d; + --malga-checkout-color-grey-middle: #333333; + --malga-checkout-color-grey-dark: #1a1a1a; + --malga-checkout-color-grey-darkness: #000000; + --malga-checkout-color-accent-light: #ffffff; + --malga-checkout-color-accent-normal: #f1f1f1; + --malga-checkout-color-accent-middle: #cbcbcb; + --malga-checkout-color-warning-light: #fff8e6; + --malga-checkout-color-warning-normal: #f9df8d; + --malga-checkout-color-warning-middle: #ffa400; + --malga-checkout-color-modal-success: #00ae42; + --malga-checkout-color-modal-error: #ed3a3d; + --malga-checkout-color-modal-neutral: #4d4d4d; + --malga-checkout-color-modal-action-button-error: #000000; + --malga-checkout-color-modal-action-button-error-hover: #333333; + --malga-checkout-color-modal-action-button-success: #000000; + --malga-checkout-color-modal-action-button-success-hover: #333333; + --malga-checkout-color-modal-action-button-success-font-color: #ffffff; + --malga-checkout-color-modal-action-button-error-font-color: #ffffff; /* Typography */ - --plug-checkout-typography-family: "Roboto", sans-serif; + --malga-checkout-typography-family: "Inter", sans-serif; /* Spacings */ - --plug-checkout-spacing-xxs: 4px; - --plug-checkout-spacing-xs: 8px; - --plug-checkout-spacing-sm: 16px; - --plug-checkout-spacing-default: 24px; - --plug-checkout-spacing-md: 32px; - --plug-checkout-spacing-lg: 48px; - --plug-checkout-spacing-xlg: 64px; - --plug-checkout-spacing-xxlg: 96px; + --malga-checkout-spacing-xxs: 4px; + --malga-checkout-spacing-xs: 8px; + --malga-checkout-spacing-sm: 16px; + --malga-checkout-spacing-default: 24px; + --malga-checkout-spacing-md: 32px; + --malga-checkout-spacing-lg: 48px; + --malga-checkout-spacing-xlg: 64px; + --malga-checkout-spacing-xxlg: 96px; /* Sizes */ - --plug-checkout-size-min-width: 250px; + --malga-checkout-size-min-width: 250px; /* Border Radius */ - --plug-checkout-border-radius-default: 4px; - --plug-checkout-border-radius-md: 6px; - --plug-checkout-border-radius-lg: 20px; + --malga-checkout-border-radius-default: 4px; + --malga-checkout-border-radius-md: 6px; + --malga-checkout-border-radius-lg: 20px; /* Transitions Time */ - --plug-checkout-transition-slow: 0.3s; - --plug-checkout-transition-default: 0.5s; + --malga-checkout-transition-slow: 0.3s; + --malga-checkout-transition-default: 0.5s; } -body { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; +html { background: #eef2f6; - margin: 0; - padding: 8px; -} - -main { - display: flex; - justify-content: center; - align-items: center; - background: white; - border-radius: 8px; - padding: 10px; -} - -@media only screen and (min-width: 600px) { - main { - padding: 50px; - width: 500px; - } -} +} \ No newline at end of file diff --git a/index.html b/index.html index 4e41165..e6366f0 100644 --- a/index.html +++ b/index.html @@ -4,26 +4,26 @@ - + - Plug Checkout Full Demo + Malga Checkout Full Demo
- + >
\ No newline at end of file diff --git a/main.js b/main.js index 3a5d83b..28e385e 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,7 @@ (() => { - const plugCheckoutFull = document.querySelector("plug-checkout-full"); + const malgaCheckoutFull = document.querySelector("malga-checkout-full"); - plugCheckoutFull.paymentMethods = { + malgaCheckoutFull.paymentMethods = { pix: { expiresIn: 3600, }, @@ -27,28 +27,26 @@ }, }; - plugCheckoutFull.transactionConfig = { - statementDescriptor: "#1 Demonstration Plug Checkout", + malgaCheckoutFull.transactionConfig = { + statementDescriptor: "#1 Demonstration Malga Checkout", amount: 100, description: "", orderId: "", - customerId: "", currency: "BRL", capture: false, }; - plugCheckoutFull.dialogConfig = { + malgaCheckoutFull.dialogConfig = { show: true, actionButtonLabel: "Continuar", errorActionButtonLabel: "Tentar novamente", successActionButtonLabel: "Continuar", - successRedirectUrl: "https://www.plugpagamentos.com/", + successRedirectUrl: "https://www.malga.io/", }; - plugCheckoutFull.pageConfig = { - brandUrl: "https://exampleurl/images/logo.png", - footerDescription: "Todos os direitos reservados © 2022 Plug Pagamentos.", - backRoute: "https://www.plugpagamentos.com/", + malgaCheckoutFull.pageConfig = { + footerDescription: "Todos os direitos reservados © 2023 Malga.", + backRoute: "https://www.malga.io/", delivery: 0, products: [ { @@ -70,14 +68,14 @@ ], }; - plugCheckoutFull.addEventListener( + malgaCheckoutFull.addEventListener( "transactionSuccess", ({ detail: { data } }) => { console.log(data); } ); - plugCheckoutFull.addEventListener( + malgaCheckoutFull.addEventListener( "transactionFailed", ({ detail: { error } }) => { console.log(error); diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..4198406 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/favicon.png b/public/favicon.png deleted file mode 100644 index 6b4b607..0000000 Binary files a/public/favicon.png and /dev/null differ