❤
npm
Sign UpSign In

This package has been deprecated

Author message:

WARNING: This project has been renamed to @malga-checkout-full/core. Install using @malga-checkout-full/core instead.

@plug-checkout-full/core
TypeScript icon, indicating that this package has built-in type declarations

1.6.2 • Public • Published

Plug Checkout - Core

A simple, fast and customizable way of integrating with Plug, with no need to stop using your favorite front-end framework.

Introduction

Here is a demonstration of a VanillaJS application integrated with Plug Checkout.

Get Started

To start it, simply install the dependency on your project

<script
  type="module"
  src="https://unpkg.com/@plug-checkout/core@latest/dist/plug-checkout/plug-checkout.esm.js"
></script>

Now just add the <plug-checkout></plug-checkout> in your HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
    />
    <script
      type="module"
      src="https://unpkg.com/@plug-checkout/core@latest/dist/plug-checkout/plug-checkout.esm.js"
    ></script>
    <title>Plug Checkout Components</title>
  </head>
  <body>
    <main>
      <plug-checkout></plug-checkout>
    </main>
  </body>
</html>

Use it like this in one of your HTML file. Its most basic way, with no customization, needs very few configurations. Adding events and attributes without primitive types in one of your Javascript files or in <script> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
    />
    <script
      type="module"
      src="https://unpkg.com/@plug-checkout/core@latest/dist/plug-checkout/plug-checkout.esm.js"
    ></script>
    <title>Plug Checkout Components</title>
  </head>
  <body>
    <main>
      <plug-checkout
        public-key="<YOUR_PUBLIC_KEY>"
        client-id="<YOUR_CLIENT_ID>"
        merchant-id="<YOUR_MERCHANT_ID>"
        statement-descriptor="#1 Demonstration Plug Checkout"
        amount="100"
      >
      </plug-checkout>
    </main>

    <script>
      const plugCheckout = document.querySelector('plug-checkout')

      plugCheckout.addEventListener('paymentSuccess', () => {
        // Your specifications here
      })

      plugCheckout.addEventListener('paymentFailed', () => {
        // Your specifications here
      })
    </script>
  </body>
</html>

Props

Below there is a list of properties that the component accepts for you to customize it according to your necessities.

Property Description Type Default
amount Total amount of the transaction, we indicate that the amount be used in CENTS form. number undefined
public-key Public key for client-side applications, generated from Plug’s API. Click here to read more about it in the documentation. string undefined
capture It determines if the transaction should be captured immediately. boolean false
client-id Key to identify the client on Plug. Click here to read more about it in the documentation. string undefined
customFormStyleClasses Properties that make the use of CSS classes available for individual customization of each component of Plug Checkout. object {}
installmentsConfig Configurations for the installments field, if it should be exhibited and/or the quantity of installments the transaction provides. object { show: true, quantity: 1 }
merchant-id Subaccounts identifier on Plug. Click here to read more about it in the documentation. string undefined
sandbox Flag to define if the requests for Plug’s API must be made in a homologation or production environment. boolean false
statement-descriptor Description that will be shown on the buyer’s bill. string undefined
paymentSuccess Event called right after the success of the transaction. function undefined
paymentFailed Event called right after some transaction fail occurs. function undefined

UI Customization

For the checkout to be completely transparent and extensible, we provide some forms of customization so that it has the “face” of your company.

Theme

For theme customization (color pallet, spacing and typography) you may overwrite the variable values on your main file of CSS of application (usually the index.css). The variables we currently use are the ones below:

:root {
  /* Colors */
  --plug-checkout-color-brand-accent-light: #4ebff1;
  --plug-checkout-color-brand-accent-normal: #0055a2;
  --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-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-success: #32c000;

  /* Typography */
  --plug-checkout-typography-family: 'Lato', 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;

  /* Sizes */
  --plug-checkout-size-min-width: 250px;

  /* Border Radius */
  --plug-checkout-border-radius-default: 4px;

  /* Transitions Time */
  --plug-checkout-transition-slow: 0.3s;
  --plug-checkout-transition-default: 0.5s;
}

You can see an example of how to do it by clicking here.

Components

For customization focused directly on visual components that are part of the Plug Checkout, we provide the prop customFormStyleClasses which accepts an object with a series of properties that may be attributed CSS classes, that are created on your main file of CSS of application (usually the index.css). Below there is a list of properties the customFormStyleClasses supports:

const defaultCustomStyles = {
  formContainer: '<YOUR_CUSTOM_CLASS>',
  formContent: '<YOUR_CUSTOM_CLASS>',
  creditCardFieldContainer: '<YOUR_CUSTOM_CLASS>',
  creditCardFieldLabelContainer: '<YOUR_CUSTOM_CLASS>',
  creditCardFieldInputContainer: '<YOUR_CUSTOM_CLASS>',
  expirationDateFieldContainer: '<YOUR_CUSTOM_CLASS>',
  expirationDateFieldLabelContainer: '<YOUR_CUSTOM_CLASS>',
  expirationDateFieldInputContainer: '<YOUR_CUSTOM_CLASS>',
  cvvFieldContainer: '<YOUR_CUSTOM_CLASS>',
  cvvFieldLabelContainer: '<YOUR_CUSTOM_CLASS>',
  cvvFieldInputContainer: '<YOUR_CUSTOM_CLASS>',
  nameFieldContainer: '<YOUR_CUSTOM_CLASS>',
  nameFieldLabelContainer: '<YOUR_CUSTOM_CLASS>',
  nameFieldInputContainer: '<YOUR_CUSTOM_CLASS>',
  installmentsFieldContainer: '<YOUR_CUSTOM_CLASS>',
  installmentsFieldLabelContainer: '<YOUR_CUSTOM_CLASS>',
  installmentsFieldSelectContainer: '<YOUR_CUSTOM_CLASS>',
  submitButton: '<YOUR_CUSTOM_CLASS>',
}

You can see an example of how to do it by clicking here.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Readme

Keywords

Package Sidebar

Install

npm i @plug-checkout-full/core

Repository

github.com/plughacker/plug-checkout

Homepage

github.com/plughacker/plug-checkout#readme

Weekly Downloads

222

Version

1.6.2

License

MIT

Unpacked Size

7.34 MB

Total Files

125

Last publish

Collaborators

  • plug-pagamentos
Try on RunKit
Report malware