شرح إنشاء نموذج للدفع باستخدام باي موب في تطبيق Flutter الخاص بك بدون مشاكل

شرح إنشاء نموذج للدفع باستخدام باي موب في تطبيق Flutter الخاص بك بدون مشاكل

في هذا المقال سوف نساعدكم باذن الله تعالى على انشاء صفحة web في التطبيق الخاص بكم تعرض لكم امكانية لدفع المبلغ عن طريق paymob حتى تتمكن من الانتهاء من التطبيق الخاص بك وربطه بوسائل الدفع بدون اي مشاكل تماما , وهذا الدرس يعد من الدروس المهمه جدا ويترتب عليه الدروس السابقه , حيث اننا في الدروس السابقه شاركنا معكم كيف نحصل على التوكن النهائي وهذا يكون مسؤول عن عملية الدفع وفي هذا المقال سوف نكمل الامر معكم في الانتهاء من عملية الدفع عن طريق الويب فيو .

لا تحتاج إلى معرفة أي رمز لإنشاء تطبيقات أو برامج ، والتي تُعرف باسم تطوير التطبيقات بدون تعليمات برمجية. لذلك ، بالإضافة إلى بساطة الإنشاء ، توفر هذه الطريقة أيضًا بعض المزايا الأخرى المثيرة للاهتمام ، مثل القدرة على نشر تطبيقك بسرعة أكبر ووقت استجابة أقصر بكثير للترقيات.

يمكن لغير المبرمجين إنشاء تطبيقات ومواقع ويب فعالة بسرعة بفضل تقنيات تطوير التطبيقات بدون تعليمات برمجية. يمكنك إنشاء تطبيقات بدون الحاجة إلى الترميز باستخدام أدوات تطوير التطبيقات التي لا تحتوي على تعليمات برمجية والتي لا تبدو جذابة فحسب ، بل تعمل بكامل طاقتها وقابلة للاستخدام.

How to create a form to buy order in your project Flutter

في هذا الجزء الاخير والذي يعبر عن دفع ثمن المنتج على الانترنت سوف تقوم بانشاء صفحة باسم VisaCardScreen وضع بها الكود المسؤول عن عرضها وايضا قمنا بعمل بعض التعديلات على بعض الصفحات وكل تعديل قمنا به وضعنا لكم التعديل حتى تتمكن من تنفيذ العمليه بدون ادنى مشاكل تماما في مشروعك .

code.dart

class VisaCardScreen extends StatelessWidget {
  final String url;
  const VisaCardScreen({Key? key,required this.url}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('final url -------------- $url');
    return SafeArea(
      child: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

// --------------- constant
const String iFrameUrl =
    'https://accept.paymob.com/api/acceptance/iframes/706051?payment_token=';


// ---------------- state
class PaymentSuccess extends MainState {
  final String url;
  PaymentSuccess(this.url);
}

// ---------------- cubit
  Future paymentWithCard({
    String firstname = 'ahmed',
    String lastname = 'mohamed',
    String email = 'test',
    String phone = '01000000000',
    String integrationMethod = '',
    int price = 100,
    bool isCard = true,
  }) async {
      // 1 - first token
    DioHelper.postData(
        url: authenticationrequesturl,
        data: {"api_key": paymentApiKey}).then((value) async {
      firstToken = value!.data['token'];
      print('firstToken --------------- $firstToken');

      // 2 - order id
      getOrderId().then((value) async {
        print('orderId --------------- $orderId');

        // 3 - final token
            await getFinalToken(
              firstname: firstname,
              lastname: lastname,
              email: email,
              price: price,
              phone: phone,
              firstToken: firstToken,
              integrationmethod: integrationMethod);

        emit(PaymentSuccess(iFrameUrl+finalToken));
      });

    });
  }

// ---------------- main page
BlocConsumer<MainBloc, MainState>(
      listener: (context, state) {
        if (state is PaymentSuccess) {
          navigateTo(context, VisaCardScreen(
            url: state.url,
          ));
        }
      },
  ...