2. Place HTML Skeleton
Required html elements
Paygreen JS will automatically place elements on your page to collect payment information from the buyer. We find:
- Payment methods bloc
- Payment form bloc
- Card number field
- Expiration date
- CVV field
- Checkbox of consent (the buyer allows you or not to reuse the card. Available only if you have the option enabled and you don't manage it by your own)
In order for PaygreenJS (PGJS) to display these blocks correctly, you must place "skeletons" in your page. You can place them wherever you want on the page and thus vary the structure of the form as you wish.
ID HTML | Description | Required |
---|---|---|
paygreen-container | Contains PGJS instance. Will not display anything. | Yes |
paygreen-methods-container | If no paymentMethod is provided, will display all available paymentMethods | No (if paymentMethod is provided) |
paygreen-pan-frame | Contains card numbers | No (if paymentMethod is provided and it's not card method) |
paygreen-cvv-frame | Contains card CVV | No (if paymentMethod is provided and it's not card method) |
paygreen-exp-frame | Contains card expiration date | No (if paymentMethod is provided and it's not card method) |
paygreen-reuse-checkbox-container | Contains a checkbox used to collect user consent to reuse instrument. This option must be activated for the payment configuration in the back office. | No |
Example:
<div id="paygreen-container"></div>
<div id="paygreen-methods-container"></div>
<div class="my-custom-form">
<div id="paygreen-pan-frame"></div>
<div id="paygreen-cvv-frame"></div>
<div id="paygreen-exp-frame"></div>
<div id="paygreen-reuse-checkbox-container"></div>
</div>
You can place those elements wherever you decide on your page.
Updated 3 months ago
Did this page help you?