Learn how to use the PayMethod UI embedded component to securely store a payment profile with a low-code modal-based 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.
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.
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.
Expand for full configuration example
Full configuration example
Copy
<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, fallbackAuth: 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.
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.
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.
This value determines the type of embedded component to render.
Accepted values are: methodEmbedded, methodLightbox, vterminal, or expressCheckout.
For the PayMethod UI, this value is methodLightbox.
See the Embedded Components Overview for more information on other component types.
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.
Required. Descriptor object for input field. Use the
confirm input descriptor to add matching validation to this field. See Style Individual Fields for more.
Required. Descriptor object for input field. Use the
confirm input descriptor to add matching validation to this field. See Style Individual Fields for more.
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.
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.
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.
