阅读 132

海外支付Nuxt接入paypal

一. 支付流程

用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验。
复制代码

二. 选用组件

使用vue-paypal-checkout组件
github地址:[https://github.com/khoanguyen96/vue-paypal-checkout](url)
复制代码

三. Nuxt引入vue-paypal-checkout组件

3.1 项目中添加npm包

npm install vue-paypal-checkout

3.2 创建脚本文件

//paypal.js
import Vue from 'vue'
import PayPal from 'vue-paypal-checkout'
Vue.component('paypal-checkout', PayPal)
复制代码

如果是使用ts的小伙伴,要记得在.d.ts文件下声明

declare module 'vue-paypal-checkout'
复制代码

3.3 在nuxt.config文件中声明

在声明时一定要注意,vue-paypal-checkout是在客户端运行的插件,要设置ssr:false 。

// nuxt.config.js
 plugins: [
    { src: '~/plugins/paypal.js', ssr: false }
  ],
复制代码

完成这三部vue-paypal-checkout组件就以及引入到nuxt项目中了 #四. vue-paypal-checkout组件的使用 下面是一个示例: 示例中有两个值:sandbox(沙盒环境下client_id),production(线上环境client_id )在下文中会做具体的说明,因为每一个示例的值都是不一样的。

<template>
  <no-ssr>
    <paypal-checkout
      amount="10.00"
      currency="USD"
      :client="credentials"
      env="sandbox"
      :button-style="buttonStyle"
      @payment-authorized="paymentAuthorized"
      @payment-completed="paymentCompleted"
      @payment-cancelled="paymentCancelled"
    />
  </no-ssr>
</template>
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component
export default class TextPayPal extends Vue {
  private credentials = {
    sandbox: '****', // 沙盒环境下client_id 标记(1)
    production: '***', // 线上环境client_id 标记(2)
  }

  private buttonStyle = {
    label: 'pay',
    size: 'small',
    shape: 'rect',
    color: 'blue',
  }

  paymentAuthorized(data: unknown) {
    // 授权完成的回调,可以拿到订单id
    console.log(data)
  }

  paymentCompleted(data: unknown) {
    // 用户支付完成的回调,可以拿到订单id
    console.log(data)
  }

  paymentCancelled(data: unknown) {
    // 用户取消交易的回调
    console.log(data)
  }
}
</script>
复制代码

以上的操作就是以及完成了对PayPal组件的使用,下面就去到PayPal开发者控制台去操作我们的沙盒环境 组件渲染效果图

image.png 点击之后的页面效果

image.png

因为本次项目搭建是在测试环境,所以此处付款的输入框对应的用户,是我们在下文4.2.2中创建的测试账号

四. PayPal沙盒环境账号申请流程

4.1 线上环境注册

(1) 打开 www.paypal.com/

(2)个人账号/企业账号都可以进行注册,只需要按照官网指示填写对应的资料就能完成注册。

4.2 paypal开发者平台

4.2.1 开发者文档

进入paypal开发者文档,使用4.1中注册的账号进行登录。在此文档中可以了解到有关PayPal中的各个api以及配置选型的说明。在此篇幅就不做赘述了

4.2.2 PayPal控制台

进入PayPal控制台

(1) 创建沙盒测试账号

  1. 进入Accounts页面

image.png 2. 创建账号,每个账号可以创建5个沙盒测试账号,有两种不同类型可以选择。行登录支付

image.png 3. 账号详情 image.png 其中的emailID 和password可以在3.3中进行登录支付 (2)登录沙盒测试账号 沙盒测试账号登录地址:com 使用上一步创建的账号进行登录,每一个测试账号系统默认分配了$5000的金额,这个值可以自行修改。

(3) 创建应用获取Client ID和Secret去请求Access Token 1.进入my APPs & Credentials 页面 创建测试APP

image.png 2. 点击APP进入详情页 Client ID image.png 点击show 获取 Secre值

image.png 其中的和Secret就是3.3中组件传值中的标记1和标记2,拿到标记1和标记2之后。vue-paypal-checkout就可以正常使用了。要记得点击PayPal按钮弹出的付款框,需要使用创建的测试账号去登录哈。

五 公司的海外电商项目使用的支付方案涵盖了PayPal,目前后端还没有将接口给出,此文字是基于测试环境对PayPal这个技术栈的实现。后续真实开发情景下应该还会遇到许多问题,本文会继续更新。

文章分类
前端
文章标签