Best approach to switch actions from different controllers depending on user selection - asp.net-mvc

Question

I am working with a screen that needs to perform a payment based on the selected "Payment Methods" exposed with a checkbox for each one as you can see in the following mockup.
The most important thing, is that every payment method has its own logic based on the API that each provide to us where some of them need to redirect a URL for login on their site (i.e. PayPal), and some others only to specify some credentials and execute the payment itself. So, according with this, we have been forced to create a controller for each one in order to delegate the interaction with the user once he chose an option. Being more clearer, it will be something like this:
public class PayPalController : BaseController, IPaymentController
{
public ActionResult Pay()
{
//logic for a pay with PayPal
return View("PaymentSuccess");
}
}
public class BankOfNigeriaController : BaseController, IPaymentController
{
public ActionResult Pay()
{
//logic for a pay with Bank Of Nigeria
return View("PaymentSuccess");
}
}
public class BankOfAngolaController : BaseController, IPaymentController
{
public ActionResult Pay()
{
//logic for a pay with Bank Of Angola
return View("PaymentSuccess");
}
}
public interface IPaymentController
{
ActionResult Pay();
}
Focused on the view that I exposed on the top, I am wondering which is the best practice to call the proper action method.
Option 1: consists on create a middle controller that redirects to the proper action.
The ViewModel has an string that it will be used for the redirect URL as selected option. In example: "PayPal" or "BankOfNigeria".
public class PayPalPaymentViewModel
{
[Required]
public string PaymentSelected { get; set; }
}
The View shows a begin form that will POST to a middle controller that, according with the chosen option will perform another redirect.
#model Bollore.IES.Web.Models.PaymentMethodViewModel
#{
ViewBag.Title = "Payment Methods";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm("RedirectPay", "PaymentMethod", FormMethod.Post))
{
//HTML WITH LIST OF CHECKBOXES
<input type="submit" />
}
The MIDDLE Controller receives in the ViewModel the chosen method, and redirects to their own controller. I didn't test it, at the moment is only pseudo-code.
public class PaymentMethodController : BaseController
{
[HttpGet]
public ActionResult RedirectPay()
{
//returns the view
return View();
}
[HttpPost]
public ActionResult RedirectPay(PaymentMethodViewModel model)
{
//it could be "PayPal/Pay" or "BankOfNigeria/Pay", etc.
return RedirectToAction("Pay", model.PaymentSelected);
}
}
Option 2: consists on redirect the action directly from the client-side of the view without passing over the middle controller, which in this case, it will only exist for the GET of the view.
The View will be gotten by the PaymentMethodController, but the POST the the "payment method" action, will be done by javascript.
#model Bollore.IES.Web.Models.PaymentMethodViewModel
#{
ViewBag.Title = "Payment Methods";
Layout = "~/Views/Shared/_Layout.cshtml";
}
//LIST OF CHECKBOXES AND ALL THE STUFF
<input id="clickMe" type="button" value="Save" onclick="callPaymentMethodAction();" />
<script type="text/javascript">
function callPaymentMethodAction(e) {
var selectedMethodUrl = GetMethodSelectedUrl(); //it will return 'PayPal', 'BankOfAngola', etc
$.ajax({
url: 'selectedMethodUrl',
data: { id: id },
success: function(){
alert('Payed');
}
});
};
</script>
I repeat that is a pseudo-code that could not compile, but I hope you get the idea.
So, which of this two is the best approach to deal with a problem like
this? How can you manage the fact to be able to call multiple
controllers from the view?