آموزش ساخت فروشگاه اینترنتی با ASP.NET MVC – بخش۴

آموزش ساخت فروشگاه اینترنتی با ASP.NET MVC – بخش4

 آموزش قدم به قدم ایجاد فروشگاه آنلاین با MVC – بخش چهارم 

Online Shop by MVC – Step by Step Tutorial – Part4

 درگاه پرداخت اینترنتی

در بخش سوم از آموزش پیاده سازی فروشگاه آنلاین با MVC کنترولر مربوط به سبد خرید را تکمیل کردیم و یک View ساده برای سبد خرید طراحی کردیم بخش سفارشات کاربران (Customers Orders) و Checkout را انجام دادیم. در این بخش قصد داریم نحوه اتصال فروشگاه اینترنتی خود را به یک درگاه آنلاین بین المللی آموزش دهیم.

سرفصل های بخش چهارم عبارتند از:

  • اتصال به درگاه پرداخت آنلاین
    تعریف کلاس PaymentResult و افزودن رفرنس BrainTree
  • اعمال تغییراتی در CheckoutViewModel
    تغییرات تابع ProcessPayment و اعمال تغییراتی در فرم Checkout و پیاده سازی اکشن Complete

 

اتصال به درگاه پرداخت آنلاین :

در این سری آموزشی از درگاه BrainTree استفاده می کنیم . در تابع Checkout از کلاس ShoppingCart واقع در فولدر Services ، دستورات زیر را بنویسید :

 
var gateway = new PaymentGateway();
var result = gateway.ProcessPayment(model);
if(result.Succeeded)
   {
    order.TransactionId = result.TransactionId;
    _db.Orders.Add(order);
    _db.CartItems.RemoveRange(items); // clear ShoppingCart
    _db.SaveChanges();
   }  
return result;
                                           

توضیح : ابتدا از Braintree یک شئ می سازیم (Braintree در آینده توضیح داده خواهد شد) و مدل را به آن پاس میدهیم که این model شامل اطلاعات شخصی کاربر می باشد . اگر نتیجه موفقیت آمیز بود ، TransactionId در جدول order ذخیره می شود و یک سطر به جدول سفارشات اضافه و دیتابیس آپدیت می شود . در نهایت result را بعنوان خروجی می فرستیم .

تعریف کلاس PaymentResult :

یک کلاس بنام PaymentResult در فولدر Services ایجاد می کنیم و فیلدهای آنرا بصورت زیر تعریف می کنیم :

 
public class PaymentResult
{
    public PaymentResult(string transactionId , bool success , string message)
    {
        TransactionId = transactionId;
        Succeeded = success;
        Message = message;
    }
    public string TransactionId { get; private set; }
    public bool Succeeded { get; private set; }
    public string Message { get; private set; }
}
                                           

حالا در همین فولدر Services کلاس دیگری بنام IGateway که از نوع interface است :

 
    public interface IGateway
    {
        PaymentResult ProcessPayment(CheckoutViewModel model);
    }
                                           

سپس کلاس دیگری بنام PaymentGateway در فولدر Services بسازید که در آن باید اینترفیس IGateway را پیاده سازی کنیم.

ابتدا این کلاس را بصورت زیر تعریف می کنیم :

 
    public class PaymentGateway : IGateway
    {
    }
                                           

سپس مطابق تصویر زیر ، روی IGateway راست کلیک می کنیم و Implement Interface را انتخاب می کنیم :

IGateway-interface

نکته : در این مرحله باید تغییراتی را در تابع Checkout واقع در کلاس Shoppingcart اعمال کنیم . نوع خروجی این تابع را باید از object به PaymentResult تغییر کند . بصورت زیر :

public PaymentResult CheckOut(CheckoutViewModel model)

و همچنین بدنه تابع باید بصورت زیر تغییر کند :

 
    if(!ModelState.IsValid)
    {
        return (View(model));
    }
    var cart = new ShoppingCart(HttpContext);
    var result = cart.CheckOut(model);
    if(result.Succeeded)
    {
        TempData[“TransId”] = result.TransactionId;
        return RedirectToAction("Complete");
    }
    ModelState.AddModelError(string.Empty,result.Message);
    return View(model);
                                           

در بخش قبل مراحل اولیه اتصال به درگاه پرداخت اینترنتی BrainTree را پیاده سازی کردیم و کلاس Payment Gateway را تعریف کردیم . در این بخش میخواهیم از طریق کنسول نوگت ، کتابخانه Braintree را به پروژه خود اضافه کنیم و تنظیمات آنرا انجام دهیم .

لوگوی BrainTree

افزودن BrainTree  :

روی فولدر References راست کلیک کنید و Manage NuGet Packages را انتخاب کنید . در پنجره باز شده ، عبارت BrainTree را سرچ کرده (مطابق شکل زیر) و BrainTree را نصب کنید :

نصب نوگت BrainTree

سپس به وب سایت اصلی BrainTree مراجعه کنید . اکنون در این وب سایت ثبت نام (SignUp) کنید و روی دکمه Try SandBox کلیک کنید . به ایمیل شما لینکی ارسال می شود . روی این لینک کلیک کنید تا حساب شما فعال شود .

در کنترل پنل خود در منوی Account > My User را انتخاب کنید . سپس به قسمت API Keys Authorization بروید .

در این صفحه ، CSE Key را کپی کنید و در یک فایل notepad پیست کنید . بعدا لازم می شود!

سپس در باکس حاوی Public Key روی لینک View کلیک کنید و در این قسمت روی Java کلیک کنید و از لیست ظاهر شده .NET را انتخاب کنید (مطابق شکل زیر) :

API-Key

علامت کپی در قسمت بالا-سمت راست این باکس مشاهده می کنید . روی آن کلیک کنید و آنرا بصورت زیر در پروژه خود و در فایل PaymentGateway پیست کنید :

 
private readonly BraintreeGateway _gateway = new BraintreeGateway
{
    Environment = Braintree.Environment.SANDBOX,
    MerchantId = "xxxxxxxx",
    PublicKey = "xxxxxxxxxxxxx",
    PrivateKey = "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
                                           

نکته : دقت کنید که اطلاعات فوق بسیار حساس و خطرناک هستند و باید آنها را در web.config تعریف کنیم . ولی فعلا در اینجا تعریف کرده ایم .

تابع ProcessPayment واقع در کلاس PaymentGateway را مطابق زیر تعریف کنید :

 
public PaymentResult ProcessPayment(ViewModels.CheckoutViewModel model)
{
    var request = new TransactionRequest()
    {
        Amount = model.Total,
        CreditCard = new TransactionCreditCardRequest
        {
            Number = "",
            CVV = "",
            ExpirationMonth = "",
            ExpirationYear = "",
        },
        Options = new TransactionOptionsRequest()
        {
            SubmitForSettlement = true
        }
    };
    var result = _gateway.Transaction.Sale(request);
    if(result.IsSuccess())
    {
        return new PaymentResult(result.Target.Id,true,null)
    }
        return new PaymentResult(null,false,result.Message)
}
                                           

در بخش قبل ، ابتدا توسط نوگت ، Braintree را به پروژه خود اضافه کردیم و سپس با مراجعه به وب سایت Braintree ، یک API-Key دریافت نمودیم و تنظیماتش را انجام دادیم . در این بخش ، که آخرین بخش از این سری آموزشی می باشد، میخواهیم تغییراتی در کلاس CheckoutViewModel و نیز ProcessPayment و فرم checkOut اعمال کنیم .

 

اعمال تغییراتی در CheckoutViewModel :

در این مرحله باید فیلدهای مربوط به کارت عابر بانک کاربر (البته بجز رمز دوم !) را در CheckoutViewMdoel اضافه کنیم :

 
    [Required]
    public string CardNumber { get; set; }
    [Required]
    public string Cvv { get; set; }
    [Required]
    public string Month { get; set; }
    [Required]
    public string Year { get; set; }
                                 

تغییرات تابع ProcessPayment :

تابع فوق واقع در کلاس PaymentGateway.cs را بصورت زیر تغییر دهید و اطلاعات کارت بانکی را در آن درج کنید :

 
    CreditCard = new TransactionCreditCardRequest
    {
        Number = model.CardNumber,
        CVV = model.Cvv,
        ExpirationMonth = model.Month,
        ExpirationYear = model.Year,
    }
                                 

 اعمال تغییراتی در فرم Checkout :

برای افزودن امکان Encryption ، باید فایل جاوا اسکریپت زیر را به انتهای ویو و در بخش Scripts اضافه کنیم :

script src=”https://js.braintreegateway.com/v2/braintree.js”></script>

سپس در بالای فرم قابلیت نمایش پیامهای خطا را با افزودن دستور زیر به صفحه می دهیم :

 
  @Html.ValidationSummary()
                                 

تگ فرم Checkout View را بصورت زیر تعریف می کنیم :

   <form action=”@Url.Action(“checkout”)” method=”post” id=”braintree-payment-form”>

 

سپس سطرهای زیر را به آخر این فرم اضافه می نماییم :

<fieldset>
<legend>Payment Information</legend>

    <p>
<label>Card Number :</label> <input autocomplete=”off” data-encrypted-name=”CardNumber” name=”CardNumber” size=”20″ type=”text” />
</p>

    <p>
<label>CVV 2 :</label> <input autocomplete=”off” data-encrypted-name=”Cvv” name=”Cvv” size=”3″ type=”text” />
</p>

    <p>
<label>Expiration (MM/YYYY) :</label> <input name=”Month” size=”2″ type=”text” /> / <input name=”Year” size=”4″ type=”text” />
</p>
</fieldset>

در نهایت در بخش Script انتهای همین صفحه ، کدهای زیر را وارد کنید :

      @section Scripts
{
&lt;script src=&quot;https://js.braintreegateway.com/v2/braintree.js&quot;&gt;&lt;/script&gt;
<script>
var braintree = braintree.create(“aaaaaaaaaaabbbbbbbbbbbbbbbcccccccccccddddddddddddddeeeeeeeeeeeeeeeeeee
ffffffffffffffffffffffffggggggggggggggggggggggghhhhhhhhhhhhhhhhhhhh11111111111222222222233333333333333
۳۳۳۳۳۳۳۳۳۴۴۴۴۴۴۴۴۴۴۴۴۴۴۴۴۴۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵”);
braintree.onSubmitEncryptForm(“braintree-payment-form”);
</script>
<script src=”https://js.braintreegateway.com/v2/braintree.js”></script>
<script>
var braintree = braintree.create(“aaaaaaaaaaabbbbbbbbbbbbbbbcccccccccccddddddddddddddeeeeeeeeeeeeeeeeeee
ffffffffffffffffffffffffggggggggggggggggggggggghhhhhhhhhhhhhhhhhhhh111111111112222222222333333333333
۳۳۳۳۳۳۳۳۳۳۳۴۴۴۴۴۴۴۴۴۴۴۴۴۴۴۴۴۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵۵”);
braintree.onSubmitEncryptForm(“braintree-payment-form”);
</script>
}

 

نکته : رشته طولانی که در دستورات فوق می بینید همان CSE Key می باشد که از سایت BrainTree کپی کرده اید .

پیاده سازی اکشن Complete :

در کنترولر ShoppingCart و در انتهای کنترولر ، اکشن Complete را بصورت زیر تعریف کنید :

 
public ActionResult Complete()
{
    ViewBag.TransactionId = (string)TempData[“TransId”];
    return View();
}
                                           

حالا روی اکشن راست کلیک کرده و Add View را انتخاب کنید . تنظیمات پیش فرض را بپذیرید و Add کنید .

در این صفحه می خواهیم از کاربر ، بابت خریدش تشکر کنیم و نیز Transaction ID را نمایش دهیم :

@{
ViewBag.Title = “Thanks !”;
}

<h2>
Thanks For Shopping !
</h2>

<hr />
<b>Your Transaction ID : @ViewBag.TransactionId</b>

حال برنامه را اجرا کنید . اگر سبدخرید خالی است چند محصول بصورت نمونه به آن اضافه کنید و در نهایت دکمه Checkout را بزنید . در فرمی که ظاهر می شود اطلاعات شخصی خود و نیز اطلاعات کارت را وارد نمایید و Next را بزنید .

نکته : اطلاعات نمونه زیر را برای تست فرآیند خرید وارد کنید :

 
Card Number : 4111111111111111
CVV 2 : 111
Expiration Date : 11/2015
                                           

 اگر عملیات موفقیت آمیز باشد صفحه مطابق شکل زیر نمایش داده می شود و اطلاعات در جداول Order , OrderDetail ذخیره می شوند :

TransactionID

خب دوستان خسته نباشید ، اکنون توانستیم یک فروشگاه آنلاین را که دارای سبدخرید و پرداخت اینترنتی می باشد را پیاده سازی کنیم .

لطفا نظرات و سوالات خود را درباره سری آموزشی فروشگاه اینترنتی توسط ASP.NET MVC را به روش های زیر برای ما ارسال کنید:

  • فرم ارسال دیدگاه پایین همین مقالات
  • آدرس ایمیل [email protected]
  • فرم تماس با ما

 

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سه × 3 =

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

کتاب گوگل ادز

دانلود کتاب "آموزش سرویس گوگل ادوردز"

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"