vue はマルチマーチャント Alipay サンドボックス支払いを実装します-フロントエンドQ&A-php.cn

vue はマルチマーチャント Alipay サンドボックス支払いを実装します

WBOY

リリース： 2023-05-25 09:17:07

オリジナル

759 人が閲覧しました

インターネットの発展と普及に伴い、オンライン販売業者はますます増え、支払い方法もますます多様化しています。 Alipay は、多くの販売業者にとってオンライン支払いの最初の選択肢の 1 つとなっています。 Vue プロジェクトでマルチマーチャント Alipay サンドボックス決済を実装する方法は、解決する必要がある問題です。この記事では、Vue を使用してマルチマーチャント Alipay サンドボックス決済を実装する方法を紹介します。

1. 準備作業

マルチマーチャント Alipay サンドボックス決済を実装する前に、いくつかの準備作業が必要です。

1.1 Alipay サンドボックスアカウントを作成する

この手順では、Alipay Developer Center にアクセスして操作する必要があります。具体的な手順は次のとおりです:

Alipay Developer にアクセスしてくださいセンターの Web サイト: https://openhome.alipay.com/
Alipay アカウントにログインします
「サンドボックス環境」インターフェイスに入り、以下に従ってサンドボックスアプリケーション、販売アカウントなどを作成します。ガイドライン。

1.2 Alipay SDK のインストール

Vue プロジェクトで Alipay SDK を使用するには、まずそれをインストールする必要があります。具体的な手順は次のとおりです:

ターミナルに次のコマンドを入力してインストールします:

npm install --save alipay-sdk

ログイン後にコピー

Vue プロジェクトのルートディレクトリにある vue.config.js ファイルに次の構成項目を追加します:

module.exports = {
  transpileDependencies: ['alipay-sdk'],
}

ログイン後にコピー

上記の手順は、準備作業の内容全体です。それでは本題に入りましょう。

2. マルチマーチャント Alipay サンドボックス決済の実装

Vue プロジェクトでのマルチマーチャント Alipay サンドボックス決済の実装は、次の手順に分けることができます:

2.1 Alipay SDK の紹介

Alipay SDK を Vue プロジェクトに導入します (main.js またはコンポーネントに導入できます)。具体的なコードは次のとおりです:

import AlipaySdk from 'alipay-sdk'

const alipaySdk = new AlipaySdk({
  appId: '沙箱应用AppID',
  privateKey: '沙箱应用私钥',
  signType: 'RSA2',
  gateway: 'https://openapi.alipaydev.com/gateway.do', // 沙箱支付宝接口地址
  alipayPublicKey: '支付宝公钥',
})

ログイン後にコピー

そのうち、appId、privateKey、signType、alipayPublicKey はすべてAlipayサンドボックス環境で作成されたアプリケーションから来ています。

2.2 支払いリクエストの送信

支払いリクエストを行う場合は、まず支払い金額、販売者の注文番号、その他の情報を取得してから、Alipay SDK を通じてリクエストを送信する必要があります。コードは次のとおりです:

alipaySdk.exec('alipay.trade.app.pay', {
  bizContent: {
    product_code: 'QUICK_MSECURITY_PAY',
    total_amount: '订单金额',
    subject: '订单标题',
    out_trade_no: '商户订单号',
  },
})
.then(response => {
  // 处理支付宝返回的数据
})
.catch(error => {
  // 处理支付失败的情况
})

ログイン後にコピー

2.3 支払い結果の処理

支払いを行った後、支払い結果を処理する必要があります。具体的な実装方法は次のとおりです。

// 引入url库，用于解析支付宝回调的url参数
import url from 'url'

const query = url.parse(window.location.href, true).query

if (query.trade_status === 'TRADE_SUCCESS') {
  // 处理支付成功的情况
} else if (query.trade_status === 'TRADE_CLOSED') {
  // 处理支付关闭的情况
} else {
  // 处理其他支付情况
}

ログイン後にコピー

2.4 Alipay トランザクションクエリ

支払いプロセス中に、Alipay トランザクションステータスをクエリする必要がある場合があります。具体的な実装コードは次のとおりです。

alipaySdk.exec('alipay.trade.query', {
  bizContent: {
    out_trade_no: '商户订单号',
  },
})
.then(response => {
  // 处理查询结果
})
.catch(error => {
  // 处理查询失败的情况
})

ログイン後にコピー

2.5 Alipay 返金リクエスト

返金操作を実行する場合は、まず返金金額、販売者の注文番号などの情報を取得してから送信する必要があります。 Alipay SDK を介したリクエスト。具体的な実装コードは次のとおりです。

alipaySdk.exec('alipay.trade.refund', {
  bizContent: {
    refund_amount: '退款金额',
    out_trade_no: '商户订单号',
    refund_reason: '退款原因',
  },
})
.then(response => {
  // 处理退款成功的情况
})
.catch(error => {
  // 处理退款失败的情况
})

ログイン後にコピー

上記は、Vue プロジェクトでマルチマーチャント Alipay サンドボックス決済を実装する内容全体です。

3. 概要

この記事では、Vue プロジェクトでマルチマーチャント Alipay サンドボックス支払いを実装する方法を紹介します。必要な準備には、Alipay サンドボックスアカウントの作成と Alipay SDK のインストールが含まれます。具体的な実装プロセスには、Alipay SDK の導入、支払いリクエストの送信、支払い結果の処理、Alipay 取引照会、Alipay 返金リクエストなどのステップが含まれます。この記事を学ぶことで、読者は Vue を使用してマルチマーチャント Alipay サンドボックス支払いを実装する方法をより深く理解し、習得できると思います。

以上がvue はマルチマーチャント Alipay サンドボックス支払いを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。