Web components provide a user-friendly solution for partners looking to implement a streamlined and interactive payment system. Its ease of inclusion and integration make it simple to set up and customize, providing a seamless user experience from onboarding to transaction and batch processing, to eventual payouts.
You can customize the allowed countries and ZIP code validation behavior in the credit card form web-component using the following properties:
allowed-countries (optional)
Defines which countries are allowed for the zip code in the form.
If not specified, the default is US and CA.
Provide a comma-separated list of country codes (case-insensitive), for example: "JP, AU"
To allow all supported countries, use: allowed-countries="INTL"
validate-zip (optional)
Accepts true or false. Default is true.
When true, the form will validate ZIP/postal codes for the allowed countries.
When false, ZIP validation will be skipped for all allowed countries.
Supported countries for zip code
UK, JE, GG, IM, US, CA, IE, DE, JP, FR, AU, IT, CH, AT, ES, NL, BE, DK, SE, NO, BR, PT, FI, AX, KR, CN, TW, SG, DZ, AD, AR, AM, AZ, BH, BD, BB, BY, BM, BA, IO, BN, BG, KH, CV, CL, CR, HR, CY, CZ, DO, EC, EG, EE, FO, GE, GR, GL, GT, HT, HN, HU, IS, IN, ID, IL, JO, KZ, KE, KW, LA, LV, LB, LI, LT, LU, MK, MY, MV, MT, MU, MX, MD, MC, MA, NP, NZ, NI, NG, OM, PK, PY, PH, PL, PR, RO, RU, SM, SA, SN, SK, SI, ZA, LK, TJ, TH, TN, TR, TM, UA, UY, UZ, VA, VE, ZM, AS, CC, CK, RS, ME, CS, YU, CX, ET, FK, NF, FM, GF, GN, GP, GS, GU, GW, HM, IQ, KG, LR, LS, MG, MH, MN, MP, MQ, NC, NE, VI, PF, PG, PM, PN, PW, RE, SH, SJ, SO, SZ, TC, WF, XK, YT, INTL
Visa 3D Secure Mandate
Partners must collect cardholder's mobile number OR email address during payment processing. For this purpose, set show-email = "true" and/or show-phone-number = "true"
If your use case supports both personal and business bank accounts, you can include the optional show-business-name property in the ACH web-component. When enabled, the form will display a Business Name input field. This field should be completed by the user when they are entering a business bank account.
Use the following web-component to embed a customer-facing payment session on your page:
<pay-engine
id="elementID"
hash="<HMAC>"
payment-link-id="<Payment Link ID>"
shouldProcess3ds="true" // Optional. Default is false
onTransactionEvent="<custom callback function>"
type="payment-session">
</pay-engine>
b. Payment Link
To embed the payment link, use the following web-component:
<pay-engine
id="elementID"
hash="<HMAC>"
payment-link-id="<Payment Link ID>"
shouldProcess3ds="true" // Optional. Default is false
type="payment-link">
</pay-engine>
Difference between Payment Link and Payment Session
Payment Session: If your use case involves displaying a secure form to collect payment information within a modal and showing the transaction status in the same modal through a callback mechanism, then use Payment Session.
Payment Link: If your use case requires presenting a payment link that captures additional details—such as contact information—along with payment details, and you prefer to display the link in a flexible manner (not necessarily in a modal), then use Payment Link.
c. Creating and Managing Payment Links
To embed the interface for creating and managing payment links, use the following web-component: