@solidgate/vue-sdk 1.15.1 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -20
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,23 +1,58 @@
|
|
|
1
1
|
# Solidgate Vue3 SDK
|
|
2
2
|
|
|
3
|
-
This is a wrapper for Solidgate Client SDK
|
|
3
|
+
This repository is a Vue 3 wrapper for the Solidgate Client Software Development Kit (SDK).
|
|
4
|
+
|
|
5
|
+
It supports rendering payment forms and resign forms, including custom container elements for <a href="https://docs.solidgate.com/payments/integrate/payment-form/google-pay-button/" target="_blank">Google Pay</a>, <a href="https://docs.solidgate.com/payments/integrate/payment-form/apple-pay-button/" target="_blank">Apple Pay</a>, or <a href="https://docs.solidgate.com/payments/integrate/payment-form/paypal-button/" target="_blank">PayPal</a> buttons.
|
|
6
|
+
|
|
7
|
+
Check our
|
|
8
|
+
* <a href="https://docs.solidgate.com/" target="_blank">Payment guide</a> to understand business value better
|
|
9
|
+
* <a href="https://api-docs.solidgate.com/" target="_blank">API Reference</a> to find more examples of usage
|
|
10
|
+
|
|
11
|
+
## Structure
|
|
12
|
+
|
|
13
|
+
<table style="width: 100%; background: transparent;">
|
|
14
|
+
<colgroup>
|
|
15
|
+
<col style="width: 50%;">
|
|
16
|
+
<col style="width: 50%;">
|
|
17
|
+
</colgroup>
|
|
18
|
+
<tr>
|
|
19
|
+
<th>SDK for Vue3 contains</th>
|
|
20
|
+
<th>Table of contents</th>
|
|
21
|
+
</tr>
|
|
22
|
+
<tr>
|
|
23
|
+
<td>
|
|
24
|
+
<code>lib</code> – main Vue 3 SDK source code<br>
|
|
25
|
+
<code>public</code> – assets for example project<br>
|
|
26
|
+
<code>src</code> – entry point for example integration<br>
|
|
27
|
+
<code>package.json</code> – project metadata and dependency definitions
|
|
28
|
+
</td>
|
|
29
|
+
<td>
|
|
30
|
+
<a href="https://github.com/solidgate-tech/vue-sdk?tab=readme-ov-file#installation">Installation</a><br>
|
|
31
|
+
<a href="https://github.com/solidgate-tech/vue-sdk?tab=readme-ov-file#usage">Usage</a><br>
|
|
32
|
+
<a href="https://github.com/solidgate-tech/vue-sdk?tab=readme-ov-file#development-server">Development server</a><br>
|
|
33
|
+
<a href="https://github.com/solidgate-tech/vue-sdk?tab=readme-ov-file#build">Build</a>
|
|
34
|
+
</td>
|
|
35
|
+
</tr>
|
|
36
|
+
</table>
|
|
37
|
+
|
|
38
|
+
<br>
|
|
4
39
|
|
|
5
40
|
## Installation
|
|
6
41
|
|
|
7
|
-
Run inside
|
|
42
|
+
Run the following command inside your Vue 3 project:
|
|
8
43
|
|
|
9
44
|
```
|
|
10
45
|
npm i @solidgate/vue-sdk
|
|
11
46
|
```
|
|
12
47
|
|
|
48
|
+
<br>
|
|
49
|
+
|
|
13
50
|
## Usage
|
|
14
51
|
|
|
15
52
|
### Payment form
|
|
16
53
|
|
|
17
|
-
Render a payment component in your
|
|
54
|
+
Render a <a href="https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/" target="_blank">payment form</a> component in your Vue3 project.
|
|
18
55
|
|
|
19
|
-
Component inputs and outputs are described in the docs
|
|
20
|
-
https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/
|
|
21
56
|
|
|
22
57
|
```vue
|
|
23
58
|
<template>
|
|
@@ -35,7 +70,10 @@ const merchantData: InitConfig['merchantData'] = {
|
|
|
35
70
|
</script>
|
|
36
71
|
```
|
|
37
72
|
|
|
38
|
-
|
|
73
|
+
#### Custom containers
|
|
74
|
+
|
|
75
|
+
To render <a href="https://docs.solidgate.com/payments/integrate/payment-form/google-pay-button/" target="_blank">Google Pay</a>, <a href="https://docs.solidgate.com/payments/integrate/payment-form/apple-pay-button/" target="_blank">Apple Pay</a>, or <a href="https://docs.solidgate.com/payments/integrate/payment-form/paypal-button/" target="_blank">PayPal</a> buttons in separate containers, define Payment as an asynchronous component and pass references to the container elements.
|
|
76
|
+
|
|
39
77
|
```vue
|
|
40
78
|
<template>
|
|
41
79
|
<Payment
|
|
@@ -68,10 +106,7 @@ const merchantData: InitConfig['merchantData'] = {
|
|
|
68
106
|
|
|
69
107
|
### Resign form
|
|
70
108
|
|
|
71
|
-
Render a resign component in your
|
|
72
|
-
|
|
73
|
-
Component inputs and outputs are described in the docs
|
|
74
|
-
https://docs.solidgate.com/payments/integrate/payment-form/resign-payment-form/
|
|
109
|
+
Render a <a href="https://docs.solidgate.com/payments/integrate/payment-form/resign-payment-form/" target="_blank">resign payment form</a> component in your Vue3 project.
|
|
75
110
|
|
|
76
111
|
```vue
|
|
77
112
|
<template>
|
|
@@ -89,18 +124,22 @@ const resignRequest: ResignRequest = {
|
|
|
89
124
|
</script>
|
|
90
125
|
```
|
|
91
126
|
|
|
92
|
-
|
|
127
|
+
<br>
|
|
93
128
|
|
|
94
|
-
|
|
95
|
-
2. npm i
|
|
96
|
-
3. npm run start
|
|
97
|
-
4. Navigate to `http://localhost:3000/`.
|
|
129
|
+
## Development server
|
|
98
130
|
|
|
99
|
-
|
|
131
|
+
Vue3 + Typescript + Vite
|
|
132
|
+
|
|
133
|
+
1. `cd vue-sdk`
|
|
134
|
+
2. `npm i`
|
|
135
|
+
3. `npm run start`
|
|
136
|
+
4. Navigate to http://localhost:3000/
|
|
100
137
|
|
|
101
|
-
|
|
102
|
-
2. npm run build
|
|
103
|
-
3. cd dist
|
|
104
|
-
4. solid-payment.es.js is a js bundle.
|
|
138
|
+
<br>
|
|
105
139
|
|
|
140
|
+
## Build
|
|
106
141
|
|
|
142
|
+
1. `cd vue-sdk`
|
|
143
|
+
2. `npm run build`
|
|
144
|
+
3. `cd dist`
|
|
145
|
+
4. solid-payment.es.js is a js bundle
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@solidgate/vue-sdk",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.16.0",
|
|
4
4
|
"repository": "https://github.com/solidgate-tech/vue-sdk",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"vue": "^3.2.25"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@solidgate/client-sdk-loader": "^1.
|
|
31
|
+
"@solidgate/client-sdk-loader": "^1.16.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@babel/types": "^7.24.5",
|