Bonjour nous avons essayer d’utiliser les exemple d’initialisation de paygreen disponible sur cette page : https://developers.paygreen.fr/docs/paygreenjs-customization-styled-examples

Mais l’initialisation des formulaire ne ce fait toujours pas.

Il n’y a aucun message d’erreur qui pourrait signifier que l’initialisation n’est pas correct mais il n’y a rien qui apparaît.

voici le code utiliser pour intégrer paygreen a notre site :

import React, { useEffect } from 'react';

const PayGreenComponent = () => {

    const paygreenjs = window.paygreenjs;

    const style = {
        input: {
            base: {
                color: 'black',
                fontSize: '18px',
            },
            hover: {
                color: 'grey',
            },
            focus: {
                color: 'grey',
            },
            invalid: {
                color: 'red',
            },
            placeholder: {
                base: {
                    color: 'grey',
                },
            },
        },
        checkbox: {
            label: {
                base: {
                    color: 'black',
                },
                unchecked: {
                    color: 'black',
                },
            },
            box: {
                base: {
                    color: '#0d6efd',
                    hover: {
                        color: '#424242',
                    },
                },
                unchecked: {
                    color: '#0d6efd',
                },
            },
        },
    };

    const handlePay = () => {
        paygreenjs.submitPayment();
    };

    const initPGJS = () => {
        paygreenjs.attachEventListener(paygreenjs.Events.PAN_FIELD_FULFILLED, () => {
            console.log('pan fullfilled');
            paygreenjs.focus('cvv');
        });

        paygreenjs.attachEventListener(paygreenjs.Events.CVV_FIELD_FULFILLED, () => {
            paygreenjs.focus('exp');
        });
        const params = {
            paymentOrderID: "po_b146d77070e04efd9142d3e0da0b4422",
            objectSecret: "a40f6cd58335245b",
            // mode: 'instrument',
            mode: "payment",
            modeOptions: {
                authorizedInstrument: false,
            },
            style,
            // paymentMethod: 'bank_card',
            publicKey: "pk_2982d76ea48a4aedb89619f36e59127c",
        }

        paygreenjs.init(params);
    };

    useEffect(() => {
        initPGJS();
    }, []);

    return (
        <div>
            <div id="paygreen-container"></div>
            <div id="pg-payment-method"></div>
            <h3>
                Payment method
            </h3>
            <div class="pay-form">
                <div>
                    <label>Card number</label>
                    <div id="paygreen-pan-frame"></div>
                </div>

                <div class="line">
                    <div>
                        <label>Expiration</label>
                        <div id="paygreen-exp-frame"></div>
                    </div>
                    <div class="paygreen-cvv-container">
                        <label>CVV </label>
                        <div id="paygreen-cvv-frame"></div>
                        <i data-feather="help-circle" ></i>
                    </div>

                </div>

                <div id="paygreen-reuse-checkbox-container"></div>
                <button id="payButton" class="pg-button" onClick={() => handlePay()}>Pay €<strong>240.21</strong></button>
                <div class="icon-sentence">
                    <i data-feather="lock"></i>
                    <label class="secured-label"> Payment secured and powered by <strong>Paygreen</strong></label>
                </div>

            </div>
            <script>
                {/* {feather.replace()} */}
            </script>
        </div>
    );
};

export default PayGreenComponent

Et voici le rendu sur le site et le rendu de la console :