本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/

项目已经做完，
https://github.com/15829238397/CN5E-shop

仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车，管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现（Tablayout）
仿京东商城系列12------商品详细信息展示（nativie与html交互）
仿京东商城系列13------商品分享（shareSDK）
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册，SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取（地址选择器）
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章

前言

上一更我们了解了支付sdk的基本概念，以及支付sdk的集成方法。接下来我们将利用集成的支付SDK进行模拟支付功能的实现。效果图如下：

支付功能实现.gif

内容

页面设计

由于使用第三方的SDK功能已经相当健全，我们只需要自己设计两个页面，一个是新建订单页面，一个是支付结果页面。

新建订单页面

此页面的主要功能为展示新建的订单收货人的所有信息，订单中商品的所有信息，选择支付方式按钮等等等等。展示商品我们使用了一个RecyclerView进行展示商品的图片信息。使用RadioButton，给用户提供单选的付款方式选择框。
详细代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.cne_shop.widget.CnToolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:minWidth="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:leftButtonIcon="@drawable/icon_back_32px"
        app:title="编辑订单"
        android:titleTextColor="@color/white"
        app:isShowSearchView="false"
        ></com.example.cne_shop.widget.CnToolbar>

    <View
        style="@style/line_mid_vertical"></View>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:background="@color/white"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/userMsg"
            android:text="小庄(158*****397)"
            android:paddingBottom="5dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/address"
            android:text="西安邮电大学长安区西区16栋118"
            android:textColor="@color/cardview_shadow_start_color"
            android:layout_below="@+id/userMsg"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <ImageButton
            android:layout_width="40dp"
            android:layout_height="60dp"
            android:paddingRight="30dp"
            android:paddingLeft="10dp"
            android:background="@color/white"
            android:id="@+id/consigneeMsg"
            android:src="@drawable/icon_right_64"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />
    </RelativeLayout>

    <View
       style="@style/line_mid_vertical"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:orientation="vertical"
            android:paddingBottom="10dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingTop="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="10dp"
                android:text="订单列表"
                android:textSize="16sp" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/wareMsg"
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:orientation="horizontal" />

        </LinearLayout>

        <ImageButton
            android:layout_width="40dp"
            android:layout_height="60dp"
            android:paddingRight="30dp"
            android:paddingLeft="10dp"
            android:background="@color/white"
            android:src="@drawable/icon_right_64"
            android:id="@+id/toOrderButton"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            />

    </RelativeLayout>


    <View
        style="@style/line_mid_vertical"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:background="@color/white">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:text="支付方式"
            android:textSize="16sp" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/Alipay">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/icon_alipay_72"
                android:id="@+id/alipayPhoto"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:text="支付宝"
                android:id="@+id/alipayText1"
                android:layout_toRightOf="@+id/alipayPhoto"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:paddingTop="5dp"
                android:text="支持支付宝用户,网银用户使用"
                android:id="@+id/alipayText2"
                android:layout_toRightOf="@+id/alipayPhoto"
                android:layout_below="@+id/alipayText1"
                android:textColor="@color/cardview_shadow_start_color"/>

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_alignParentRight="true"
                android:gravity="center"
                android:layout_centerVertical="true"
                style="@style/RadioButton"
                android:clickable="false"
                android:id="@+id/checkbox_alipay"/>

        </RelativeLayout>

        <View
            style="@style/line_vertical"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/wechat">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/icon_wechat_72"
                android:id="@+id/wechatPhoto"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:text="微信支付"
                android:id="@+id/wechatText1"
                android:layout_toRightOf="@+id/wechatPhoto"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:paddingTop="5dp"
                android:text="用微信支付，方便快捷"

                android:layout_toRightOf="@+id/wechatPhoto"
                android:layout_below="@+id/wechatText1"
                android:textColor="@color/cardview_shadow_start_color"/>

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_alignParentRight="true"
                android:gravity="center"
                android:layout_centerVertical="true"
                android:clickable="false"
                style="@style/RadioButton"
                android:id="@+id/checkbox_wechat"/>

        </RelativeLayout>

        <View
            style="@style/line_vertical"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/bd">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/icon_bd_72"
                android:id="@+id/bdPhoto"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:text="百度钱包"
                android:id="@+id/bdText1"
                android:layout_toRightOf="@+id/bdPhoto"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:paddingTop="5dp"
                android:text="百度安全支付服务"

                android:layout_toRightOf="@+id/bdPhoto"
                android:layout_below="@+id/bdText1"
                android:textColor="@color/cardview_shadow_start_color"/>

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_alignParentRight="true"
                android:gravity="center"
                android:layout_centerVertical="true"
                android:clickable="false"
                style="@style/RadioButton"
                android:id="@+id/check_bd"/>

        </RelativeLayout>
        
    </LinearLayout>



    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:layout_alignParentBottom="true"
            android:background="@color/cardview_shadow_start_color">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="实付:"
                android:layout_centerVertical="true"
                android:id="@+id/text"
                android:textColor="@color/white"/>

            <TextView
                android:layout_width="wrap_content"
                android:paddingLeft="20dp"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/text"
                android:textColor="@color/white"
                android:layout_centerVertical="true"
                android:id="@+id/warePrice"
                android:text="￥1753.00"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="提交订单"
                android:background="@color/red"
                android:id="@+id/btn_submit"
                android:textColor="@color/white"
                android:layout_alignParentRight="true"/>

        </RelativeLayout>

    </RelativeLayout>

</LinearLayout>

支付结果页面

我们得到支付结果后，启动这个页面。利用Intent传输支付结果。布局代码十分简单，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.cne_shop.widget.CnToolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:minWidth="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="支付结果"
        android:titleTextColor="@color/white"
        app:isShowSearchView="false"
        ></com.example.cne_shop.widget.CnToolbar>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@color/white"
        android:paddingTop="20dp"
        android:paddingBottom="20dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:paddingTop="30dp"
            android:id="@+id/resultImg"
            android:src="@drawable/icon_success_128" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="支付成功"
            android:gravity="center"
            android:id="@+id/resultText"
            android:layout_gravity="center_horizontal"
            android:paddingTop="40dp"
            android:textSize="22sp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp"
        android:paddingTop="30dp"
        android:paddingRight="20dp">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@color/material_green"
            android:textColor="@color/white"
            android:textSize="22sp"
            android:id="@+id/backHome"
            android:text="返回首页"/>

    </LinearLayout>

</LinearLayout>

功能设计

运行逻辑

当点击去结算按钮时，启动编辑订单页面的Activity,并且将选中的购物车商品信息一并传入，并在编辑订单页面的订单列表展示出传来的商品的图片，并显示总价，最上行可供用户点击后选择收货人信息与地址。（此功能后续完成）。选择支付方式后，点击提交订单后进行支付，利用支付SDK的模拟支付页面，我可以自主选择支付结果，并在支付结果页面进行显示。

代码实现

package com.example.cne_shop.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.cne_shop.R;
import com.example.cne_shop.base.BaseActivity;

import butterknife.BindView;

/**
 * Created by 博 on 2017/7/26.
 */

public class PayResultActivity extends BaseActivity {

    @BindView(R.id.resultText)
    TextView resultText ;
    @BindView(R.id.resultImg)
    ImageView resultButton ;
    @BindView(R.id.backHome)
    Button button ;

    @Override
    protected int getContentViewId() {
        return R.layout.pay_result_activity;
    }

    private void addButtonListener(){
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                startActivity(new Intent( v.getContext() , ShopMainActivity.class));
                finish();

            }
        });
    }

    protected void initView(){

        Intent intent = getIntent() ;
        if (intent != null){

            int status = intent.getIntExtra("status" , 0) ;

            Log.d("", "initView: status" + status + "---------------------------------------------------");

            if(status == NewOrderActivity.ORDER_SUCCESS){
                resultText.setText("支付成功");
                resultButton.setImageResource(R.drawable.icon_success_128);
            }else if(status == NewOrderActivity.ORDER_FAIL){
                resultText.setText("支付失败");
                resultButton.setImageResource(R.drawable.icon_cancel_128);
            }else if (status == NewOrderActivity.ORDER_GONE){
                resultText.setText("用户已取消支付");
                resultButton.setImageResource(R.drawable.icon_cancel_128);
            }
        }

    }

    @Override
    protected void addListener() {
        addButtonListener() ;
    }

    @Override
    protected void beforLayout() {

    }
}

• 其中，这段代码即是调用支付SDK的部分。

  private void openPaymentAcitivity(String charge){
        Intent intent = new Intent();
        String packageName = getPackageName() ;
        ComponentName componentName = new ComponentName(packageName , packageName + ".wxapi.WXPayEntryActivity") ;
        intent.setComponent(componentName) ;
        intent.putExtra(PaymentActivity.EXTRA_CHARGE , charge) ;
        startActivityForResult(intent , Contents.REQUEST_ORDER_CODE);
        Log.d("----" , "-------------------------------------打开了支付页面") ;
    }

• 下面代码是处理返回结果部分：

 if (requestCode == Contents.REQUEST_ORDER_CODE){
            if (resultCode == Activity.RESULT_OK){

                String result = data.getExtras().getString("pay_result") ;
                Log.d("----" , "-------------------------------------支付返回" + result) ;
                if (result.equals("success"))
                    changeOrderStatus(ORDER_SUCCESS);
                else if (result.equals("fail"))
                    changeOrderStatus(ORDER_FAIL);
                else if (result.equals("cancel"))
                    changeOrderStatus(ORDER_GONE);
                else
                    changeOrderStatus(0);

            }

• 展示结果源码如下，太过简单，不予讨论。

package com.example.cne_shop.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.cne_shop.R;
import com.example.cne_shop.base.BaseActivity;

import butterknife.BindView;

/**
 * Created by 博 on 2017/7/26.
 */

public class PayResultActivity extends BaseActivity {

    @BindView(R.id.resultText)
    TextView resultText ;
    @BindView(R.id.resultImg)
    ImageView resultButton ;
    @BindView(R.id.backHome)
    Button button ;

    @Override
    protected int getContentViewId() {
        return R.layout.pay_result_activity;
    }

    private void addButtonListener(){
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                startActivity(new Intent( v.getContext() , ShopMainActivity.class));
                finish();

            }
        });
    }

    protected void initView(){

        Intent intent = getIntent() ;
        if (intent != null){

            int status = intent.getIntExtra("status" , 0) ;

            Log.d("", "initView: status" + status + "---------------------------------------------------");

            if(status == NewOrderActivity.ORDER_SUCCESS){
                resultText.setText("支付成功");
                resultButton.setImageResource(R.drawable.icon_success_128);
            }else if(status == NewOrderActivity.ORDER_FAIL){
                resultText.setText("支付失败");
                resultButton.setImageResource(R.drawable.icon_cancel_128);
            }else if (status == NewOrderActivity.ORDER_GONE){
                resultText.setText("用户已取消支付");
                resultButton.setImageResource(R.drawable.icon_cancel_128);
            }
        }

    }

    @Override
    protected void addListener() {
        addButtonListener() ;
    }

    @Override
    protected void beforLayout() {

    }
}

如此，我们便成功构建了，支付功能，此页面功能还有一些缺失，将在后面几更进行完善。详细代码请戳页首源码。