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

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

مشخصات مقاله

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

 آموزش قدم به قدم ایجاد فروشگاه آنلاین با 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 را انتخاب کنید (مطابق شکل زیر) :

علامت کپی در قسمت بالا-سمت راست این باکس مشاهده می کنید . روی آن کلیک کنید و آنرا بصورت زیر در پروژه خود و در فایل 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
{
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>;"
<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 را به روش های زیر برای ما ارسال کنید:

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

 

0/5 (0 نظر)

اطلاعات مقاله

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

فرم ارسال دیدگاه درباره

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

دیدگاه کاربران درباره

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

avatar moslem aslani (2016-05-10 18:57:53)
سلام من میخوام تا وقتی که کاربر دکمه تایید رو نزده محتوای سبد(محصولات و تعداد و ....) داخل کوکی باقی بمونه و بعد از تایید داخل دیتابیس ذخیره بشن.این کار رو کردم با کد زیر HttpCookie myCookie = Request.Cookies["cart"]; if (myCookie == null) { myCookie = new HttpCookie("cart"); } myCookie.Expires = DateTime.Now.AddMinutes(10); myCookie.Values.Add("product", id.ToString()); Response.Cookies.Add(myCookie); ShopService s = new ShopService(); return s.CartProducts().Count; و چون Value بصورت زیر ذخیره میشه نمیدونم چطوری باید یه محصول رو از سبد پاک کنم؟؟؟ ممنون میشم پاسخ بدین