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

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

Online Shop by MVC – Step by Step Tutorial – Part4

 

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

 

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

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

در این سری آموزشی از درگاه 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 در فولدر 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
            33333333344444444444444444555555555555555555555555555");
          braintree.onSubmitEncryptForm("braintree-payment-form");
        </script>
        <script src="https://js.braintreegateway.com/v2/braintree.js"></script>
        <script>
            var braintree = braintree.create("aaaaaaaaaaabbbbbbbbbbbbbbbcccccccccccddddddddddddddeeeeeeeeeeeeeeeeeee
                ffffffffffffffffffffffffggggggggggggggggggggggghhhhhhhhhhhhhhhhhhhh111111111112222222222333333333333
            3333333333344444444444444444555555555555555555555555555");
            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 اعلام نمائید.


برچسب‌ها:

پرداخت اینترنتیدرگاه آنلایندرگاه پرداختدرگاه پرداخت Braintreeدرگاه پرداخت آنلاینفروشگاه آنلاینفروشگاه اینترنتیکتابخانه Braintree

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

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

سه − 1 =