The payment process will be switched from SPP to Modal format.
Sample code to help with this process.
class PaystckHandler {
constructor($form, instance) {
let formId = instance.settings.id;
this.$form = $form;
this.formInstance = instance;
this.formId = formId;
}
init() {
this.$form.on('fluentform_next_action_paystack', (event, data) => {
const response = data.response;
this.$form.parent().find('.ff_paystack_text').remove();
jQuery('<div/>', {
'id': 'form_success',
'class': 'ff-message-success ff_paystck_text'
})
.html(response.data.message)
.insertAfter(this.$form);
if(response.data.actionName === 'initPaystackModal') {
this.initPaystackModal(response.data);
} else {
alert('No method found');
}
});
}
initPaystackModal(res) {
var that = this;
const options = res.modal_data;
options.callback = function (response) {
that.formInstance.hideFormSubmissionProgress(that.$form);
const data = {
action: 'fluentform_paystack_confirm_payment',
form_id: that.formId,
...response
}
that.$form.parent().find('.ff_paystck_text').remove();
jQuery('<div/>', {
'id': that.formId + '_success',
'class': 'ff-message-success ff_msg_temp ff_razorpay_text'
})
.html(res.confirming_text)
.insertAfter(that.$form);
that.formInstance.showFormSubmissionProgress(that.$form);
that.formInstance.sendData(that.$form, data);
}
options.onClose = function (error) {
that.$form.parent().find('.ff_paystck_text').remove();
}
let handler = PaystackPop.setup(options);
handler.openIframe();
}
}
(function ($) {
$.each($('form.fluentform_has_payment'), function () {
const $form = $(this);
$form.on('fluentform_init_single', function (event, instance) {
(new PaystckHandler($form, instance)).init();
});
});
}(jQuery));