Payment Form Web-Component
Embed easy-to-use payment forms and virtual terminals for your customers to use right inside your application.
You can utilize our transaction form component by specifying the pay-engine web component with type payment-form and other necessary properties.
1
<pay-engine id="pf-payment-form"
2
type="payment-form"
3
merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085"
4
hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>
Copied!
​

Properties and Styling

Properties
Styling
Following are properties that can be set on this web-component. You can set the property via a JavaScript object reference, or directly inline as an HTML tag attribute. See the example below:
1
<pay-engine id="pf-payment-form"
2
type="payment-form"
3
merchantid="d8dfafb5-88d6-46c7-ba14-1ff972564085"
4
hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>
Copied!
Following is a list of applicable properties.
Class
Description
merchant-id
Merchant ID (generated by using create merchant API call)
hash
HMAC generated from merchant-id (see securing embedded UIs section)
css
<Style> HTML element id, or URL of CSS file (see Styling specs for this component)

Styling

As you build and improve your website, it's important that our UI elements work well with, and similar to, your own user interface. To make the building and programming process easier, we put in work to make our component as flexible and user-friendly as possible for you.
Therefore, we added a customization option with a property called css , simply embed a style element within your html file with all your customizations, and pass the id of this element to our web-component.
1
<style id="custom-payment-form-style">
2
.pf-payment-field{
3
display: block;
4
width: 100%;
5
height: calc(1.5em + 0.75rem + 2px);
6
padding: 0.375rem 0.75rem;
7
font-size: 0.875rem;
8
line-height: 1.5;
9
border: 1px solid #d8dbe0;
10
color: #768192;
11
background-color: #fff;
12
border-radius: 0.25rem;
13
}
14
</style>
15
<pay-factory id="pf-payment-form"
16
type="payment-form"
17
css="#custom-payment-form-style"
18
merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085"
19
hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-factory>
Copied!
Additionally, you can also pass an external stylesheet URL to the css prop, like so:
1
<pay-factory id="pf-dashboard"
2
type="payment-form"
3
css="https://mysite.com/custom-transaction-style.css"
4
merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085"
5
hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-factory>
Copied!
Here you can find a list of customizable classes within the "payouts" web-component
Class
Description
.pf-payment-tab-left
This class applies to create payment left tab
.pf-payment-tab-right
This class applies to create payment right tab
.pf-payment-field
This class applies to most payment form controls such as text, number, select, etc.
.pf-payment-currency
This class applies to currency text part near form
.pf-payment-checkbox
This class applies to the payment fields, that are of type checkbox
.pf-payment-title
This class applies to the payment titles
.pf-payment-text
This class applies to the payment text parts
.pf-payment-label
This class applies to the payment labels
.pf-payment-submit
This class applies to "Submit payment" button
.pf-payment-submit-another
This class applies to "Submit and create another" button
Last modified 1mo ago
Copy link