Installation
1. Install the library
First, you must add the library and its style to the page of your site where you want the payment form to appear:
<link href="https://pgjs.paygreen.fr/latest/paygreen.min.css" type="text/css" rel="stylesheet" />
<script defer type="text/javascript" src="https://pgjs.paygreen.fr/latest/paygreen.min.js"></script>
Once the script has been added, the variable paygreenjs will be available every where.
About security and PCI Compliance
To be PCI Compliant you must integrate PayGreenJS directly from pgjs.paygreen.fr. The scripts and style sheets cannot be included in your bundle.
2. Place the skeleton
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.
3. Init
paygreenjs variable has many methods:
| Name | Description |
|---|---|
| init | Init the payment form. Take ParamsType as parameter |
| unmount | Unmount the form. Accept a boolean parameter to unsubsribe events (default false) |
| useInstrument | Use an instrument to complete the actual payment flow. Accept an instrument ID as paramter. |
| status | Give the actual state of flows |
| submitPayment | Manually submit the payment form. |
| focus | Change the actual field focus. Accept an enum as parameter pan | cvv | exp |
| attachEventListener | Listen an event. Accept two parameters, first the name of the event, second the callback |
| detachEventListener | Remove an event listener previoulsy attached |
| Events | List all available events |
| updateConsent | Change the actual state of the consent. Accept a boolean true/false parameter which represents if the user's consentment is implicit. (If you do not display the check box used to collect user consent for reuse of the instrument. Be sure to respect the CNIL recommendations regarding consent) |
| setPaymentMethod | Change the payment method of the actual flow. Accepts string like the init params paymentMethod |
| setLanguage | Change the current language of PGJS. Take language as param exemple: setLanguage("en") |
| version | Show current version |
First of all, init the library with the method init() by passing a parameter object of type ParamsType.
Here is a resume of all parameters available:
| Name | Description | Required | Default | Type |
|---|---|---|---|---|
| paymentOrderID | ID of the payment order | Yes in payment mode | null | String |
| objectSecret | Secret of the payment order. This one is provided once in the response of the POST createPaymentOrder | Yes in payment mode | null | String |
| publicKey | Public key of your Paygreen shop. Yours can be found or created here | Yes | null | String |
| instrument | ID of the instrument. If provided will directly init a payment with this instrument (oneclick) | No | null | String |
| token | If provided will directly init a payment with this token | No | null | String |
| paymentMethod | Force the payment method to display. If empty, null or undefined will list all the payment methods available for the payment order. Otherwise will display the payment method corresponding to the string value. Useless if instrument is provided. Doesn't work for apple_pay due to Apple security policy | Yes in instrument mode | null | String |
| mode | Choose how the library will work. Payment mode will execute a payment. Instrument modes will provide you a valid instrument. More info here | Yes | payment | String |
| modeOptions | Options to define for each mode. Actually only used in instrument mode AuthorizedInstrument: define if the instrument will be authorized or not ShopId: precise for which shop you want to create this instrument | No | { authorizedInstrument?: false, shopId?: null } | Object |
| style | Pass a custom style to the payment form. Will apply to inputs inside the iframes | No | Null | Object |
| buyer | ID of the buyer to link the instrument created (instrument mode only) | No | Null | String |
| displayCardLogo | Display the logo of the card provider in pan input | No | true | Bool |
| lang | Change language of the forms | No | Browser language | String |
| displayAuthentication | Define how you want to display the 3DS (inline or modal) | No | inline | String |
Details parameters types are available here
Updated 3 months ago