tonder-web-sdk 1.15.2 → 1.16.3

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/.prettierignore

@@ -0,0 +1,8 @@
+# Ignore artifacts:
+build
+coverage
+webpack.config.js
+v1
+README.md
+samples
+cypress

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

package/README.md

@@ -8,7 +8,9 @@ Tonder SDK helps to integrate the services Tonder offers in your own website
 2. [Usage](#usage)
    - [InlineCheckout](#inlinecheckout)
    - [LiteCheckout](#litecheckout)
-3. [Configuration Options](#configuration-options)
+3. [Configuration Options](#configuration)
+   - [Inline Options](#inline-options)
+   - [Lite Options](#lite-options)
 4. [Styling InlineCheckout](#styling-inlinecheckout)
 5. [Payment Data Structure](#payment-data-structure)
 6. [Field Validation Functions](#field-validation-functions)
@@ -96,16 +98,16 @@ inlineCheckout.verify3dsTransaction().then((response) => {
 const response = await inlineCheckout.payment(checkoutData);
 ```
 
-### LiteCheckout
+### LiteInlineCheckout
 
-LiteCheckout allows you to build a custom checkout interface using Tonder's core functionality.
+LiteInlineCheckout allows you to build a custom checkout interface using Tonder's core functionality.
 
 ```javascript
-import { LiteCheckout } from "tonder-web-sdk";
+import { LiteInlineCheckout } from "tonder-web-sdk";
 ```
 
 ```javascript
-const liteCheckout = new LiteCheckout({
+const LiteInlineCheckout = new LiteInlineCheckout({
   apiKey: "your-api-key", // Your api key getted from Tonder Dashboard
   returnUrl: "http://your-website.com/checkout",
 });
@@ -115,53 +117,148 @@ const liteCheckout = new LiteCheckout({
 inlineCheckout.configureCheckout({ customer: { email: "example@email.com" } });
 
 // Initialize the checkout
-await liteCheckout.injectCheckout();
+await LiteInlineCheckout.injectCheckout();
 ```
 
 ```javascript
 // Retrieve customer's saved cards
-const cards = await liteCheckout.getCustomerCards();
+const cards = await LiteInlineCheckout.getCustomerCards();
 ```
 
 ```javascript
 // Save a new card
-const newCard = await liteCheckout.saveCustomerCard(cardData);
+const newCard = await LiteInlineCheckout.saveCustomerCard(cardData);
 ```
 
 ```javascript
 // Remove a saved card
-await liteCheckout.removeCustomerCard(cardId);
+await LiteInlineCheckout.removeCustomerCard(cardId);
 ```
 
 ```javascript
 // Get available payment methods
-const paymentMethods = await liteCheckout.getCustomerPaymentMethods();
+const paymentMethods = await LiteInlineCheckout.getCustomerPaymentMethods();
 ```
 
 ```javascript
 // Process a payment
-const paymentResponse = await liteCheckout.payment(paymentData);
+const paymentResponse = await LiteInlineCheckout.payment(paymentData);
 ```
 
 ```javascript
 // Verify a 3DS transaction
-const verificationResult = await liteCheckout.verify3dsTransaction();
+const verificationResult = await LiteInlineCheckout.verify3dsTransaction();
+```
+
+## Configuration
+### Inline Options
+
+|   Property    |         Type         | Required | Description                        | Default                                                                                                                                                                                                                                                                                |                                  Description                                  |
+|:-------------:|:--------------------:|----------|------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------:|
+|     mode      |        string        | Yes      | Environment mode for the SDK       | stage                                                                                                                                                                                                                                                                                  | Environment mode. Options: 'stage', 'production', 'sandbox'. Default: 'stage' |
+|    apiKey     |        string        | Yes      | Your Tonder Public API key         |                                                                                                                                                                                                                                                                                        |                    Your API key from the Tonder Dashboard                     |
+|   returnUrl   |        string        | Yes      | URL for 3DS redirect completion    |                                                                                                                                                                                                                                                                                        |             URL where the checkout form is mounted (used for 3DS)             |
+|    styles     |        object        | No       |                                    |                                                                                                                                                                                                                                                                                        |        (InlineCheckout only) Custom styles for the checkout interface         |
+| customization | CustomizationOptions | No       | UI customization options           | `{displayMode: 'light',saveCards: {showSaveCardOption: false,showSaved: false,autoSave: false,},paymentButton: {show: false,text: "Pagar",showAmount: true,},cancelButton: {show: false,text: "Cancelar",},paymentMethods: {show: true,},cardForm: {show: true,},showMessages: true,}` |               Object to customize the checkout behavior and UI.               |
+|   callbacks   |   IInlineCallbacks   | No       | Payment process callback functions |
+<details>
+<summary>View Interface Definition</summary>
+
+```typescript
+interface IInlineCheckoutBaseOptions {
+  mode?: "production" | "sandbox" | "stage" | "development";
+  apiKey: string;
+  returnUrl: string;
+  callBack?: (response: any) => void;
+}
+interface IInlineCheckoutOptions extends IInlineCheckoutBaseOptions {
+  styles?: Record<string, string>;
+  customization?: CustomizationOptions;
+  callbacks?: IInlineCallbacks;
+}
+```
+</details>
+
+> **Important Note about SaveCard functionality**: 
+> To properly implement the SaveCard feature, you must use a SecureToken. For detailed implementation instructions and best practices, please refer to our official documentation on [How to use SecureToken for secure card saving](https://docs.tonder.io/integration/sdks/secure-token#how-to-use-securetoken-for-secure-card-saving).
+
+### Inline Callbacks Structure
+
+| Callback   | Required | Parameters | Description                                | Return        |
+|------------|----------|------------|--------------------------------------------|---------------|
+| `onCancel` | No       | none       | Called when user clicked the cancel button | Promise<void> |
+<details>
+<summary>View Interface Definition</summary>
+
+```typescript
+interface IInlineCallbacks extends IBaseCallback {
+  onCancel?: () => Promise<void>;
+}
+```
+</details>
+
+### Inline Customization Options
+
+| Option                       | Type    | Default    | Description                                                                               |
+|------------------------------|---------|------------|-------------------------------------------------------------------------------------------|
+| **saveCards**                |
+| saveCards.showSaveCardOption | boolean | true       | Shows a checkbox allowing users to choose whether to save their card for future purchases |
+| saveCards.showSaved          | boolean | true       | Displays a list of previously saved cards for the customer                                |
+| saveCards.autoSave           | boolean | false      | Automatically saves the card without showing the save option to the user                  |
+| **paymentButton**            |
+| paymentButton.show           | boolean | true       | Controls the visibility of the payment button                                             |
+| paymentButton.text           | string  | 'Pagar'    | Custom text to display on the payment button                                              |
+| paymentButton.showAmount     | boolean | true       | Shows the payment amount on the button (e.g., "Pay $100")                                 |
+| **cancelButton**             |
+| cancelButton.show            | boolean | true       | Controls the visibility of the cancel button                                              |
+| cancelButton.text            | string  | 'Cancelar' | Custom text to display on the cancel button                                               |
+| **paymentMethods**           |
+| paymentMethods.show          | boolean | true       | Controls the visibility of alternative payment methods section                            |
+| **cardForm**                 |
+| cardForm.show                | boolean | true       | Controls the visibility of the card input form                                            |
+| **General**                  |
+| showMessages                 | boolean | true       | Controls the visibility of error and success messages                                     |
+| displayMode                  | string  | light      | Controls the display mode light or dark                                                   |
+
+<details>
+<summary>View Interface Definition</summary>
+
+```typescript
+export type CustomizationOptions = {
+  displayMode?: "light" | "dark";
+  saveCards?: {
+    showSaveCardOption?: boolean;
+    showSaved?: boolean;
+    autoSave?: boolean;
+  };
+  paymentButton?: {
+    show?: boolean;
+    text?: string;
+    showAmount?: boolean;
+  };
+  cancelButton?: {
+    show?: boolean;
+    text?: string;
+  };
+  paymentMethods?: {
+    show?: boolean;
+  };
+  cardForm?: {
+    show?: boolean;
+  };
+  showMessages?: boolean;
+};
 ```
+</details>
 
-## Configuration Options
+## Lite Options
 
-Both InlineCheckout and LiteCheckout accept the following configuration options:
+| Property  |  Type  | Required | Description                     | Default |                                  Description                                  |
+|:---------:|:------:|----------|---------------------------------|---------|:-----------------------------------------------------------------------------:|
+|   mode    | string | Yes      | Environment mode for the SDK    | stage   | Environment mode. Options: 'stage', 'production', 'sandbox'. Default: 'stage' |
+|  apiKey   | string | Yes      | Your Tonder Public API key      |         |                    Your API key from the Tonder Dashboard                     |
+| returnUrl | string | Yes      | URL for 3DS redirect completion |         |             URL where the checkout form is mounted (used for 3DS)             |
 
-|                  Property                  |  Type   |                                                                 Description                                                                 |
-| :----------------------------------------: | :-----: | :-----------------------------------------------------------------------------------------------------------------------------------------: |
-|                    mode                    | string  |                                Environment mode. Options: 'stage', 'production', 'sandbox'. Default: 'stage'                                |
-|                   apiKey                   | string  |                                                   Your API key from the Tonder Dashboard                                                    |
-|                 returnUrl                  | string  |                                            URL where the checkout form is mounted (used for 3DS)                                            |
-|                   styles                   | object  |                                       (InlineCheckout only) Custom styles for the checkout interface                                        |
-|               customization                | object  | Object to customize the checkout behavior and UI. Default value `{saveCards: {showSaved: true, showSaveCardOption: true, autoSave: false}}` |
-|     customization.saveCards.showSaved      | boolean |                                         Show saved cards in the checkout UI. Default value: `true`                                          |
-| customization.saveCards.showSaveCardOption | object  |                                 Show the option to save the card for future payments. Default value: `true`                                 |
-|      customization.saveCards.autoSave      | object  |                         Automatically save the card without showing the option to the user. Default value: `false`                          |
 
 ## Styling InlineCheckout
 
@@ -252,15 +349,15 @@ When calling the `payment` method, use the following data structure:
 
 - **metadata**: Object for including any additional information about the transaction. This can be used for internal references or tracking.
 
-- **card**: (for LiteCheckout) Object containing card information. This is used differently depending on whether it's a new card or a saved card:
+- **card**: (for LiteInlineCheckout) Object containing card information. This is used differently depending on whether it's a new card or a saved card:
 
   - For a new card: Include `card_number`, `cvv`, `expiration_month`, `expiration_year`, and `cardholder_name`.
   - For a saved card: Include only the `skyflow_id` of the saved card.
   - This is only used when not paying with a payment_method.
 
-- **payment_method**: (for LiteCheckout) String indicating the alternative payment method to be used (e.g., "Spei"). This is only used when not paying with a card.
+- **payment_method**: (for LiteInlineCheckout) String indicating the alternative payment method to be used (e.g., "Spei"). This is only used when not paying with a card.
 
-Note: The exact fields required may vary depending on whether you're using InlineCheckout or LiteCheckout, and the specific payment method being used.
+Note: The exact fields required may vary depending on whether you're using InlineCheckout or LiteInlineCheckout, and the specific payment method being used.
 
 ```javascript
 const paymentData = {
@@ -312,7 +409,7 @@ const paymentData = {
 
 ## Field Validation Functions
 
-For LiteCheckout implementations, the SDK provides validation functions to ensure the integrity of card data before submitting:
+For LiteInlineCheckout implementations, the SDK provides validation functions to ensure the integrity of card data before submitting:
 
 - `validateCardNumber(cardNumber)`: Validates the card number using the Luhn algorithm.
 - `validateCardholderName(name)`: Checks if the cardholder name is valid.
@@ -357,7 +454,7 @@ if (
 - `payment(data)`: Process a payment
 - `verify3dsTransaction()`: Verify a 3DS transaction
 
-### LiteCheckout Methods
+### LiteInlineCheckout Methods
 
 - `configureCheckout(data)`: Set initial checkout data
 - `injectCheckout()`: Initialize the checkout
@@ -434,6 +531,63 @@ document
   });
 ```
 
+
+#### InlineCheckout with default Tonder Payment button Example (your-script.js)
+> 💡 **Note:** It is important to send all payment data (customer, cart, metadata, etc) when configuring the checkout; this is necessary when using Tonder's default payment button.
+
+```javascript
+import { InlineCheckout } from "tonder-web-sdk";
+
+const apiKey = "your-api-key";
+const returnUrl = "http://your-website.com/checkout";
+
+const inlineCheckout = new InlineCheckout({
+  mode: "development",
+  apiKey,
+  returnUrl,
+  styles: customStyles,
+  customization: {
+    paymentButton: {
+      show: true
+    }
+  }, // activate default Tonder Payment button
+  callBack: (response) => {
+      console.log('Payment response', response)
+  }  
+});
+
+// It is important to send all payment data (customer, cart, metadata, etc) when configuring the checkout; this is necessary when using Tonder's default payment button.
+inlineCheckout.configureCheckout(
+    { 
+        customer: { email: "example@email.com" },
+        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,
+                },
+            ],
+        },
+        metadata: {}, // Optional
+        order_reference: "" // Optional
+    }
+);
+inlineCheckout.injectCheckout();
+
+inlineCheckout.verify3dsTransaction().then((response) => {
+  console.log("Verify 3ds response", response);
+});
+```
+
+
 #### LiteCheckout Example (your-script.js)
 
 ```javascript
@@ -442,16 +596,16 @@ import { LiteInlineCheckout } from "tonder-web-sdk";
 const apiKey = "your-api-key";
 const returnUrl = "http://your-website.com/checkout";
 
-const liteCheckout = new LiteInlineCheckout({
+const LiteInlineCheckout = new LiteInlineCheckout({
   mode: "development",
   apiKey,
   returnUrl,
 });
 
-liteCheckout.configureCheckout({ customer: { email: "example@email.com" } });
-liteCheckout.injectCheckout();
+LiteInlineCheckout.configureCheckout({ customer: { email: "example@email.com" } });
+LiteInlineCheckout.injectCheckout();
 
-liteCheckout.verify3dsTransaction().then((response) => {
+LiteInlineCheckout.verify3dsTransaction().then((response) => {
   console.log("Verify 3ds response", response);
 });
 
@@ -469,7 +623,7 @@ document
 
     try {
       const paymentData = { ...checkoutData, card: cardData };
-      const response = await liteCheckout.payment(paymentData);
+      const response = await LiteInlineCheckout.payment(paymentData);
       console.log("Payment response:", response);
       alert("Payment successful");
     } catch (error) {
@@ -681,7 +835,7 @@ export class TonderService {
   // Add more functions, for example for lite sdk: get payment methods
 
   // getCustomerPaymentMethods(): Promise<IPaymentMethod[]> {
-  //     return this.liteCheckout.getCustomerPaymentMethods();
+  //     return this.LiteInlineCheckout.getCustomerPaymentMethods();
   // }
 }
 

package/eslint.config.mjs

@@ -0,0 +1,15 @@
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginPrettier from "eslint-plugin-prettier";
+
+export default [
+  eslintConfigPrettier,
+  {
+    files: ["src/**/*.js"],
+    plugins: {
+      prettier: eslintPluginPrettier,
+    },
+    rules: {
+      "prettier/prettier": "error",
+    },
+  },
+];

package/package.json

@@ -1,18 +1,24 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.15.2",
+  "version": "1.16.3",
   "description": "tonder sdk for integrations",
   "main": "src/index.js",
   "scripts": {
     "start": "webpack-dev-server",
-    "build": "webpack --config webpack.config.js --mode production"
+    "build": "webpack --config webpack.config.js --mode production",
+    "prepare": "husky install",
+    "format": "prettier --write .",
+    "lint": "eslint 'src/**/*.js'",
+    "lint:fix": "eslint 'src/**/*.js' --fix"
   },
   "author": "",
   "types": "types/index.d.ts",
   "license": "ISC",
   "dependencies": {
+    "accordion-js": "^3.4.0",
     "crypto-js": "^4.1.1",
-    "dotenv": "^16.3.1"
+    "dotenv": "^16.3.1",
+    "lodash.get": "^4.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -21,12 +27,23 @@
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
     "cypress": "^13.6.2",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "html-webpack-plugin": "^5.5.3",
-    "prettier": "^3.3.3",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.4.1",
+    "prettier": "3.4.2",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npm run format",
+      "npm run lint:fix"
+    ]
   }
 }

package/src/classes/3dsHandler.js

@@ -1,103 +1,99 @@
 export class ThreeDSHandler {
-  constructor({
-    payload = null,
-    apiKey,
-    baseUrl,
-  }) {
-    this.baseUrl = baseUrl
-    this.apiKey = apiKey
-    this.payload = payload
+  constructor({ payload = null, apiKey, baseUrl }) {
+    this.baseUrl = baseUrl;
+    this.apiKey = apiKey;
+    this.payload = payload;
   }
 
   saveVerifyTransactionUrl() {
-    const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url
+    const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url;
     if (url) {
-      this.saveUrlWithExpiration(url)
+      this.saveUrlWithExpiration(url);
     } else {
-      const url = this.payload?.next_action?.iframe_resources?.verify_transaction_status_url
+      const url = this.payload?.next_action?.iframe_resources?.verify_transaction_status_url;
       if (url) {
-        this.saveUrlWithExpiration(url)
+        this.saveUrlWithExpiration(url);
       } else {
-        console.log('No verify_transaction_status_url found');
+        console.log("No verify_transaction_status_url found");
       }
     }
   }
 
   saveUrlWithExpiration(url) {
     try {
-      const now = new Date()
+      const now = new Date();
       const item = {
         url: url,
         // Expires after 20 minutes
-        expires: now.getTime() + 20 * 60 * 1000
-      }
-      localStorage.setItem('verify_transaction_status', JSON.stringify(item))
+        expires: now.getTime() + 20 * 60 * 1000,
+      };
+      localStorage.setItem("verify_transaction_status", JSON.stringify(item));
     } catch (error) {
-     console.log('error: ', error)
+      console.log("error: ", error);
     }
   }
 
   getUrlWithExpiration() {
-    const item = JSON.parse(localStorage.getItem("verify_transaction_status"))
-    if (!item) return
+    const item = JSON.parse(localStorage.getItem("verify_transaction_status"));
+    if (!item) return;
 
-    const now = new Date()
+    const now = new Date();
     if (now.getTime() > item.expires) {
-      this.removeVerifyTransactionUrl()
-      return null
+      this.removeVerifyTransactionUrl();
+      return null;
     } else {
-      return item.url
+      return item.url;
     }
   }
 
   removeVerifyTransactionUrl() {
-    localStorage.removeItem("verify_transaction_status")
+    localStorage.removeItem("verify_transaction_status");
   }
 
   getVerifyTransactionUrl() {
-    return localStorage.getItem("verify_transaction_status") 
+    return localStorage.getItem("verify_transaction_status");
   }
 
   loadIframe() {
-    const iframe = this.payload?.next_action?.iframe_resources?.iframe
+    const iframe = this.payload?.next_action?.iframe_resources?.iframe;
     if (iframe) {
       return new Promise((resolve, reject) => {
-        const iframe = this.payload?.next_action?.iframe_resources?.iframe
+        const iframe = this.payload?.next_action?.iframe_resources?.iframe;
 
         if (iframe) {
           // TODO: This is not working for Azul
-          this.saveVerifyTransactionUrl()
-          const container = document.createElement('div')
-          container.innerHTML = iframe
-          document.body.appendChild(container)
+          this.saveVerifyTransactionUrl();
+          const container = document.createElement("div");
+          container.innerHTML = iframe;
+          document.body.appendChild(container);
 
           // Create and append the script tag manually
-          const script = document.createElement('script')
-          script.textContent = 'document.getElementById("tdsMmethodForm").submit();'
-          container.appendChild(script)
+          const script = document.createElement("script");
+          script.textContent = 'document.getElementById("tdsMmethodForm").submit();';
+          container.appendChild(script);
 
           // Resolve the promise when the iframe is loaded
-          const iframeElement = document.getElementById('tdsMmethodTgtFrame')
-          iframeElement.onload = () => resolve(true)
+          const iframeElement = document.getElementById("tdsMmethodTgtFrame");
+          iframeElement.onload = () => resolve(true);
         } else {
-          console.log('No redirection found');
-          reject(false)
+          console.log("No redirection found");
+          reject(false);
         }
-      })
+      });
     }
   }
 
   getRedirectUrl() {
-    return this.payload?.next_action?.redirect_to_url?.url
+    return this.payload?.next_action?.redirect_to_url?.url;
   }
 
   redirectToChallenge() {
-    const url = this.getRedirectUrl()
+    const url = this.getRedirectUrl();
     if (url) {
-      this.saveVerifyTransactionUrl()
+      this.saveVerifyTransactionUrl();
       window.location = url;
     } else {
-      console.log('No redirection found');
+      console.log("No redirection found");
     }
   }
 
@@ -118,7 +114,7 @@ export class ThreeDSHandler {
   // TODO: Remove this duplication
   handleSuccessTransaction(response) {
     this.removeVerifyTransactionUrl();
-    console.log('Transacción autorizada');
+    console.log("Transacción autorizada");
     return response;
   }
 
@@ -129,22 +125,22 @@ export class ThreeDSHandler {
 
   async handle3dsChallenge(response_json) {
     // Create the form element:
-    const form = document.createElement('form');
-    form.name = 'frm';
-    form.method = 'POST';
+    const form = document.createElement("form");
+    form.name = "frm";
+    form.method = "POST";
     form.action = response_json.redirect_post_url;
 
     // Add hidden fields:
-    const creqInput = document.createElement('input');
-    creqInput.type = 'hidden';
-    creqInput.name = 'creq';
+    const creqInput = document.createElement("input");
+    creqInput.type = "hidden";
+    creqInput.name = "creq";
     creqInput.value = response_json.creq;
     form.appendChild(creqInput);
 
     if (response_json.term_url) {
-      const termUrlInput = document.createElement('input');
-      termUrlInput.type = 'hidden';
-      termUrlInput.name = 'TermUrl';
+      const termUrlInput = document.createElement("input");
+      termUrlInput.type = "hidden";
+      termUrlInput.name = "TermUrl";
       termUrlInput.value = response_json.term_url;
       form.appendChild(termUrlInput);
     }
@@ -164,7 +160,7 @@ export class ThreeDSHandler {
       return this.handleSuccessTransaction(response_json);
     } else {
       this.handleDeclinedTransaction();
-      return response_json
+      return response_json;
     }
   }
 
@@ -182,22 +178,22 @@ export class ThreeDSHandler {
           // body: JSON.stringify(data),
         });
         if (response.status !== 200) {
-          console.error('La verificación de la transacción falló.');
+          console.error("La verificación de la transacción falló.");
           this.removeVerifyTransactionUrl();
-          return response
+          return response;
         }
 
         return await this.handleTransactionResponse(response);
       } catch (error) {
-        console.error('Error al verificar la transacción:', error);
+        console.error("Error al verificar la transacción:", error);
         this.removeVerifyTransactionUrl();
       }
     } else {
-      console.log('No verify_transaction_status_url found');
+      console.log("No verify_transaction_status_url found");
     }
   }
 
-  setPayload = (payload) => {
-    this.payload = payload
-  }
+  setPayload = payload => {
+    this.payload = payload;
+  };
 }