When the form is valid, the action button is shown.
``` **`ACH`** ```html ACHPayabli Embedded Component Demo
When the form contents are valid, the action button will be shown.
Pay Total: $19.99
``` ### Step 4: Style the component Information about styling embedded components is available in [Embedded Components Overview](/developer-guides/embedded-components-overview#customize-component-styling). ### Step 5: Execute an action You can use the embedded component to execute a payment or to save the payment method. The action is triggered via the `payabliExec` function in the instanced className. This example calls a JS function named `executeAction` when the component is ready and the user clicks the button. Learn more about `payabliExec` in the [Embedded Components Overview](/developer-guides/embedded-components-overview#payablicomponent-classname). #### Expand for code example **`Calls payabliExec('method')`** ```html Calls payabliExec('method')When the form is valid, the action button will be shown.
``` **`Calls payabliExec('pay')`** ```html Calls payabliExec('pay')When the form is valid, the action button will be shown.
``` ### Step 6. Capture the action response After the action is triggered, you can capture the response using the callback provided in the property `functionCallBackSuccess`, in the configuration. You can verify if the action was successful or failed by checking the text or numeric response fields. The response is the same for ACH and cards. See [Handling responses and errors](/developer-guides/embedded-components-overview#handling-responses-and-errors) for more. **`Save payment method response`** ```json Save payment method response // Response is the same for ACH and card. response.responseText: "Success" response.responseData {"referenceId":"30e7658e-5c2c-4638-8308-b48edec0718b-1647","resultCode":1,"resultText":"Added","customerId":1647} ``` **`Payment success response`** ```json Payment success response // Response is the same for ACH and card. response.responseText: "Success" response.responseData: {"authCode":"123456","referenceId":"187-c5892026d9f345ffa63bf909d574fe92","resultCode":1,"resultText":"Approved","avsResponseText":"","cvvResponseText":"","customerId":1636} ``` **`Credit card payment decline response`** ```json Credit card payment decline response response.responseText: "Declined" response.responseData: {"authCode":null,"referenceId":"187-d2a29970fa604edba5a6dbec67ace3ae","resultCode":2,"resultText":"200: Transaction was declined by processor.. DECLINE","avsResponseText":"","cvvResponseText":"CVV2/CVC2 no match","customerId":1636} ``` **`ACH payment decline`** ```json ACH payment decline response.responseText: "Declined" response.responseData: {"authCode":null,"referenceId":"187-b4cf271c7e24493aa799cabbccbd534d","resultCode":2,"resultText":"200: Transaction was declined by processor.. FAILED","avsResponseText":"","cvvResponseText":"","customerId":1636} ``` ### Next steps If you executed `pay` as the action, then you will receive a **transaction ID** in the field `ReferenceId`, which identifies the transaction in Payabli. If you executed `method` as the action, then you receive a **stored method ID** in the field `ReferenceId`, which you can then use as `storedMethodId` to make payments at for this Customer using the API (POST to `/api/MoneyIn/getpaid` ). You must use the same `customerId` obtained in the response associated to the stored payment method. Example of Request body using the ReferenceId with API call: ```json { "entryPoint": "test", "paymentMethod": { "method": "card", "storedMethodId": "1234-xyz" //value obtained in "ReferenceId" field }, "paymentDetails": { "totalAmount": 100.0 }, "customerData": { "customerId": 25 } } ``` ## Configuration reference These are the configuration parameters available for the EmbeddedMethod component. > **Note** > > The component accepts only the data below. If you need to pass more data than what's supported, consider using the [temporary token flow](/developer-guides/tokenization-temporary-flow). **`type`** `string` — required 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](/developer-guides/embedded-components-overview) for more information on other component types. --- **`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`. --- **`hideComponent`** `boolean` — default: false When true the component is hidden when it's instanced. --- **`token`** `string` — required API token for authentication. This should be a **public** API token, as described [here](/api-reference/api-overview#authentication#organization-token-most-common). --- **`forceCustomerCreation`** `boolean` — default: 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](/developer-guides/tokenization-temporary-flow#disable-customer-creation) for more information. --- **`customCssUrl`** `string` Complete URL of a custom CSS stylesheet to use with the component. --- **`clearFormAfterSubmit`** `boolean` — default: true When `true`, the entered values on the form are cleared when submitted. --- **`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. --- **`showPopoverError`** `boolean` — default: 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`** `object` — required `cardService` object used to configure accepted card types. #### properties **`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. #### properties **`cardHolderName`** `object` Optional, but *strongly recommended*. Descriptor object for input field. --- **`cardNumber`** `object` — required Descriptor object for input field. --- **`cardExpirationDate`** `object` — required Descriptor object for input field. --- **`cardCvv`** `object` — required Descriptor object for input field. --- **`cardZipcode`** `object` Optional, but *strongly recommended*. Descriptor object for input field. --- --- --- **`ach`** `object` — required `achService` object used to configure accepted ACH types. #### properties **`enabled`** `boolean` Enable/disable ACH option. --- **`checking`** `boolean` Enable/disable acceptance of Checking account. --- **`savings`** `boolean` Enable/disable acceptance of Savings account. --- **`inputs`** `object` ACH input field descriptors. This only applies to the EmbeddedMethod UI component. #### properties **`achAccountHolderName`** `object` — required Required. Descriptor object for input field. --- **`achAccountType`** `object` — required Required. Descriptor object for input field. --- **`achRouting`** `object` — required Required. Descriptor object for input field. Use the `confirm` input descriptor to add matching validation to this field. See [Style Individual Fields](/developer-guides/embedded-components-overview#style-individual-fields) for more. --- **`achAccount`** `object` — required Required. Descriptor object for input field. Use the `confirm` input descriptor to add matching validation to this field. See [Style Individual Fields](/developer-guides/embedded-components-overview#style-individual-fields) for more. --- --- --- **`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](/api-reference/schemas/paymentmethod) for a full reference. --- **`customerData`** `object` — required 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`. See [customerData (payorData) Object](/api-reference/schemas/payordata) for a full reference. --- **`paymentDetails`** `object` — required `paymentDetails` object with data related to the payment. **Required to save a payment method**. Can be passed to the component via payabliExec method. See [paymentDetails Object](/api-reference/schemas/paymentdetail) 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's status changes. Used to poll the form's completeness before showing the submit button. --- ## functionCallBackError response The response for the callback error will contain an array with codes, keys and texts of failed validations. You can check the values in the array to offer your customized error message.| Code | Key | Description |
|---|---|---|
| 802 | paymentMethodsCardNumberError | Error in Card number field |
| 803 | paymentMethodsCardExpirationDateError | Error in Card Expiration field |
| 804 | paymentMethodsCardCvvError | Error in CardCVV field |
| 805 | paymentMethodsCardZipcodeError | Error in Card Zip code field |
| 901 | paymentMethodsAchAccountHolderNameError | Error in ACH Holder field |
| 902 | paymentMethodsAchAccountTypeError | Error in ACH Account type field |
| 903 | paymentMethodsAchRoutingError | Error in ACH Routing field |
| 904 | paymentMethodsAchAccountError | Error in ACH Account number field |