I. Payment process

The user clicks the button, triggers the order creation event, and then we listen for the callback of the successful payment by the user, get the order ID and pass it to the back end for the back end to verify again.Copy the code

Two. Selection of components

Using the vue - paypal - checkout component making address: [https://github.com/khoanguyen96/vue-paypal-checkout] (url)Copy the code

Nuxt introduces vue-Paypal-checkout

3.1 Adding the NPM package to the Project

npm install vue-paypal-checkout

3.2 Creating a Script File

//paypal.js
import Vue from 'vue'
import PayPal from 'vue-paypal-checkout'
Vue.component('paypal-checkout', PayPal)
Copy the code

If you use TS, remember to declare this in the.d.ts file

declare module 'vue-paypal-checkout'
Copy the code

3.3 Declare in the nuxt.config file

It is important to note that vUE -paypal-checkout is a plug-in that runs on the client side. Set SSR :false.

// nuxt.config.js
 plugins: [
    { src: '~/plugins/paypal.js', ssr: false }
  ],
Copy the code

The vue-paypal-checkout component is used in the nuxT project. The vue-paypal-checkout component has two values: Sandbox (client_id in sandbox environment), production (client_id in online environment) are described below, as each example has different values.

<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: '****', // production: '***', // production: '***', private buttonStyle = {label: 'pay', size: 'small', shape: 'rect', color: 'blue', } paymentAuthorized(data: Unknown) {// Grant completed callback, can get order ID console.log(data)} paymentCompleted(data: Unknown) {// Order id console.log(data)} paymentCancelled(data: Unknown) {// Callback console.log(data)}} </script>Copy the code

The above operation is and complete the use of the PayPal component, now go to the PayPal developer console to operate our sandbox environment component rendering renderings

Click on the page after the effect

Since this project is set up in a test environment, the user corresponding to the input box for payment here is the test account we created in 4.2.2 below

4. PayPal sandbox environmental account application process

4.1 Online Environment Registration

(1) Open www.paypal.com/

(2) Personal account/enterprise account can be registered, only need to fill in the corresponding information according to the official website instructions to complete the registration.

4.2 paypal Developer Platform

4.2.1 Developer documentation

Enter the paypal developer documentation and log in using the account registered in 4.1. In this document, you can learn about the various apis in PayPal and the configuration selection. I will not repeat it in this space

4.2.2 PayPal Console

Go to the PayPal console

(1) Create a sandbox test account

  1. Go to the Accounts page

2. Create accounts. You can create five sandbox test accounts for each account. Line login payment

3. Account detailsThe emailID and password can be used for login payment in 3.3. (2) Login sandbox test account Login address:comLog in using the account created in the previous step. Each test account is assigned a default amount of $5000, which can be modified by yourself.

(3) Create an application to obtain the Client ID and Secret to request Access Token 1. Go to the My APPs & Credentials page to create the test APP

2. Click APP to enter the Client ID of the detail pageClick Show to get the Secre value

Where the and Secret are tokens 1 and 2 in the component pass value of 3.3, after tokens 1 and 2 are obtained. Vue-paypal-checkout is now available. Remember to click the PayPal button to pop up the payment box, you need to create a test account to log in ha.

The payment scheme used in the overseas e-commerce projects of The Five companies covers PayPal. At present, the interface has not been provided in the back end. This text is based on the realization of the technology stack of PayPal in the test environment. This article will continue to be updated as you continue to encounter problems in real-world development scenarios.