Embedded Components

EmbeddedMethod UI

Learn how to use the EmbeddedMethod UI embedded component to add the ability to securely store a payment profile or execute a sale
View as MarkdownOpen in Claude
Applies to:Developers

Use the EmbeddedMethod component to capture a payment method or make a sale using any payment method. This is the most flexible and customizable component Payabli offers to developers.

Usage

This section shows how to use the EmbeddedMethod UI component in your project. Use the interactive demo to see how the component works, then follow the configuration walkthrough to set it up in your project.

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

Interactive demo

This demo shows the component in action with transaction processing and visual feedback. When the component processes a transaction, the demo displays the JSON response.

Embedded content from https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/payabli.docs.buildwithfern.com/a4b6043341462b6768348068eb2085e4053f1ef033909b6b5b38a5dfc815613c/snippets/demos/embedded-method.html?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260915%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260915T031148Z&X-Amz-Expires=604800&X-Amz-Signature=f7c036f6a6132910c3242460aba8fe70f3d765955ac9a7ca8cb3240883b19605&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject

EmbeddedMethod UI Demo

Loading content...

This demo shows the EmbeddedMethod UI component configured to process card, ACH, and RDC payments.

Configuration walkthrough

The interactive walkthrough displays code examples alongside step-by-step explanations.

Select a tab to see the walkthrough for your desired use case.

Loading walkthrough content

Loading walkthrough...

Loading walkthrough...

/// Include the Payabli script

First, add the Payabli embedded component script to your HTML. Make sure to include the data-test attribute for testing in the sandbox environment. Including <meta charset="UTF-8"> in the <head> element prevents problems with special characters such as ‘á’ or ‘ñ’.

/// Create the container and tab structure

Add a container element where the embedded component will render. The id attribute becomes the rootContainer in your configuration. Create tabs to switch between card, ACH, and RDC payment methods.

/// Add basic styling

Add CSS styles for the tabs to handle active and focus states.

/// Configure card payment method

Create the configuration object for card payments. The token must be a public API token.

/// Configure ACH payment method

Create the configuration object for ACH payments. The token must be a public API token.

/// Configure RDC payment method

Create the configuration object for RDC (Remote Deposit Capture) payments. The token must be a public API token.

/// Add tab switching logic

Add JavaScript code for the tabs. The code handles reinitializing the component when users change payment methods.

/// Initialize and execute payment

Use the payabliExec('pay') function to perform payment processing logic. This function processes a secure one-time payment with the embedded component.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Payabli Integration</title>
  <style>
    .tabs {
      display: flex;
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 20px;
    }
    
    .tab {
      flex: 1;
      padding: 16px 24px;
      text-align: center;
      cursor: pointer;
      background: white;
      border: none;
      border-bottom: 2px solid transparent;
      transition: all 0.2s ease;
    }
    
    .tab:hover {
      color: #333;
      background: #f8f9fa;
    }
    
    .tab.active {
      color: #007bff;
      border-bottom-color: #007bff;
    }
    
    .hidden { 
      display: none; 
    }
    
    #submit-btn {
      background: #4f46e5;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 16px;
    }
    
    #submit-btn:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h1>Payment Form</h1>  
  <p>Enter your payment information below:</p>
  <div class="payment-container">
    <div class="tabs">
      <button class="tab active" data-method="card">Payment Card</button>
      <button class="tab" data-method="ach">Bank Debit</button>
      <button class="tab" data-method="rdc">Check Capture</button>
    </div>
    <div class="form-content">
      <div id="pay-component-1"></div>
      <button id="submit-btn" class="hidden">Process Payment</button>
    </div>
  </div>
  
  <script src="https://embedded-component-sandbox.payabli.com/component.js" data-test></script>
  <script>
    let payComponent;
    
    const cardConfig = {
      type: "methodEmbedded",
      rootContainer: "pay-component-1",
      token: "your-public-api-token",
      entryPoint: "your-entry-point",
      defaultOpen: "card",
      temporaryToken: false,
      card: {
        enabled: true,
        amex: true,
        discover: true,
        visa: true,
        mastercard: true,
        jcb: true,
        diners: true,
        inputs: {
          cardHolderName: { 
            label: "NAME ON CARD", 
            size: 12, 
            row: 0, 
            order: 0 
          },
          cardNumber: { 
            label: "CARD NUMBER", 
            size: 6, 
            row: 1, 
            order: 0 
          },
          cardExpirationDate: { 
            label: "EXPIRATION", 
            size: 6, 
            row: 1, 
            order: 1 
          },
          cardCvv: {
            label: "CVV",
            size: 6,
            row: 2,
            order: 0
          },
          cardZipcode: {
            label: "ZIP CODE",
            size: 6,
            row: 2,
            order: 1
          }
        }
      },
      functionCallBackSuccess: function (response) {
        console.log(response);
        switch (response.responseText) {
          case "Success":
            alert(`Success: ${response.responseData.resultText}`);
            break;
          case "Declined":
            alert(`Declined: ${response.responseData.resultText}`);
            payComponent.payabliExec("reinit");
            break;
          default:
            alert(`Error: ${response.responseText}`);
            payComponent.payabliExec("reinit");
            break;
        }
      },
      functionCallBackError: function(errors) {
        console.log("Payment error:", errors);
        alert("Payment processing error occurred");
        payComponent.payabliExec("reinit");
      },
      functionCallBackReady: function(data) {
        const btn = document.getElementById("submit-btn");
        if (data[1] === true) {
          btn.classList.remove("hidden");
        } else {
          btn.classList.add("hidden");
        }
      }
    };
    
    const achConfig = {
      type: "methodEmbedded",
      rootContainer: "pay-component-1",
      token: "your-public-api-token",
      entryPoint: "your-entry-point",
      defaultOpen: "ach",
      temporaryToken: false,
      ach: {
        enabled: true,
        checking: true,
        savings: true,
        inputs: {
          achAccountHolderName: {
            label: "ACCOUNT HOLDER NAME",
            placeholder: "Account Holder Name",
            floating: false,
            size: 6,
            row: 0,
            order: 0
          },
          achRouting: {
            label: "ROUTING NUMBER",
            placeholder: "123456789",
            floating: false,
            size: 6,
            row: 1,
            order: 0
          },
          achAccount: {
            label: "ACCOUNT NUMBER",
            placeholder: "Account Number",
            floating: false,
            size: 6,
            row: 1,
            order: 1
          },
          achAccountType: {
            label: "ACCOUNT TYPE",
            floating: false,
            size: 6,
            row: 0,
            order: 1
          }
        }
      },
      functionCallBackSuccess: function (response) {
        console.log(response);
        switch (response.responseText) {
          case "Success":
            alert(`Success: ${response.responseData.resultText}`);
            break;
          case "Declined":
            alert(`Declined: ${response.responseData.resultText}`);
            payComponent.payabliExec("reinit");
            break;
          default:
            alert(`Error: ${response.responseText}`);
            payComponent.payabliExec("reinit");
            break;
        }
      },
      functionCallBackError: function(errors) {
        console.log("Payment error:", errors);
        alert("Payment processing error occurred");
        payComponent.payabliExec("reinit");
      },
      functionCallBackReady: function(data) {
        const btn = document.getElementById("submit-btn");
        if (data[1] === true) {
          btn.classList.remove("hidden");
        } else {
          btn.classList.add("hidden");
        }
      }
    };
    
    const rdcConfig = {
      type: "methodEmbedded",
      rootContainer: "pay-component-1",
      token: "your-public-api-token",
      entryPoint: "your-entry-point",
      defaultOpen: "rdc",
      temporaryToken: false,
      card: { enabled: true },
      rdc: {
        enabled: true,
        amount: 100,
        inputs: {
          rdcAccountHolderName: {
            label: "ACCOUNT HOLDER NAME",
            placeholder: "Account Holder Name",
            floating: false,
            size: 6,
            row: 0,
            order: 0
          },
          rdcAmount: {
            label: "AMOUNT",
            placeholder: "Amount",
            floating: false,
            size: 6,
            row: 0,
            order: 0,
          }
        }
      },
      functionCallBackSuccess: function (response) {
        console.log(response);
        switch (response.responseText) {
          case "Success":
            alert(`Success: ${response.responseData.resultText}`);
            break;
          case "Declined":
            alert(`Declined: ${response.responseData.resultText}`);
            payComponent.payabliExec("reinit");
            break;
          default:
            alert(`Error: ${response.responseText}`);
            payComponent.payabliExec("reinit");
            break;
        }
      },
      functionCallBackError: function(errors) {
        console.log("Payment error:", errors);
        alert("Payment processing error occurred");
        payComponent.payabliExec("reinit");
      },
      functionCallBackReady: function(data) {
        const btn = document.getElementById("submit-btn");
        if (data[1] === true) {
          btn.classList.remove("hidden");
        } else {
          btn.classList.add("hidden");
        }
      }
    };
    
    // Tab switching
    document.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', function() {
        const method = this.dataset.method;
        
        // Update active tab
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // Create new component with appropriate config
        if (method === 'card') {
          payComponent = new PayabliComponent(cardConfig);
        } else if (method === 'ach') {
          payComponent = new PayabliComponent(achConfig);
        } else if (method === 'rdc') {
          payComponent = new PayabliComponent(rdcConfig);
        }
      });
    });
    
    // Initialize the Payabli component
    payComponent = new PayabliComponent(cardConfig);
    
    // Handle payment execution
    document.getElementById("submit-btn").addEventListener("click", function() {
      payComponent.payabliExec('pay', {
        paymentDetails: {
          totalAmount: 100.00,
          serviceFee: 0,
          categories: [{
            label: "payment",
            amount: 100.00,
            qty: 1
          }]
        },
        customerData: {
          firstName: "John",
          lastName: "Doe",
          billingEmail: "john.doe@example.com"
        }
      });
    });
  </script>
</body>
</html>

/// Include the Payabli script

First, add the Payabli embedded component script to your HTML. Make sure to include the data-test attribute for testing in the sandbox environment. This loads the core PayabliComponent class that powers all embedded components. Including <meta charset="UTF-8"> in the <head> element prevents problems with special characters such as ‘á’ or ‘ñ’.

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

/// Create the container and tab structure

Add a container element where the embedded component will render. The id attribute becomes the rootContainer in your configuration. Create tabs to switch between card and ACH payment methods.

/// Add basic styling

Add CSS styles for the tabs to handle active and focus states.

/// Configure card payment method

Create the configuration object for card payments with temporaryToken: true. This setting enables the temporary token flow. See Temp token flow for more information about the temporary token flow. The token must be a public API token.

/// Configure ACH payment method

Create the configuration object for ACH payments with temporaryToken: true. The token must be a public API token.

/// Add tab switching logic

Add JavaScript code for the tabs. The code handles reinitializing the component when users change payment methods.

/// Initialize and execute token generation

Use the payabliExec('method') function to trigger temporary token generation. This function generates a secure temporary token for the payment method entered into the embedded component. For more information on using temporary tokens, see Extend embedded components with the temporary token flow.

-257
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Payabli Integration</title>
  <style>
    .tabs {
      display: flex;
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 20px;
    }
    
    .tab {
      flex: 1;
      padding: 16px 24px;
      text-align: center;
      cursor: pointer;
      background: white;
      border: none;
      border-bottom: 2px solid transparent;
      transition: all 0.2s ease;
    }
    
    .tab:hover {
      color: #333;
      background: #f8f9fa;
    }
    
    .tab.active {
      color: #007bff;
      border-bottom-color: #007bff;
    }
    
    .hidden { 
      display: none; 
    }
    
    #submit-btn {
      background: #4f46e5;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 16px;
    }
    
    #submit-btn:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h1>Payment Form</h1>  
  <p>Enter your payment information to generate a temporary token:</p>
  <div class="payment-container">
    <div class="tabs">
      <button class="tab active" data-method="card">Payment Card</button>
      <button class="tab" data-method="ach">Bank Debit</button>
    </div>
    <div class="form-content">
      <div id="pay-component-1"></div>
      <button id="submit-btn" class="hidden">Process Payment</button>
    </div>
  </div>
  
  <script src="https://embedded-component-sandbox.payabli.com/component.js" data-test></script>
  <script>
    let payComponent;
    
    const cardConfig = {
      type: "methodEmbedded",
      rootContainer: "pay-component-1",
      token: "your-public-api-token",
      entryPoint: "your-entry-point",
      defaultOpen: "card",
      temporaryToken: false,
      card: {
        enabled: true,
        amex: true,
        discover: true,
        visa: true,
        mastercard: true,
        jcb: true,
        diners: true,
        inputs: {
          cardHolderName: { 
            label: "NAME ON CARD", 
            size: 12, 
            row: 0, 
            order: 0 
          },
          cardNumber: { 
            label: "CARD NUMBER", 
            size: 6, 
            row: 1, 
            order: 0 
          },
          cardExpirationDate: { 
            label: "EXPIRATION", 
            size: 6, 
            row: 1, 
            order: 1 
          },
          cardCvv: {
            label: "CVV",
            size: 6,
            row: 2,
            order: 0
          },
          cardZipcode: {
            label: "ZIP CODE",
            size: 6,
            row: 2,
            order: 1
          }
        }
      },
      functionCallBackSuccess: function (response) {
        console.log(response);
        switch (response.responseText) {
          case "Success":
            alert(`Success: ${response.responseData.resultText}`);
            break;
          case "Declined":
            alert(`Declined: ${response.responseData.resultText}`);
            payComponent.payabliExec("reinit");
            break;
          default:
            alert(`Error: ${response.responseText}`);
            payComponent.payabliExec("reinit");
            break;
        }
      },
      functionCallBackError: function(errors) {
        console.log("Payment error:", errors);
        alert("Payment processing error occurred");
        payComponent.payabliExec("reinit");
      },
      functionCallBackReady: function(data) {
        const btn = document.getElementById("submit-btn");
        if (data[1] === true) {
          btn.classList.remove("hidden");
        } else {
          btn.classList.add("hidden");
        }
      }
    };
    
    const achConfig = {
      type: "methodEmbedded",
      rootContainer: "pay-component-1",
      token: "your-public-api-token",
      entryPoint: "your-entry-point",
      defaultOpen: "ach",
      temporaryToken: false,
      ach: {
        enabled: true,
        checking: true,
        savings: true,
        inputs: {
          achAccountHolderName: {
            label: "ACCOUNT HOLDER NAME",
            placeholder: "Account Holder Name",
            floating: false,
            size: 6,
            row: 0,
            order: 0
          },
          achRouting: {
            label: "ROUTING NUMBER",
            placeholder: "123456789",
            floating: false,
            size: 6,
            row: 1,
            order: 0
          },
          achAccount: {
            label: "ACCOUNT NUMBER",
            placeholder: "Account Number",
            floating: false,
            size: 6,
            row: 1,
            order: 1
          },
          achAccountType: {
            label: "ACCOUNT TYPE",
            floating: false,
            size: 6,
            row: 0,
            order: 1
          }
        }
      },
      functionCallBackSuccess: function (response) {
        console.log(response);
        switch (response.responseText) {
          case "Success":
            alert(`Success: ${response.responseData.resultText}`);
            break;
          case "Declined":
            alert(`Declined: ${response.responseData.resultText}`);
            payComponent.payabliExec("reinit");
            break;
          default:
            alert(`Error: ${response.responseText}`);
            payComponent.payabliExec("reinit");
            break;
        }
      },
      functionCallBackError: function(errors) {
        console.log("Payment error:", errors);
        alert("Payment processing error occurred");
        payComponent.payabliExec("reinit");
      },
      functionCallBackReady: function(data) {
        const btn = document.getElementById("submit-btn");
        if (data[1] === true) {
          btn.classList.remove("hidden");
        } else {
          btn.classList.add("hidden");
        }
      }
    };
    
    // Tab switching
    document.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', function() {
        const method = this.dataset.method;
        
        // Update active tab
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // Create new component with appropriate config
        if (method === 'card') {
          payComponent = new PayabliComponent(cardConfig);
        } else if (method === 'ach') {
          payComponent = new PayabliComponent(achConfig);
        }
      });
    });
    
    // Initialize the Payabli component
    payComponent = new PayabliComponent(cardConfig);
    
    // Handle token generation - no payment details needed for temporary token
    document.getElementById("submit-btn").addEventListener("click", function() {
    // Call method without payment details to generate temporary token
    payComponent.payabliExec('method', {
      customerData: {
        firstName: "John",
        lastName: "Doe",
        billingEmail: "john.doe@example.com"
      }
    });
  </script>
</body>
</html>

Configuration reference

These are the configuration parameters available for the EmbeddedMethod component. If you need to pass more than data than what’s supported, consider using the temporary token flow. See Temporary Token Flow for more information.

type
stringRequired

This value determines the type of embedded component to render.
Accepted values are: methodEmbedded, methodLightbox, vterminal, or expressCheckout.
For the EmbeddedMethod UI, this value is methodEmbedded. See the Embedded Components Overview for more information on other component types.

rootContainer
stringRequired

Container ID used for the component.

defaultOpen
string

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

hideComponent
booleanDefaults to false

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

token
stringRequired

API token for authentication. This should be a public API token, as described here.

forceCustomerCreation
booleanDefaults to true

When true, the component uses the customerData object to create a new customer record. When temporaryToken is true and forceCustomerCreation is false, the component doesn’t create a new customer record. See Temporary Token Flow for more information.

customCssUrl
string

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

clearFormAfterSubmit
booleanDefaults to true

When true, the entered values on the form are cleared when submitted.

temporaryToken
booleanDefaults to 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.

showPopoverError
booleanDefaults to true

When false, the validation error appears below the field instead of above it in a popover.

entryPoint
string

When the API token belongs to an organization, the entrypoint name identifies the target paypoint (merchant).

card
objectRequired

cardService object used to configure accepted card types.

enabled
boolean

Enable/disable card option.

amex
boolean

Enable/disable acceptance of American Express cards.

discover
boolean

Enable/disable acceptance of Discover cards.

visa
boolean

Enable/disable acceptance of Visa cards.

mastercard
boolean

Enable/disable acceptance of MasterCard cards.

diners
boolean

Enable/disable acceptance of Diner’s Club cards.

jcb
boolean

Enable/disable acceptance of JCB cards.

inputs
object

Card input fields descriptors. This object applies only to the EmbeddedMethod UI component.

cardHolderName
object

Optional, but strongly recommended. Descriptor object for input field.

cardNumber
objectRequired

Descriptor object for input field.

cardExpirationDate
objectRequired

Descriptor object for input field.

cardCvv
objectRequired

Descriptor object for input field.

cardZipcode
object

Optional, but strongly recommended. Descriptor object for input field.

ach
objectRequired

achService object used to configure accepted ACH types.

enabled
boolean

Enable/disable ACH option.

checking
boolean

Enable/disable acceptance of Checking account.

savings
boolean

Enable/disable acceptance of Savings account.

achValidation
booleanDefaults to false

When set to true, the embedded component will validate ACH account and routing numbers in real time. This is an add-on feature. Contact the Payabli team for more information.

inputs
object

ACH input field descriptors. This only applies to the EmbeddedMethod UI component.

achAccountHolderName
objectRequired

Required. Descriptor object for input field.

achAccountType
objectRequired

Required. Descriptor object for input field.

achRouting
objectRequired

Required. Descriptor object for input field. Use the confirm input descriptor to add matching validation to this field. See Style Individual Fields for more.

achAccount
objectRequired

Required. Descriptor object for input field. Use the confirm input descriptor to add matching validation to this field. See Style Individual Fields for more.

rdc
objectRequired

rdcService object used to configure accepted RDC types.

enabled
boolean

Enable/disable RDC option.

amount
number

Amount to collect via RDC.

inputs
object

RDC input field descriptors.

rdcAccountHolderName
object

Descriptor object for input field.

rdcAmount
object

Descriptor object for input field.

paymentMethod
objectRequired

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.

customerData
objectRequired

Customer Object with data related to customer. Can be passed to the component as a parameter with the 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.

paymentDetails
objectRequired

paymentDetails object with data related to the payment. Required to save a payment method. Can be passed to the component via payabliExec method.

fallbackAuth
boolean | nullDefaults to 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 | nullDefaults to 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’s status changes. Used to poll the form’s completeness before showing the submit button.

Response

The embedded component returns a response object to the callback functions defined in the configuration. The response object contains the result of the transaction (success, declined, or error) and details about the transaction.

Response examples

Click the tab to see an example response returned by the embedded component for each result.

{
  responseText: "Success",
  responseData: {
    authCode: "123456",
    referenceId: "40-692c62895d1541d28c0bf77b275a26e4",
    resultCode: 1,
    resultText: "Approved",
    avsResponseText: "",
    cvvResponseText: "",
    customerId: 706,
    methodReferenceId: null
  }
}

Response reference

The response object passed to a callback function has the following structure:

responseText
string

“Success” or “Declined”

responseData
object

Container for response details.

responseData.AuthCode
string

Authorization code for payments. This field has a value of null for saved payment methods.

responseData.ReferenceId
string

Identifier for the transaction (for payments) or the stored payment method (for save payment method).

responseData.ResultCode
integer

Result of operation. 1 is success, 2 is declined, and 3 is error.

responseData.ResultText
string

Message related the result. If the operation was successful, it returns “Added”/“Approved”. If there was an error, it returns error details.

responseData.AvsResponseText
string

Result of address validation for card transactions. This field is an empty string when processing ACH transactions. This field doesn’t exist when saving payment methods.

responseData.CvvResponseText
string

Result of CVV validation for card transactions. This field is an empty string when processing ACH transactions. This field doesn’t exist when saving payment methods.

responseData.CustomerId
integer

ID for the customer owner of payment or saved payment method.

responseData.methodReferenceId
string

Identifier for stored payment method for saved payment methods. This field has a value of null for payment transactions. The methodReferenceId is used as the storedMethodId in other operations. See Handling responses and errors for more.

functionCallBackError response

The functionCallBackError function is called when the component can’t validate the payment information before submitting it to Payabli’s API. The response object passed to functionCallBackError contains an array with codes, keys, and descriptions of failed validations. You can check the values in the array to offer your customized error message.

CodeKeyDescription
802paymentMethodsCardNumberErrorError in Card number field
803paymentMethodsCardExpirationDateErrorError in Card Expiration field
804paymentMethodsCardCvvErrorError in CardCVV field
805paymentMethodsCardZipcodeErrorError in Card Zip code field
901paymentMethodsAchAccountHolderNameErrorError in ACH Holder field
902paymentMethodsAchAccountTypeErrorError in ACH Account type field
903paymentMethodsAchRoutingErrorError in ACH Routing field
904paymentMethodsAchAccountErrorError in ACH Account number field

Usage Flows

These flowcharts illustrate the path to making a payment or storing a payment method using an embedded component.

Make a payment

To make a payment with an embedded component, your component configuration should contain payabliExec(pay, parameters). In the parameters argument, include customerData and paymentDetails objects. When the payment is executed, the request returns response data.

This flowchart explains the basic steps for the task. Hover over a step for more information.

Run payabliExec(pay, parameters) The action is set to pay here. Send the paymentDetail and customerData object in parameters.

→

Payment executed The transaction is executed and includes the data sent as parameters

→

Response

Save a payment method

To save a payment method with an embedded component, your component configuration should contain payabliExec(method, parameters). In the parameters argument, include customerData and paymentDetails objects. When the payment method is saved, the request returns response data.

This flowchart explains the basic steps for the task. Hover over a step for more information.

Run payabliExec(method, parameters) The action is set to method here. Send the paymentDetail and customerData object in parameters.

→

Payment method saved The payment method is saved and includes the data sent as parameters

→

Response

Save a payment method and make a payment

You can save a payment method and make a payment with the EmbeddedMethod UI component by writing a callback function to execute the payment after successfully saving the payment method.

To save a payment method and then execute a transaction with the saved payment method, your component configuration should contain payabliExec(method, parameters). In the parameters argument, include the customerData and paymentDetails objects. When the payment method is saved, use a callback function to execute the transaction.

Remember to never make payment transactions via client-side API requests. Your callback function should make the payment transaction using a server-side function.

This flowchart explains the basic steps for the task. Hover over a step for more information.

Run payabliExec(method, parameters) Here, the action is set to method. Send the paymentDetail and customerData object in parameters.

→

Payment method saved The payment method is saved and includes the data sent as parameters. An ID for the payment method is returned, which is then used to make transactions.

→

Callback function Use a callback function to send a transaction that uses the new payment method.

→

Response

See these related resources to help you get the most out of Payabli.