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 varibale paygreenjs will be available every where.

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 HTMLDescriptionRequis
paygreen-containerContains PGJS instance. Will not display anything.Yes
paygreen-methods-containerIf no paymentMethod is provided, will display all available paymentMethodsNo (if paymentMethod is provided)
paygreen-pan-frameContains card numbersNo (if paymentMethod is provided and it's not card method)
paygreen-cvv-frameContains card CVVNo (if paymentMethod is provided and it's not card method)
paygreen-exp-frameContains card expiration dateNo (if paymentMethod is provided and it's not card method)
paygreen-reuse-checkbox-containerContains a checkbox used to collect user consent to reuse instrument. This option must be activated in 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 thoses elements where you want and you want on you page.

3. Init

paygreenjs variable has many methods:

NameDescription
initInit the payment form. Take ParamsType as parameter
unmountUnmount the form. Accept a boolean parameter to unsubsribe events (default false)
useInstrumentUse an instrument to complete the actual payment flow. Accept an instrument ID as paramter.
statusGive the actual state of flows
submitPaymentManually submit the payment form.
focusChange the actual field focus. Accept an enum as parameter pan | cvv | exp
attachEventListenerListen an event. Accept two parameters, first the name of the event, second the callback
detachEventListenerRemove an event listener previoulsy attached
EventsList all available events
updateConsentChange the actal state of the consent. Accept a boolean true/false parameter which represents if the user consent. (can be used only if you passed an technical audit by Paygreen)
setPaymentMethodChange the payment method of the actual flow. Accepts string like the init params paymentMethod

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:

NameDescriptionRequiredDefault
paymentOrderIDID of the payment orderYes in payment modenull
objectSecretSecret of the payment orderYes in payment modenull
publicKeyPublic key of your Paygreen shopYesnull
instrumentID of the instrument. If provided will directly init a payment with this instrument (oneclick)Nonull
tokenIf provided will directly init a payment with this tokenNonull
paymentMethodForce the payment method to display. Useless if instrument or token is provided.Yes in tokenizer or instrument modenull
modeChoose how the library will work. Payment mode will execute a payment. Instrument and tokenizer modes will provide you a valid instrument or token.
More info here
Yespayment
modeOptionsOptions 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 }
stylePass a custom style to the payment form. Will apply to inputs inside the iframesNoNull
buyerID of the buyer to link the instrument created (instrument mode only)NoNull
displayCardLogoDisplay the logo of the card provider in pan inputNotrue
langChange language of the formsNoBrowser language

Details parameters types are available here