[Display view after donation form submission] should be possible

[bastienuh]

Sorry in advance if this is not a bug, but I did not find the feature.

Details

I'm developing a new gateway for one of my customer and after the user form submission, I need to generate some data (based on form values), and then display another form (with a button). The user needs to click on this button (the button will be clicked automatically with javascript) and the form submission will send the user on the bank payment page, where he will be able to type its credit card number.

This is a functionnality quite common (at least here in France) but I did not find, after some search, how to display this. I'm using the new GiveWP form (Classic, and not Legacy), so with iframe. Before iframes, the previous code (by displaying a new page) was working correctly. Here is the new code, inspired by your documentation.

/**
 * Process Square checkout submission.
 *
 * @param array $posted_data List of posted data.
 *
 * @since  1.0.0
 * @access public
 *
 * @return void
 */
function sogenactif_for_give_process_donation( $posted_data ) {

    if ( ! wp_verify_nonce( $purchase_data['gateway_nonce'], 'give-gateway' ) ) {
        wp_die( esc_html__( 'We\'re unable to recognize your session. Please refresh the screen to try again; otherwise contact your website administrator for assistance.', 'give' ), esc_html__( 'Error', 'give' ), [ 'response' => 403 ] );
    }

    // Make sure we don't have any left over errors present.
    give_clear_errors();

    // Any errors?
    $errors = give_get_errors();

    // No errors, proceed.
    if ( ! $errors ) {

        $form_id         = intval( $posted_data['post_data']['give-form-id'] );
        $price_id        = ! empty( $posted_data['post_data']['give-price-id'] ) ? $posted_data['post_data']['give-price-id'] : 0;
        $donation_amount = ! empty( $posted_data['price'] ) ? $posted_data['price'] : 0;

        // Setup the payment details.
        $donation_data = array(
            'price'           => $donation_amount,
            'give_form_title' => $posted_data['post_data']['give-form-title'],
            'give_form_id'    => $form_id,
            'give_price_id'   => $price_id,
            'date'            => $posted_data['date'],
            'user_email'      => $posted_data['user_email'],
            'purchase_key'    => $posted_data['purchase_key'],
            'currency'        => give_get_currency( $form_id ),
            'user_info'       => $posted_data['user_info'],
            'status'          => 'pending',
            'gateway'         => 'sogenactif',
        );

        // Record the pending donation.
        $donation_id = give_insert_payment( $donation_data );

        if ( ! $donation_id ) {

            // Record Gateway Error as Pending Donation in Give is not created.
            give_record_gateway_error(
                __( 'Sogenactif Error', 'sogenactif-for-give' ),
                sprintf(
                /* translators: %s Exception error message. */
                    __( 'Unable to create a pending donation with Give.', 'sogenactif-for-give' )
                )
            );

            // Send user back to checkout.
            give_send_back_to_checkout( '?payment-mode=sogenactif' );
            return;
        }

        // HERE, I need to display this sort of form, with a button, to redirect the user to the bank page

        /*

        <form method="POST" action="<?php echo $bank_response->redirectionUrl; ?>">
            <input type="hidden" name="redirectionVersion" value="<?php echo $bank_response->redirectionVersion; ?>">
            <input type="hidden" name="redirectionData" value="<?php echo $bank_response->redirectionData; ?>">

            <input type="submit" class="button button-xsmall go-away" style="margin-top: 10px" name="payer" value="Pay on bank website"/>
        </form>

        */


    } else {
        // Send user back to checkout.
        give_send_back_to_checkout( '?payment-mode=sogenactif' );
    } // End if().
}
add_action( 'give_gateway_sogenactif', 'sogenactif_for_give_process_donation' );

I tried to include the view : include_once plugin_dir_path( __FILE__ ) . 'views/redirection-form.php';

The view:

<?php
use Give\Views\IframeContentView;

ob_start();       

?>
        <form method="POST" action="<?php echo $bank_response->redirectionUrl; ?>">

            <input type="hidden" name="redirectionVersion" value="<?php echo $bank_response->redirectionVersion; ?>">
            <input type="hidden" name="redirectionData" value="<?php echo $bank_response->redirectionData; ?>">

            <input type="submit" class="button button-xsmall go-away" style="margin-top: 10px" name="payer" value="Payer sur le site de la banque"/>
        </form>

<?php
    echo ( new IframeContentView() )
    ->setTitle('Formulaire banque')
    ->setBody(ob_get_clean())
    ->renderBody();

It appears that the include seem to be functionnal, but the loader is not undisplayed after return.
I really do not understand what's missing.

Thanks for your help or fix.

[bastienuh]

Any help on this please?

[ravinderk]

It appears that the include seem to be functionnal, but the loader is not undisplayed after return.

@BastienU can you help to understand the issue. What do you want to see after return (from donation form or bank payment page), receipt?

FYI, iframe sends a message to parent page from iframe which informs parent page that iframe content has been loaded and loader can be removed:

givewp/assets/src/js/plugins/form-template/iframe-content.js

Line 7 in 0f95d8c

window.parentIFrame.sendMessage( { action: 'giveEmbedFormContentLoaded' } );

givewp/assets/src/js/plugins/form-template/utils.js

Line 28 in 0f95d8c

case 'giveEmbedFormContentLoaded':

@BastienU I will be happy to help if you have any other questions.

[bastienuh]

Hi,

Thanks a lot for this information.

What do you want to see after return (from donation form or bank payment page), receipt?

After submission of the donation form I need to display a button. Because I don't have credit card fields on this donation form. The credit card field are displayed after, on the bank page. And the button I have to display is redirection the user to the bank page.

I don't understand how to use this utils.js. Do I have to include this javascript to my gateway plugin (and if yes, how?) or is it included automatically in the donation page (and if yes, why the loader is not hidden after loading response?) ?

Sorry for all those questions.

Thanks again for your help.

[ravinderk]

@BastienU You have to tell the parent page that content in the iframe has been loaded. We do not handle this for the intermediate page.

Load this code with credit card fields and let me know whether it works for you:

<script>
window.addEventListener('load', (event) => {
  window.parentIFrame.sendMessage( { action: 'giveEmbedFormContentLoaded' } );
});
</script>

[ravinderk]

@BastienU Did you try this?