ホームページ >ウェブフロントエンド >uni-app >Alipayを使用してuniappで支払う方法

Alipayを使用してuniappで支払う方法

PHPz
PHPzオリジナル
2023-04-17 11:27:224370ブラウズ

近年、モバイル決済は、より便利、より速く、より安全な取引方法の 1 つになりました。中国で最も広く使用されているモバイル決済プラットフォームとして、Alipay はユーザーに深く支持されています。 uniapp (Vue.js に基づくクロスプラットフォーム開発フレームワーク) の人気に伴い、多くの開発者は Alipay の支払い機能を uniapp に統合したいと考えています。この記事では、uniappでAlipayを使って支払う方法を簡単に紹介します。

1. Alipay オープン プラットフォームの登録

Alipay を使用して支払いを行う前に、開発者はまず Alipay オープン プラットフォームに登録する必要があります。 Alipay オープン プラットフォーム (https://opendocs.alipay.com/open) にアクセスした後、「オープン プラットフォーム登録」を選択し、関連情報を入力して登録を完了します。

2. Alipay SDK の統合

登録が成功したら、開発者は Alipay SDK をダウンロードしてプロジェクトに統合する必要があります。 uniapp 公式 Web サイトで提供される uni-app-plus ツールを使用して、Alipay SDK にすぐにアクセスできます。 uni-app-plus を使用するプロセスは次のとおりです:

1. uni-app-plus をインストールします

npm install -g uni-app-plus

2. uni-app-plus を使用して uni-app プロジェクトを作成します

uni-app-plus init myApp

3. myApp ディレクトリに入り、Alipay プラグインを追加します

cd myApp
uni-app-plus plugin add ali-pay

4. プラグインを追加すると、Alipay プラグインへの参照がマニフェストに自動的に追加されます.json:

"plugins": {
    "ali-pay": {
      "version": "1.4.4",
      "provider": "com.baidu.capacitor.alipay.AliPaySdkPlugin"
    }
},
"compilerOptions": {
    ...
    "provider": {
      "ali-pay": {
        "alias": "ap"
      }
    }
}

5. 開発には uni-app-plus 組み込み HBuilderX ツールを使用します。

このうち、Alipay SDK は Alipay オープンプラットフォームの開発者センターからダウンロードする必要があります。ダウンロード後、解凍して「AlipaySDK.framework」フォルダーと「APAuthV2Info.h」、「APOrderInfo. h」、「APOrderService.h」の 3 つのヘッダー ファイルを「Destination」フォルダーにドラッグして SDK の追加は完了です。

3. Alipay 支払い情報の設定

Alipay SDK の統合が完了したら、開発者は Alipay 支払い情報を設定する必要があります。具体的なプロセスは次のとおりです:

1. Alipay オープン プラットフォーム上でアプリケーションを作成し、アプリケーションの APP_ID、PID、PRIVATE_KEY などの情報を取得します。

2. 使用中に、APPID、PARTNERID、販売者の秘密キー、Alipay の公開キー、その他の情報をプロジェクトに設定します。例:

const ap = uni.requireNativePlugin('ali-pay') // 引入支付宝插件

const privateKey = `-----BEGIN RSA PRIVATE KEY-----
*****此处为商户私钥*****
-----END RSA PRIVATE KEY-----`
const aliPublicKey = `*****此处为支付宝公钥*****`

const orderInfo = { // 订单信息
    body: '测试商品',
    subject: '测试商品',
    out_trade_no: '1544665957487', // 订单号
    timeout_express: '30m',
    total_amount: '0.01'
}

4. Alipay 支払いの実装

Alipay SDK の統合と Alipay 支払い情報の設定が完了したら、uniapp を使用して Alipay 支払い機能の実装を開始できます。

1. Alipay 支払いの開始

Alipay プラグインの pay() メソッドを使用して、Alipay への支払いリクエストを開始します:

ap.pay({
    orderInfo: orderInfo, // 订单信息
    privateKey: privateKey, // 商户私钥
    aliPublicKey: aliPublicKey // 支付宝公钥
}, function(retJson) {
    console.log(JSON.stringify(retJson))
})

2. Alipay 支払い結果のコールバック

Alipay 支払いが完了すると、Alipay のコールバック メソッドを通じて支払い結果を取得できます:

document.addEventListener('AlipayPayResult', function (res) {
    // res.detail.code ==> 9000支付成功 6001取消支付 4000支付失败
    ...
})

これまでのところ、Alipay 支払いを使用する機能を正常に実装できました。ユニアプリ。一般に、この機能を完了するには少量の構成とコード記述だけが必要であり、開発者にとっては非常に便利です。

今後、モバイル決済の需要はますます高まるため、クロスプラットフォーム開発フレームワークとして、uniappとAlipay SDKの統合は非常に高いアプリケーション価値を持つことになります。

以上がAlipayを使用してuniappで支払う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。