Credit Card Web-Component
You can utilize our credit card form component by specifying the pay-engine web component with type creditcardform and other necessary properties.
1
<pay-engine id="pf-cc"
2
type="creditcardform"
3
merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085"
4
hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>
Copied!
For a walkthrough integration example of this component. You can read more about the PayEngine web-component on https://docs.payengine.co/merchant-onboarding/introduction​

Properties and Styling

Properties
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-cc"
2
type="creditcardform"
3
merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085"
4
button-text="Save card"
5
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)
button-text
Content of the save button

Events

1
document.getElementById("pf-cc")
2
.addEventListener('success', function(event) {
3
const card = event.detail
4
// make payment with card
5
})
Copied!
success Callback function is invoked when card is successfully linked and tokenized.
Example payload on success event
1
{
2
"message": "Card created",
3
"data": {
4
"token": "card_test_j7YhUwokMcrUjyQZAyFRSNG9",
5
"card_data": {
6
"brand": "visa",
7
"last_4": "1111",
8
"exp_month": "12",
9
"exp_year": "2023",
10
"name": "John Doe"
11
}
12
}
13
}
Copied!
error Used to notify any error conditions during the process.
Last modified 1mo ago