PayMethod UI

Before integrating with this component, we highly recommend reading Embedded Components Overview to make sure you select the right component for your use case, authenticate properly, and understand how to style the components.

This page covers only the configuration unique to this component, and doesn’t cover all the basic usage for embedded components.

Use the PayMethod UI component to launch a modal that captures a customer payment method for tokenization and returns an ID. Use the ID make future transactions via API with the storedMethodId field. Go to CodePen to see a full working example of this component.

This component is supported in the Playground

Use the Embedded Component Playground to edit and design embedded components in real time, and export the code to use in your own site or app.

Usage

The PayMethod UI component is a lightbox that’s displayed over content, you need an action or an event to trigger a function to display this modal.

See Library URLs for important information about embedded components library URLs.

Step 1: Include the Payabli component

Add the script to the <body> element of your HTML.

Sandbox
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script src="https://embedded-component-sandbox.payabli.com/component.js" data-test></script>
</body>
</html>

You need to include <meta charset="UTF-8"> in the <head> element of your HTML to prevent problems with special characters such as ‘á’ or ‘ñ’.

Step 2: Define the component container

Add the container to your HTML. This <div> tag is where the page renders the component. The ID is the identifier for rootContainer in your component configuration.

Sandbox
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="pay-component-1"></div>
  <script src="https://embedded-component-sandbox.payabli.com/component.js" data-test></script>
</body>
</html>

Step 3: Configure the component

Define the component configuration in a script block immediately after component.js and create an instance of the component.

Skip to the configuration reference section

In the example below the component modal is hidden by default. In this case you need a button to show the component on demand. Notice that the value for hideComponent in the configuration is true. This value hides the modal by default.

Full configuration example
<body>
  <div id="pay-component-1"></div>
  <button id="btnx">Show Modal</button>
  <script src="https://embedded-component-sandbox.payabli.com/component.js" data-test></script>
  <script>
      document.getElementById('btnx').addEventListener('click', showcomponent);
      var payabliConfig0 = {
          type: "methodLightbox",
          rootContainer: "pay-component-1",
          buttonLabelInModal: 'Save Payment Method',
          defaultOpen: 'ach',
          hideComponent: true,
          token: "o.z8j8aaztW9tUtUg4dlVeYAx+L2MazOFGr0DY8yuK3u79MCYlGK4/q0t5AD1UgLAjXOohnxN8VTZfPswyZcwtChGNn1a8jFMmYWHmLN2cPDW9IrBt1RtrSuu+85HJI+4kML5sIk9SYvULDAU2k0X0E1KFYcPwjmmkUjktrEGtz48XCUM70aKUupkrTh8nL7CXpAXATzVUZ2gEld9jGINwECPPLWmu+cZ4CJb7QMJxnzKFD073+nq/eL+pMth7+u/SkmAWC0+jn8y+Lf6T5Q5PqB6wN7Mvosp8g7U7lbEW2wC0DA92pjblfDHVJOQUkjgT7B1GvryMokLvBjoiaLhKa55iKZE1YDlyqruILkoNF+zGSPS9r17qU6w4ziKhoMdSPzPBJBlLhQhz3MVANXbjfEfJwmtr/JJ1uStUfBFJ710cS1x7goxMJO/cl+q+LVtPy788EKFkgMc5OjfBNCsNL+dBDVbK5CiIJUSbOFzdqdjY/VJ14MEodsHYOwMAjuF4.KRFMeEj0SOur8MLZ362c/UZ/U/Az3CSUkr3/8EVDE6Y=",
          entryPoint: "bozeman-aikido",
          card: {
              enabled: true,
              amex: true,
              discover: true,
              visa: true,
              mastercard: true,
              jcb: true,
              diners: true
          },
          ach: {
              enabled: true,
              checking: true,
              savings: false
          },
          customerData: {
              customerNumber: "00001",
              firstName: "John",
              lastName: "Doe",
              billingEmail: "johndoe@email.com"
          },

          functionCallBackSuccess: function (response) {
            // This callback covers both 2XX and 4XX responses
            console.log(response);
            switch (response.responseText) {
              case "Success":
                // Tokenization was successful
                alert(`Success: ${response.responseData.resultText}`);
                break;
              case "Declined":
                // Tokenization failed due to processor decline or validation errors
                // Recommend reinitialization of the component so that the user can try again
                // with different card data
                alert(`Declined: ${response.responseData.resultText}`);
                paycomponent0.payabliExec("reinit");
                break;
              default:
                // Other response text. These are normally errors with Payabli internal validations
                // before processor engagement
                // We recommend reinitializing the component.
                // If the problem persists, contact Payabli to help debug
                alert(`Error: ${response.responseText}`);
                paycomponent0.payabliExec("reinit");
                break;
            }
          },

          functionCallBackError: function (errors) {
            // This callback covers 5XX response or parsing errors
            console.log(errors);
                // We recommend reinitializing the component.
                // If the problem persists, contact Payabli to help debug
            paycomponent0.payabliExec("reinit");
          }


      var paycomponent0 = new PayabliComponent(payabliConfig0);

      function showcomponent(){
        paycomponent0.showModal();
      }
  </script>
</body>

You are ready to use the component in your web page.

Step 4: Style the component

Information about styling embedded components is available in Embedded Components Overview.

Response example

For both ACH and card methods, a success response looks like this example. The referenceId is the ID you use as the storedMethodId in other operations.

See Handling responses and errors for more.

response.responseText:
"Success"

response.responseData
{"referenceId":"30e7658e-5c2c-4638-8308-b48edec0718b-1647","resultCode":1,"resultText":"Added","customerId":1647}

Next steps

The PayMethod component tokenizes the payment method, giving you an identifier for the saved method in the field responseData.ReferenceId. The identifier is associated with the customer. Use this identifier as the storedMethodId in the paymentMethod object to submit payments via the API.

Example: `showModal` and `closeModal`

You can show the component modal by calling showModal function, or close the component modal by calling closeModal function.

You can see an interactive version of this example on CodePen

  <body>
  <label>Creating a Payabli Object and showing the component (showModal) in a "click" event listener.<br/>
Closing the component modal (closeModal) in functionCallBackError.
  </label>
  <br/>
  <br/>
    <button id="btnx">Show Modal</button>
    <div id="pay-component-1"></div>
    <script src="https://embedded-component-sandbox.payabli.com/component.js" data-test></script>
    <script>
        document.getElementById('btnx').addEventListener('click', showcomponent);
        function showcomponent(){
            var payabliConfig0 = {
                type: "methodLightbox",
                rootContainer: "pay-component-1",
                buttonLabelInModal: 'Save Payment Method',
                defaultOpen: 'ach',
                hideComponent: true,
                token: "o.z8j8aaztW9tUtUg4dlVeYAx+L2MazOFGr0DY8yuK3u79MCYlGK4/q0t5AD1UgLAjXOohnxN8VTZfPswyZcwtChGNn1a8jFMmYWHmLN2cPDW9IrBt1RtrSuu+85HJI+4kML5sIk9SYvULDAU2k0X0E1KFYcPwjmmkUjktrEGtz48XCUM70aKUupkrTh8nL7CXpAXATzVUZ2gEld9jGINwECPPLWmu+cZ4CJb7QMJxnzKFD073+nq/eL+pMth7+u/SkmAWC0+jn8y+Lf6T5Q5PqB6wN7Mvosp8g7U7lbEW2wC0DA92pjblfDHVJOQUkjgT7B1GvryMokLvBjoiaLhKa55iKZE1YDlyqruILkoNF+zGSPS9r17qU6w4ziKhoMdSPzPBJBlLhQhz3MVANXbjfEfJwmtr/JJ1uStUfBFJ710cS1x7goxMJO/cl+q+LVtPy788EKFkgMc5OjfBNCsNL+dBDVbK5CiIJUSbOFzdqdjY/VJ14MEodsHYOwMAjuF4.KRFMeEj0SOur8MLZ362c/UZ/U/Az3CSUkr3/8EVDE6Y=",
                entryPoint: "bozeman-aikido",
                card: {
                    enabled: true,
                    amex: true,
                    discover: true,
                    visa: true,
                    mastercard: true,
                    jcb: true,
                    diners: true
                },
                ach: {
                    enabled: true,
                    checking: true,
                    savings: false
                },
                customerData: {
                    customerNumber: "00001",
                    firstName: "John",
                    lastName: "Doe",
                    billingEmail: "johndoe@email.com"
                },
                functionCallBackSuccess: function (response) {
                  const containerEl = document.querySelector('#pay-component-1');
                  const responseText = JSON.stringify(response.responseText);
                  const responseData = JSON.stringify(response.responseData);
                  alert(responseText + " " + responseData);
                  containerEl.innerHTML += `
                    <hr/>
                    <p><b>Embedded Component Response:</b></p>
                    <p>${responseText}</p>
                    <p>${responseData}</p>
                    <hr/>
                  `;
                },
                functionCallBackError: function (errors) {
                    alert('Error!');
                    console.log(errors);
                    paycomponent.closeModal();
                }
            };

            // Creating an instance of the component
            if (typeof paycomponent == 'undefined'){
                paycomponent = new PayabliComponent(payabliConfig0);
            } else {
                paycomponent.updateConfig(payabliConfig0);
            }

            paycomponent.showModal();
        }
    </script>
  </body>

Configuration reference

These are the configuration parameters available for the PayMethod UI component.

The component accepts only the data below. If you need to pass more data than what’s supported, consider using the temporary token flow.

type

string

required

For the PayMethod UI, this value is methodLightbox.

rootContainer

string

required

Container ID used for the component.

defaultOpen

string

Sets the default payment method that’s shown. Accepted values are: card or ach.

Text label for the action button.

hideComponent

boolean

default:

"false"

When true the component is hidden when it’s instanced.

token

string

required

API token for authentication.

customCssUrl

string

Complete URL of a custom CSS stylesheet to use with the component.

temporaryToken

boolean

default:

"true"

When true, the token created for the payment is temporary. Set this parameter to false to create a storedMethodId and save the payment profile.

card

object

required

cardService object used to configure accepted card types.

ach

object

required

achService object used to configure accepted ACH types.

paymentMethod

object

required

paymentMethod object with data related to the payment method. Required when saving a payment method or executing a payment. Can be passed to the component via payabliExec method. See paymentMethod Object for a full reference.

customerData

object

required

Customer Object with data related to customer. Can be passed to the component via payabliExec method. Required when saving a payment method. Which fields are required depends on whether the paypoint has custom identifiers. If you aren’t using custom identifiers, then you must include at least one of these values: firstname and lastname, email, or customerId. See customerData (payorData) Object for a full reference.

fallbackAuth

boolean | null

default:

"false"

When true, if tokenization fails, Payabli will attempt an authorization transaction to request a permanent token for the card. If the authorization is successful, the card will be tokenized and the authorization will be voided automatically.

fallbackAuthAmount

number | null

default:

"1.00"

The amount for the fallbackAuth transaction. Defaults to one dollar.

functionCallBackSuccess

function

The callback function called when the component executes successfully.

functionCallBackError

function

The callback function called when the component receives an error. See functionCallBackError response in the next section for a complete reference.

functionCallBackReady

function

The callback function called when the component change status ready true or false after any input on the component.

Response object

The Response object received via a callback function has the following structure:

responseText

string

required

“Success” or “Declined”

responseData

object

required

Container for response details.

Pay In

Pay Out

Pay Ops

This component is supported in the Playground

Usage

Step 1: Include the Payabli component

Step 2: Define the component container

Step 3: Configure the component

Step 4: Style the component

Response example

Next steps

Example: `showModal` and `closeModal`

Configuration reference

Response object

Pay In

Pay Out

Pay Ops

This component is supported in the Playground

​Usage

​Step 1: Include the Payabli component

​Step 2: Define the component container

​Step 3: Configure the component

​Step 4: Style the component

​Response example

​Next steps

​Example: showModal and closeModal

​Configuration reference

​Response object

Usage

Step 1: Include the Payabli component

Step 2: Define the component container

Step 3: Configure the component

Step 4: Style the component

Response example

Next steps

Example: `showModal` and `closeModal`

Configuration reference

Response object