Help with Next.js and payment gateway

[HanliTheron]

Hi guys, I'm wondering if anyone can give me some advice in how to implement step 2 of this payment gateway in a Next.js app: https://peachpayments.docs.oppwa.com/tutorials/integration-guide.
I'm not exactly sure how I'm supposed to embed their form tag in React or if it will even work in Next. I've this thus far, script seems to fire but I get no rendered form.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { boundMethod } from 'autobind-decorator';

export default class PeachPayments extends Component {
    static propTypes = {
        checkoutId: PropTypes.string,

        createPreBooking: PropTypes.func,
        startPreBookingPayment: PropTypes.func,
    };



    componentDidUpdate() {
        const { checkoutId } = this.props;
        if (!checkoutId) {
            console.log('CHECKOUT ID NOT SET');
            return;
        }
        this.loadPeachForm(checkoutId);
    }

    @boundMethod
    loadPeachForm(checkoutId) {
        if (!window.document.getElementById('peach-script')) {
            const s = window.document.createElement('script');
            s.id = 'peach-script';
            s.type = 'text/javascript';
            s.src = `https://test.oppwa.com/v1/paymentWidgets.js?checkoutId=${checkoutId}`;
            window.document.body.appendChild(s);
            this.renderPeachForm();
        }
    }


    renderPeachForm() {
        const redirectUrl = 'http://localhost:3000/about/';
        if (!window.document.getElementById('peach-form')) {
            const f = window.document.createElement('form');
            f.id = 'peach-form';
            f.action = redirectUrl;
            f.class = 'paymentWidgets';
            f.dataBrands = 'VISA MASTER AMEX';
            window.document.body.appendChild(f);
        }
    }

    render() {
        return (
            <>
                <button type="button" onClick={this.onCreatePreBookingClick}>
                    Create Booking
                </button>
                <button type="button" onClick={this.onStartPaymentClick}>
                    Start Payment
                </button>
            </>
        );
    }

    @boundMethod
    async onCreatePreBookingClick() {
        const { createPreBooking } = this.props;
        await createPreBooking();
    }

    @boundMethod
    async onStartPaymentClick() {
        const { startPreBookingPayment } = this.props;
        await startPreBookingPayment(false);
    }
}

I just render this component on a page.

[brunocrosier]

Hard to tell from this, but I suspect it could be to do with the server-side rendering nature of Next.js

Make sure that the script only gets called on the client side. You could do this with useEffect(() => {doStuff()}, []) or on componentDidMount()

You can also ensure a script only fires on the client by doing something like

if (typeof window !== "undefined") {
   doYourThing()
}

You can also try and just copy-and-paste the renderPeachForm() function into the browser console to see if it actually works :)

[HanliTheron]

Hi Bruno, thanks for the help. I actually just solved the issue and managed to make a test payment by rather doing :

 <div
                dangerouslySetInnerHTML={{
                    __html: `<form action="${redirectUrl}" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>`,
                }}
            /> 

rather than

if (!window.document.getElementById('peach-form')) {
            const f = window.document.createElement('form');
            f.id = 'peach-form';
            f.action = redirectUrl;
            f.class = 'paymentWidgets';
            f.dataBrands = 'VISA MASTER AMEX';
            window.document.body.appendChild(f);
        }

But I'm going to definitely going use this tip of yours in the future:

if (typeof window !== "undefined") {
   doYourThing()
}

I just started with next and this was one of the issues I had, this will come in very handy in the future.

[brunocrosier]

awesome!