Custom payment gateway compatibility with visual form builder

[ChepkemoiPeris]

We have a payment plugin for give wp and now that they are introducing visual form builder we have to update our plugin to support that, but we have no documentation on how to upgrade our plugin to support visual form builder.
Please help on what we have to add or change to allow compatibility with visual form builder.

[jonwaldstein]

Hello @ChepkemoiPeris

First you will need to migrate your gateway over to use our Gateway API, which is a pre-requisite to compatibility with the visual form builder. Documentation for this is here: https://givewp.com/documentation/developers/how-to-build-a-gateway-add-on-for-givewp/

Once your gateway is moved over to our Gateway API I can guide you from there. It mainly requires adding an additional javascript file to render your gateway fields, or display a message if you are redirecting to an offsite gateway. We are still working on our documentation for the visual form builder but can help you get started here.

Let me know how the first part goes 😄

[jim-easymerchant]

@jonwaldstein - @rickalday said there is no documentation ready for this yet, but for us to go ahead and give it a go without it ... and if we run into issues to reach out to you? Could you maybe point us in a direction here to get us started? We have our own Javascript Checkout SDK ... so we're interested in getting that to work also while we make our gateway plugin work with visual form builder.

[jim-easymerchant]

@jonwaldstein - @rickalday --- any update on this?

[jonwaldstein]

@jim-easymerchant

Thanks for your patience. We are still actively improving our gateway api and our documentation. I can provide some details here for you to get started but my response may be delayed 😄

The basic idea for gateway compatibility with the visual form builder is adding a js file that registers your front-end gateway counterpart and renders your fields (in React).

Note: The js file should be compiled using @wordpress/scripts so that it does not include dependencies like React and uses WordPress to load those.

Your gateway class that extends PaymentGateway will need a new method called enqueueScript for enqueuing your js script.

    public function enqueueScript(int $formId)
    {
        $scriptAsset = ScriptAsset::get(GIVE_PLUGIN_DIR . 'build/testGateway.asset.php');

        wp_enqueue_script(
            $this::id(),
            GIVE_PLUGIN_URL . 'build/testGateway.js',
            $scriptAsset['dependencies'],
            $scriptAsset['version'],
            true
        );

        Language::setScriptTranslations($this::id());
    }

You can also send your gateway settings to your js file by adding a method called formSettings to your gateway class.

    public function formSettings(int $formId)
    {
        return [
            'foo' => 'bar'
        ];
    }

const gateway = {
    id: 'your-gateway-id',
    initialize() {
        // initialize your gateway here, you have access to your gateway class method formSettings($formId) through this.settings;
    },
    async beforeCreatePayment(values) {
        // anything returned here will show up in your createPayment method $gatewayData array
        return {
            testGatewayIntent: 'test-gateway-intent',
        };
    },
    Fields() {
        return (
            <fieldset>
                <p>Gateway fields here</p>
            </fieldset>
        );
    },
};

window.givewp.gateways.register(gateway);

Feel free to checkout out existing gateways like our Test Gateways for inspiration:

• Test Gateway
• Test Gateway Offsite

We also have an example gateway repo that has some really basic examples:

• GiveWP Example Gateway

We also have an open PR for updating our boilerplate with gateway scaffolding:

• Gateway Scaffolding PR

Hope that helps

[jim-easymerchant]

Awesome. thank you @jonwaldstein ! this is a great start.

[delw]

@ChepkemoiPeris @jonwaldstein @jim-easymerchant would any of you be willing to help by sharing the work as a plugin to install? I too have a custom gateway developed with the old form based editor and the developer I hired can’t seem to figure out how to add it to the new visual form.