ホームページ > 記事 > ウェブフロントエンド > Alipayを使用してuniappで支払う方法
近年、モバイル決済は、より便利、より速く、より安全な取引方法の 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 サイトの他の関連記事を参照してください。