@tonder.io/ionic-full-sdk 0.0.25-beta → 0.0.26-beta

package/README.md

@@ -1,448 +1,448 @@
-# Tonder Ionic Full SDK
-
-Tonder SDK to integrate checkout form
-
-## Installation
-
-You can install using NPM
-```bash
-npm i @tonder.io/ionic-full-sdk
-```
-
-Add dependencies to the root of the app (index.html)
-```html
-<script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
-<script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
-```
-
-## Usage
-On HTML view
-```html
-<div>
-    <h1>Checkout</h1>
-    <!-- You have to add an entry point with the ID 'tonder-checkout' -->
-    <div id="tonder-checkout"></div>
-</div>
-```
-On Script section
-
-```javascript
-import { InlineCheckout } from "@tonder.io/ionic-full-sdk"
-```
-
-```javascript
-const checkoutData = {
-  customer: {
-    firstName: "Juan",
-    lastName: "Hernández",
-    country: "Mexico",
-    address: "Av. Revolución 356, Col. Roma",
-    city: "Monterrey",
-    state: "Nuevo León",
-    postCode: "64700",
-    email: "juan.hernandez@mail.com",
-    phone: "8187654321",
-  },
-  currency: 'mxn',
-  cart: {
-    total: 399,
-    items: [
-      {
-        description: "Black T-Shirt",
-        quantity: 1,
-        price_unit: 1,
-        discount: 0,
-        taxes: 0,
-        product_reference: 1,
-        name: "T-Shirt",
-        amount_total: 399,
-      },
-    ]
-  }
-};
-
-const apiKey = "You can take this from you Tonder Dashboard";
-const returnUrl = "http://my-website:8080/checkout-success"
-const successUrl = "http://my-website:8080/3ds-success"
-
-const inlineCheckout = new InlineCheckout({
-  apiKey,
-  returnUrl,
-  successUrl
-});
-
-inlineCheckout.setPaymentData(checkoutData);
-inlineCheckout.setCartTotal(checkoutData.cart.total);
-inlineCheckout.setCustomerEmail(checkoutData.cart.email);
-inlineCheckout.injectCheckout();
-
-```
-
-## Configuration
-| Property          | Type          | Required          | Description                                                 |
-|-------------------|---------------|:-----------------:|-------------------------------------------------------------|
-| apiKey            | string        | X                 | You can take this from you Tonder Dashboard                 |
-| returnUrl         | string        | X                 |                                                             |
-| successUrl        | string        |                   |                                                             |
-| style             | object        |                   |                                                             |
-| containerId       | string        |                   | If require a custom checkout container id, default          |
-|                   |               |                   | value "tonder-checkout"                                     |
-| collectorIds      | object        |                   | If require a custom div containers ids, default             |
-|                   |               |                   | value:                                                      |
-|                   |               |                   | {                                                           |
-|                   |               |                   |   cardsListContainer: "cardsListContainer",                 |
-|                   |               |                   |   holderName: "collectCardholderName",                      |
-|                   |               |                   |   cardNumber: "collectCardNumber",                          |
-|                   |               |                   |   expirationMonth: "collectExpirationMonth",                |
-|                   |               |                   |   expirationYear: "collectExpirationYear",                  |
-|                   |               |                   |   cvv: "collectCvv",                                        |
-|                   |               |                   |   tonderPayButton: "tonderPayButton",                       |
-|                   |               |                   |   msgError: "msgError",                                     |
-|                   |               |                   |   msgNotification: "msgNotification"                        |
-|                   |               |                   | }                                                           |
-| callBack          | function      |                   | Callback function invoqued after the payment process        | 
-|                   |               |                   | end successfully                                            |
-| isOpenpaySandbox  | boolean       |                   | Define if openpay work on sandbox, default value true       |
-
-## Theming
-
-<font size="3"> It exists two types of styles to the tonder checkout </font>
-
-```javascript
-
-const customStyles = {
-  inputStyles: {
-    base: {
-      border: "1px solid #e0e0e0",
-      padding: "10px 7px",
-      borderRadius: "5px",
-      color: "#1d1d1d",
-      marginTop: "2px",
-      backgroundColor: "white",
-      fontFamily: '"Inter", sans-serif',
-      fontSize: '16px',
-      '&::placeholder': {
-        color: "#ccc",
-      },
-    },
-    cardIcon: {
-      position: 'absolute',
-      left: '6px',
-      bottom: 'calc(50% - 12px)',
-    },
-    complete: {
-      color: "#4caf50",
-    },
-    empty: {},
-    focus: {},
-    invalid: {
-      border: "1px solid #f44336",
-    },
-    global: {
-      '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
-    }
-  },
-  labelStyles: {
-    base: {
-      fontSize: '12px',
-      fontWeight: '500',
-      fontFamily: '"Inter", sans-serif'
-    },
-  },
-  errorTextStyles: {
-    base: {
-      fontSize: '12px',
-      fontWeight: '500',
-      color: "#f44336",
-      fontFamily: '"Inter", sans-serif'
-    },
-  },
-  labels: {
-    cardLabel: 'Número de Tarjeta Personalizado',
-    cvvLabel: 'Código de Seguridad',
-    expiryMonthLabel: 'Mes de Expiración',
-    expiryYearLabel: 'Año de Expiración'
-  },
-  placeholders: {
-    cardPlaceholder: '0000 0000 0000 0000',
-    cvvPlaceholder: '123',
-    expiryMonthPlaceholder: 'MM',
-    expiryYearPlaceholder: 'AA'
-  }
-}
-
-const inlineCheckout = new InlineCheckout({
-  apiKey,
-  returnUrl,
-  successUrl,
-  styles: customStyles
-});
-
-```
-
-<font size="3">The styles param is related to the style of the inputs inside the checkout form, to customize the checkout container and the cards list you can use global styles on base to this classes</font>
-
-```css
-
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
-
-.container-tonder {
-  background-color: #F9F9F9;
-  margin: 0 auto;
-  padding: 30px 10px 30px 10px;
-  overflow: hidden;
-  transition: max-height 0.5s ease-out;
-  max-width: 600px;
-  border: solid 1px #e3e3e3;
-}
-
-.collect-row {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.collect-row > :first-child {
-  min-width: 120px;
-}
-
-.expiration-year {
-  padding-top: 25px;
-}
-
-.empty-div {
-  height: 80px;
-  margin-top: 2px;
-  margin-bottom: 4px;
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
-.error-container{
-  color: red;
-  background-color: #FFDBDB;
-  margin-bottom: 13px;
-  font-size: 80%;
-  padding: 8px 10px;
-  border-radius: 10px;
-  text-align: left;
-}
-
-.message-container{
-  color: green;
-  background-color: #90EE90;
-  margin-bottom: 13px;
-  font-size: 80%;
-  padding: 8px 10px;
-  border-radius: 10px;
-  text-align: left;
-}
-
-.pay-button {
-  font-size: 16px;
-  font-weight: bold;
-  min-height: 2.3rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  width: 100%;
-  padding: 1rem;
-  text-align: center;
-  border: none;
-  background-color: #000;
-  color: #fff;
-  margin-bottom: 10px;
-  display: none;
-}
-
-.pay-button:disabled, pay-button[disabled] {
-  background-color: #B9B9B9;
-}
-
-.lds-dual-ring {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-};
-
-.lds-dual-ring:after {
-  content: " ";
-  display: block;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 6px solid #fff;
-  border-color: #fff transparent #fff transparent;
-  animation: lds-dual-ring 1.2s linear infinite;
-}
-
-@keyframes lds-dual-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .payment_method_zplit {
-    font-size: 16px;
-    width: 100%;
-  }
-
-  .payment_method_zplit  label img {
-    display: none;
-  }
-}
-
-.cards-list-container {
-  display: flex;
-  flex-direction: column;
-  padding: 0px 10px 0px 10px;
-  gap: 33% 20px;
-}
-
-.checkbox label {
-  margin-left: 10px;
-  font-size: '12px';
-  font-weight: '500';
-  color: #1D1D1D;
-  font-family: "Inter", sans-serif;
-}
-
-.checkbox {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  width: 100%;
-  text-align: left;
-}
-
-.pay-new-card {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  color: #1D1D1D;
-  gap: 33% 20px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
-}
-
-.pay-new-card .card-number {
-  font-size: 16px;
-  font-family: "Inter", sans-serif;
-}
-
-.card-image {
-  width: 27px;
-  height: 20px;
-  text-align: left;
-}
-
-.card-item-label {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  color: #1D1D1D;
-  gap: 33% 20px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
-}
-
-.card_selected {
-  width: 10%;
-}
-
-.card-item {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  gap: 33% 20px;
-}
-
-.card-item .card-number {
-  font-size: 16px;
-  font-family: "Inter", sans-serif;
-}
-
-.card-item .card-expiration {
-  font-size: 16px;
-  font-family: "Inter", sans-serif;
-}
-
-```
-
-<font size="3">Included in this html template</font>
-
-<font size="4">Form</font>
-
-```html
-
-<div class="container-tonder">
-  <div class="cards-list-container"></div>
-  <div class="pay-new-card">
-    <input checked id="new" name="card_selected" type="radio"/>
-    <label for="new">
-      <img class="card-image"/>
-      <div class="card-number"></div>
-    </label>
-  </div>
-  <div class="container-form">
-    <div class="empty-div"></div>
-    <div class="empty-div"></div>
-    <div class="collect-row">
-      <div class="empty-div"></div>
-      <div class="expiration-year"></div>
-      <div class="empty-div"></div>
-    </div>
-    <div class="checkbox">
-      <input id="save-checkout-card" type="checkbox">
-      <label for="save-checkout-card"></label>
-    </div>
-    <div></div>
-    <div></div>
-  </div>
-  <button class="pay-button"></button>
-</div>
-
-```
-
-<font size="4">Cards list</font>
-
-```html
-
-<div class="card-item">
-  <input name="card_selected" type="radio"/>
-  <label class="card-item-label">
-    <img class="card-image"/>
-    <div class="card-number"></div>
-    <div class="card-expiration"></div>
-  </label>
-</div>
-
-```
-## Mobile settings
-
-<font size="3">If you are deploying to Android, edit your AndroidManifest.xml file to add the Internet permission.</font>
-
-```xml
-<!-- Required to fetch data from the internet. -->
-<uses-permission android:name="android.permission.INTERNET" />
-```
-
-<font size="3">Likewise, if you are deploying to macOS, edit your macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements files to include the network client entitlement.</font>
-
-```xml
-<!-- Required to fetch data from the internet. -->
-<key>com.apple.security.network.client</key>
-<true/>
-```
-
-## License
-
-[MIT](https://choosealicense.com/licenses/mit/)
+# Tonder Ionic Full SDK
+
+Tonder SDK to integrate checkout form
+
+## Installation
+
+You can install using NPM
+```bash
+npm i @tonder.io/ionic-full-sdk
+```
+
+Add dependencies to the root of the app (index.html)
+```html
+<script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
+<script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
+```
+
+## Usage
+On HTML view
+```html
+<div>
+    <h1>Checkout</h1>
+    <!-- You have to add an entry point with the ID 'tonder-checkout' -->
+    <div id="tonder-checkout"></div>
+</div>
+```
+On Script section
+
+```javascript
+import { InlineCheckout } from "@tonder.io/ionic-full-sdk"
+```
+
+```javascript
+const checkoutData = {
+  customer: {
+    firstName: "Juan",
+    lastName: "Hernández",
+    country: "Mexico",
+    address: "Av. Revolución 356, Col. Roma",
+    city: "Monterrey",
+    state: "Nuevo León",
+    postCode: "64700",
+    email: "juan.hernandez@mail.com",
+    phone: "8187654321",
+  },
+  currency: 'mxn',
+  cart: {
+    total: 399,
+    items: [
+      {
+        description: "Black T-Shirt",
+        quantity: 1,
+        price_unit: 1,
+        discount: 0,
+        taxes: 0,
+        product_reference: 1,
+        name: "T-Shirt",
+        amount_total: 399,
+      },
+    ]
+  }
+};
+
+const apiKey = "You can take this from you Tonder Dashboard";
+const returnUrl = "http://my-website:8080/checkout-success"
+const successUrl = "http://my-website:8080/3ds-success"
+
+const inlineCheckout = new InlineCheckout({
+  apiKey,
+  returnUrl,
+  successUrl
+});
+
+inlineCheckout.setPaymentData(checkoutData);
+inlineCheckout.setCartTotal(checkoutData.cart.total);
+inlineCheckout.setCustomerEmail(checkoutData.cart.email);
+inlineCheckout.injectCheckout();
+
+```
+
+## Configuration
+| Property          | Type          | Required          | Description                                                 |
+|-------------------|---------------|:-----------------:|-------------------------------------------------------------|
+| apiKey            | string        | X                 | You can take this from you Tonder Dashboard                 |
+| returnUrl         | string        | X                 |                                                             |
+| successUrl        | string        |                   |                                                             |
+| style             | object        |                   |                                                             |
+| containerId       | string        |                   | If require a custom checkout container id, default          |
+|                   |               |                   | value "tonder-checkout"                                     |
+| collectorIds      | object        |                   | If require a custom div containers ids, default             |
+|                   |               |                   | value:                                                      |
+|                   |               |                   | {                                                           |
+|                   |               |                   |   cardsListContainer: "cardsListContainer",                 |
+|                   |               |                   |   holderName: "collectCardholderName",                      |
+|                   |               |                   |   cardNumber: "collectCardNumber",                          |
+|                   |               |                   |   expirationMonth: "collectExpirationMonth",                |
+|                   |               |                   |   expirationYear: "collectExpirationYear",                  |
+|                   |               |                   |   cvv: "collectCvv",                                        |
+|                   |               |                   |   tonderPayButton: "tonderPayButton",                       |
+|                   |               |                   |   msgError: "msgError",                                     |
+|                   |               |                   |   msgNotification: "msgNotification"                        |
+|                   |               |                   | }                                                           |
+| callBack          | function      |                   | Callback function invoqued after the payment process        | 
+|                   |               |                   | end successfully                                            |
+| isOpenpaySandbox  | boolean       |                   | Define if openpay work on sandbox, default value true       |
+
+## Theming
+
+<font size="3"> It exists two types of styles to the tonder checkout </font>
+
+```javascript
+
+const customStyles = {
+  inputStyles: {
+    base: {
+      border: "1px solid #e0e0e0",
+      padding: "10px 7px",
+      borderRadius: "5px",
+      color: "#1d1d1d",
+      marginTop: "2px",
+      backgroundColor: "white",
+      fontFamily: '"Inter", sans-serif',
+      fontSize: '16px',
+      '&::placeholder': {
+        color: "#ccc",
+      },
+    },
+    cardIcon: {
+      position: 'absolute',
+      left: '6px',
+      bottom: 'calc(50% - 12px)',
+    },
+    complete: {
+      color: "#4caf50",
+    },
+    empty: {},
+    focus: {},
+    invalid: {
+      border: "1px solid #f44336",
+    },
+    global: {
+      '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
+    }
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      fontFamily: '"Inter", sans-serif'
+    },
+  },
+  errorTextStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      color: "#f44336",
+      fontFamily: '"Inter", sans-serif'
+    },
+  },
+  labels: {
+    cardLabel: 'Número de Tarjeta Personalizado',
+    cvvLabel: 'Código de Seguridad',
+    expiryMonthLabel: 'Mes de Expiración',
+    expiryYearLabel: 'Año de Expiración'
+  },
+  placeholders: {
+    cardPlaceholder: '0000 0000 0000 0000',
+    cvvPlaceholder: '123',
+    expiryMonthPlaceholder: 'MM',
+    expiryYearPlaceholder: 'AA'
+  }
+}
+
+const inlineCheckout = new InlineCheckout({
+  apiKey,
+  returnUrl,
+  successUrl,
+  styles: customStyles
+});
+
+```
+
+<font size="3">The styles param is related to the style of the inputs inside the checkout form, to customize the checkout container and the cards list you can use global styles on base to this classes</font>
+
+```css
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+
+.container-tonder {
+  background-color: #F9F9F9;
+  margin: 0 auto;
+  padding: 30px 10px 30px 10px;
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+  max-width: 600px;
+  border: solid 1px #e3e3e3;
+}
+
+.collect-row {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.collect-row > :first-child {
+  min-width: 120px;
+}
+
+.expiration-year {
+  padding-top: 25px;
+}
+
+.empty-div {
+  height: 80px;
+  margin-top: 2px;
+  margin-bottom: 4px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.error-container{
+  color: red;
+  background-color: #FFDBDB;
+  margin-bottom: 13px;
+  font-size: 80%;
+  padding: 8px 10px;
+  border-radius: 10px;
+  text-align: left;
+}
+
+.message-container{
+  color: green;
+  background-color: #90EE90;
+  margin-bottom: 13px;
+  font-size: 80%;
+  padding: 8px 10px;
+  border-radius: 10px;
+  text-align: left;
+}
+
+.pay-button {
+  font-size: 16px;
+  font-weight: bold;
+  min-height: 2.3rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  width: 100%;
+  padding: 1rem;
+  text-align: center;
+  border: none;
+  background-color: #000;
+  color: #fff;
+  margin-bottom: 10px;
+  display: none;
+}
+
+.pay-button:disabled, pay-button[disabled] {
+  background-color: #B9B9B9;
+}
+
+.lds-dual-ring {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+};
+
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .payment_method_zplit {
+    font-size: 16px;
+    width: 100%;
+  }
+
+  .payment_method_zplit  label img {
+    display: none;
+  }
+}
+
+.cards-list-container {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 10px 0px 10px;
+  gap: 33% 20px;
+}
+
+.checkbox label {
+  margin-left: 10px;
+  font-size: '12px';
+  font-weight: '500';
+  color: #1D1D1D;
+  font-family: "Inter", sans-serif;
+}
+
+.checkbox {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+  text-align: left;
+}
+
+.pay-new-card {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
+.pay-new-card .card-number {
+  font-size: 16px;
+  font-family: "Inter", sans-serif;
+}
+
+.card-image {
+  width: 27px;
+  height: 20px;
+  text-align: left;
+}
+
+.card-item-label {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
+.card_selected {
+  width: 10%;
+}
+
+.card-item {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 33% 20px;
+}
+
+.card-item .card-number {
+  font-size: 16px;
+  font-family: "Inter", sans-serif;
+}
+
+.card-item .card-expiration {
+  font-size: 16px;
+  font-family: "Inter", sans-serif;
+}
+
+```
+
+<font size="3">Included in this html template</font>
+
+<font size="4">Form</font>
+
+```html
+
+<div class="container-tonder">
+  <div class="cards-list-container"></div>
+  <div class="pay-new-card">
+    <input checked id="new" name="card_selected" type="radio"/>
+    <label for="new">
+      <img class="card-image"/>
+      <div class="card-number"></div>
+    </label>
+  </div>
+  <div class="container-form">
+    <div class="empty-div"></div>
+    <div class="empty-div"></div>
+    <div class="collect-row">
+      <div class="empty-div"></div>
+      <div class="expiration-year"></div>
+      <div class="empty-div"></div>
+    </div>
+    <div class="checkbox">
+      <input id="save-checkout-card" type="checkbox">
+      <label for="save-checkout-card"></label>
+    </div>
+    <div></div>
+    <div></div>
+  </div>
+  <button class="pay-button"></button>
+</div>
+
+```
+
+<font size="4">Cards list</font>
+
+```html
+
+<div class="card-item">
+  <input name="card_selected" type="radio"/>
+  <label class="card-item-label">
+    <img class="card-image"/>
+    <div class="card-number"></div>
+    <div class="card-expiration"></div>
+  </label>
+</div>
+
+```
+## Mobile settings
+
+<font size="3">If you are deploying to Android, edit your AndroidManifest.xml file to add the Internet permission.</font>
+
+```xml
+<!-- Required to fetch data from the internet. -->
+<uses-permission android:name="android.permission.INTERNET" />
+```
+
+<font size="3">Likewise, if you are deploying to macOS, edit your macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements files to include the network client entitlement.</font>
+
+```xml
+<!-- Required to fetch data from the internet. -->
+<key>com.apple.security.network.client</key>
+<true/>
+```
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)