Open Closed

How to use ABP payment module in angular UI #1484


User avatar
0
lan.dang created

Hello, I have installed Payment module into AspNetcore source code. Could you tell me how do I use it in angular UI The requirement is allow to self-register tenant include payment. Is there any document about how to show the payment selection page?


20 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team Co-Founder

    Hi @lan.dang

    Payment module doesn't support Angular UI at the moment. But, if you are using Payment module in an ASP.NET Core app, you can initiate a payment request from your Angular app and redirect customer to the Payment module (the one in your ASP.NET Core app). If you provide a CallbackUrl on your Angular app, see https://docs.abp.io/en/commercial/latest/modules/payment#paymentweboptions, payment module will redirect the customer to your Angular app after a successfull payment and you can get the PaymentRequest record using IPaymentRequestAppService, chck its status and do the required action on your Angular app.

  • User Avatar
    0
    lan.dang created

    Thanks @ismcagdas for response, so how about MVC page, how do I integrate payment module to our MVC page? Should I need to create new view to show payment selection or it is already implemented?

    Regards, Lan Dang

  • User Avatar
    0
    ismcagdas created
    Support Team Co-Founder

    Hi @lan.dang

    Sorry for my late reply. For the items you want your customers to purchase, yes, you need to create a view. You can check this sample https://docs.abp.io/en/commercial/latest/modules/payment#sample-usage

  • User Avatar
    0
    lan.dang created

    Yes I used this example, but it shows this selection. What should I do not enable Stripe payment? PayU gives me this error : System.NullReferenceException: Object reference not set to an instance of an object. at Volo.Payment.Payu.Pages.Payment.Payu.PurchaseParameterListGenerator.Generate(PaymentRequestWithDetailsDto paymentRequest) at Volo.Payment.Payu.Pages.Payment.Payu.PrePaymentModel.OnPostAsync()

  • User Avatar
    0
    lan.dang created

    I faced an error when I tried to integrate Stripe to my solution. Did I miss any configuration?

  • User Avatar
    0
    ismcagdas created
    Support Team Co-Founder

    Hi,

    You need to configure PaymentOptions as shown below;

    Configure<PaymentWebOptions>(options =>
    {
        options.RootUrl = configuration["AppSelfUrl"];
        options.CallbackUrl = configuration["AppSelfUrl"] + "/PaymentSucceed";
    });
    

    If you provide RootUrl, this error will go away. If you provide CallbackUrl, payment module will redirect successfull payments to this URL. Then, if you are going to do any operation on this page (PaymentSucceed or a custom page you will define), please use IPaymentRequestAppService to get the payment request and check its status as well.

    Please also consider handling the case when users want to use same payment request more than 1 time.

  • User Avatar
    0
    lan.dang created

    Thanks @ismcagdas,it just returns PaymentRequestID, how can I get payment status? I think the callback should send back to page PaymentSucceed the status OR should we implement new page PaymentFailed?

  • User Avatar
    0
    lan.dang created

    Do we have good documentation for the payment integration?

  • User Avatar
    0
    ismcagdas created
    Support Team Co-Founder

    Hi @lan.dang

    You can just inject IPaymentRequestAppService into your page and use its GetAsync method to retrieve the related payment request. Then, you can check its status field.

    Since customers can visit the same URL (for example mywebsite.com/PaymentSucceed?PaymentRequestID=xxx-xxx-xxx), you also need to store in your app if a given PaymentRequestID is used before or not.

  • User Avatar
    0
    lan.dang created

    Yes I did that but Status is always "Waiting" so I think it does not return correct status

  • User Avatar
    0
    ismcagdas created
    Support Team Co-Founder

    Hi,

    Payment module shouldn't recirect to your final page if status is different than Succes. Is it possible to share your project with us via email ? If so, could you share it with info@abp.io including the number 1484 ?

    I can take a look at it for you and fix the problem.

    Thanks,

  • User Avatar
    0
    lan.dang created

    Yes I have sent email to you. Please let me know if you get any trouble with checkout source code

  • User Avatar
    0
    ismcagdas created
    Support Team Co-Founder

    Hi **@lan.dang **

    Sorry for my late reply. Could you also tell me how do you start the payment process on your app ? I started the app but it only contains PaymentSucceed page. I couldn't find a page which initiates the payment process.

    Also, your app is missing the initial migration, I have removed and re-added the migration to run the app.

    Thanks,

  • User Avatar
    0
    lan.dang created

    Hi @ismcagdas,

    If you look at file RegisterTenant.cshtml.cs, I called return LocalRedirectPreserveMethod("/Payment/GatewaySelection?paymentRequestId=" + paymentRequest.Id);

    It opens payment page. Could you tell me what should I do with initial payment process?

  • User Avatar
    0
    lan.dang created

    The process to the payment From Login page > Click on Register Tenant > Select any plan (not select Trial) > Enter name, email & password > Click on Register It will lead you to payment page

  • User Avatar
    0
    lan.dang created

    Hi @ismcagdas , do you have any comment on this one? Thanks

  • User Avatar
    0
    ismcagdas created
    Support Team Co-Founder

    Hi @lan.dang

    Sorry for my late reply. It took some time to detect the cause of the problem. We figured out this with @maliming. It seems like this is caused by https://github.com/abpframework/abp/issues/8740. As a workaround, you can remove app.UseUnitOfWork() from your WebModule. When the related issue is resolved, you can enable it back.

  • User Avatar
    0
    lan.dang created

    Thanks @ismcagdas,

    After removing this line code it works fine. Does it affect another place if we remove it? eg, should I do to call SaveChangesAsync() whenever I want to save database

  • User Avatar
    0
    ismcagdas created
    Support Team Co-Founder

    It will not cause any problems becasue app services and controllers are also intercepted by default and a unitOfWork is created for them. We are still trying to understand the cause of this problem.

  • User Avatar
    0
    dkaczor created

    Hi,

    You need to configure PaymentOptions as shown below;

    Configure<PaymentWebOptions>(options => 
    { 
       options.RootUrl = configuration["AppSelfUrl"]; 
      options.CallbackUrl = configuration["AppSelfUrl"] + "/PaymentSucceed"; 
    });
    

    @ismcagdas Please include this part in the documentation, it took me way too long to figure this out, it should be mentioned that such configuration is required. Also the link to sample usage does not work anymore.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11