diff --git a/.eslintrc.js b/.eslintrc.js
index c2e870f9..940824bd 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,12 +3,13 @@ module.exports = {
env: {
browser: true,
node: true,
+ jest: true,
},
extends: [
'prettier',
'plugin:vue/recommended',
'plugin:prettier/recommended',
- '@nuxtjs/eslint-config-typescript',
+ '@nuxt/eslint-config',
],
parserOptions: {
parser: '@typescript-eslint/parser',
diff --git a/.github/workflows/pipeline.yaml b/.github/workflows/pipeline.yaml
index 903fbdbe..e69802f6 100644
--- a/.github/workflows/pipeline.yaml
+++ b/.github/workflows/pipeline.yaml
@@ -11,10 +11,10 @@ jobs:
- name: Check out repository code
uses: actions/checkout@v3
- - name: Install Node 16.x
+ - name: Install Node 22.x
uses: actions/setup-node@v3
with:
- node-version: 16
+ node-version: 22.18.0
- name: Install Dependencies
run: yarn install --frozen-lockfile
@@ -22,16 +22,13 @@ jobs:
- name: Run Lint
run: yarn lint
- - name: Run Test
- run: yarn test
-
- name: Run Build
run: yarn build
scan:
needs: test
if: github.event_name == 'pull_request'
- uses: circlefin/circle-public-github-workflows/.github/workflows/pr-scan.yaml@v1
+ uses: circlefin/circle-public-github-workflows/.github/workflows/pr-scan.yaml@fix-pr-scan
release-sbom:
needs: test
diff --git a/.licenseignore b/.licenseignore
index f34e3b0f..1bc13036 100644
--- a/.licenseignore
+++ b/.licenseignore
@@ -1 +1,18 @@
pkg:npm/elliptic@6.6.1
+pkg:npm/@bufbuild/protobuf@2.7.0
+pkg:npm/@pkgjs/parseargs@0.11.0
+pkg:npm/abbrev@3.0.1
+pkg:npm/confbox@0.1.8
+pkg:npm/confbox@0.2.2
+pkg:npm/giget@2.0.0
+pkg:npm/postcss-reduce-initial@7.0.4
+pkg:npm/postcss-values-parser@6.0.2
+pkg:npm/rollup@4.48.1
+pkg:npm/sass@1.91.0
+pkg:npm/sax@1.4.1
+pkg:npm/type-fest@4.41.0
+pkg:npm/uglify-js@3.19.3
+pkg:npm/unenv@2.0.0-rc.19
+pkg:npm/vite@5.4.19
+pkg:npm/vite@7.1.3
+pkg:npm/vitest@1.6.1
diff --git a/.nvmrc b/.nvmrc
index 58a4133d..91d5f6ff 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-16.13.0
+22.18.0
diff --git a/README.md b/README.md
index 26ad6d1b..ee6d49eb 100644
--- a/README.md
+++ b/README.md
@@ -36,10 +36,6 @@ After you [generate an API key for the sandbox environment](https://developers.c
You are now ready to use the sample app and test some payments flows. In a production environment these payments would settle in the [USDC stablecoin](https://www.circle.com/en/usdc).
-## Test Card Numbers
-
-To automatically trigger certain responses from the Circle Payments API, you can use some pre-defined [test card numbers](https://developers.circle.com/docs/test-card-numbers) that exercise specific behaviors.
-
## Change API base url
By default the API base url will be set to https://api-sandbox.circle.com.
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 00000000..cd533f65
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,89 @@
+/* Main CSS file for Circle Sample App */
+
+/* Reset and base styles */
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto', sans-serif;
+}
+
+/* Layout styles */
+.v-application {
+ font-family: 'Roboto', sans-serif !important;
+}
+
+/* Navigation styles */
+.v-navigation-drawer {
+ border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+/* Card and content styles */
+.v-card {
+ border-radius: 8px;
+}
+
+/* Form styles */
+.v-text-field {
+ margin-bottom: 16px;
+}
+
+/* Button styles */
+.v-btn {
+ text-transform: none;
+}
+
+/* Utility classes */
+.text-center {
+ text-align: center;
+}
+
+.mt-4 {
+ margin-top: 16px;
+}
+
+.mb-4 {
+ margin-bottom: 16px;
+}
+
+.pa-4 {
+ padding: 16px;
+}
+
+/* Custom application styles */
+.headline {
+ font-size: 1.5rem;
+ font-weight: 400;
+ line-height: 2rem;
+}
+
+.subtitle-2 {
+ font-size: 0.875rem;
+ font-weight: 500;
+ line-height: 1.375rem;
+}
+
+/* Error and success states */
+.error-text {
+ color: #f44336;
+}
+
+.success-text {
+ color: #4caf50;
+}
+
+/* Loading states */
+.loading-overlay {
+ position: relative;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .v-navigation-drawer {
+ position: fixed !important;
+ }
+}
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..4bb705d9
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ targets: {
+ node: 'current',
+ },
+ },
+ ],
+ ],
+}
diff --git a/components/AmountInput.vue b/components/AmountInput.vue
index 68abbbcd..90dcc372 100644
--- a/components/AmountInput.vue
+++ b/components/AmountInput.vue
@@ -2,68 +2,78 @@
- {{ error.message }} -
- -{{ error.message }}
+- Make api calls using your private api key. Explore payload and - response data in the UI. -
-- Please use the settings panel on the right to configure your payments - api key. -
-Api endpoints to manage checkout sessions.
-
-
-
-
-
Api endpoints specific to merchants.
-
-
Api endpoints to manage payments.
-
-
+
-
+
-
+
-
-
+
-
+
-
-
Api endpoints to manage cards:
-
-
-
Api endpoints to manage chargebacks.
-
-
-
-
- Protocol Version: {{ googlePayTokenData.protocolVersion }} -
-- Signature: {{ googlePayTokenData.signature }} -
-- Signed Message: {{ googlePayTokenData.signedMessage }} -
-- Version: {{ applePayTokenData.version }} -
-- Data: {{ applePayTokenData.data }} -
-- Signature: {{ applePayTokenData.signature }} -
-- Header: {{ applePayTokenData.header }} -
-- If you intend on reusing a card for repeated payments in the future, - then it makes sense to complete card verification before making a - payment request. -
-- Creating a card will respond with an id value that can be stored on - your side to refer to this end -user's card in future payment - requests. -
-- The card creation response also contains the result of the different - verification checks performed. -
-- For implementation details please see our - - API guide. - -
-
- You can test the form by entering your personal api key in the
- settings on the right (Caution: When using a production api key it
- will charge your card).
-
- For demo purposes card ids are saved in local storage.
-
OR
- -- To accept online payments from the end user you can reuse already - entered card details. -
-- Creating a card will respond with an id value that can be stored on - your side to refer to this end -user's card in future payment - requests. -
-- For implementation details please see our - - API guide. - -
- -
- You can test the form by entering your personal api key in the
- settings on the right (Caution: When using a production api key it
- will charge your card).
-
- For demo purposes card ids are saved in local storage.
-
- To accept a card payment using the Circle Payments API you need to - collect card details and billing information from the end user - similar to the payments form shown on the left. -
-- If you are accepting a one-off payment (that is, your product does - not need to support accepting multiple future payments for this - card), then you don't need so store the card id as a reference to - this end -user's card when creating the card. -
-- For implementation details please see our - - API guide. - -
-- You can test the form by entering your personal api key in the - settings on the right (Caution: When using a production api key it - will charge your card). -
-- This sample web application demonstrates some of the features of the - - Circle APIs - -
++ This sample web application demonstrates some of the features of the + + Circle APIs + +
-This app provides:
+This app provides:
-- Explore the sample applications using your private api key. -
++ Make api calls using your private api key. Explore payload and + response data in the UI. +
-Make payment UI
-- Example form that combines adding card details and making a payment. -
-
-
Use existing card UI
-- Example form to make payment by selecting a previously added card. - Card information is only saved in your browser using local storage. -
-
-
+ View API guides and reference documentation, including available + endpoints and parameters. +
-Add card UI
-Simple form to enter card details.
- -
-
- Make api calls using your private api key. Explore payload and - response data in the UI. -
- -- View API guides and reference documentation, including available - endpoints and parameters. -
- -
-
- These words are commonly used across the app and documentation. -
-- Customer: the entity that enters - an agreement with Circle to gain access to the Payments API (i.e. a - business). -
-- End user: the entity that owns a - payment method used throughout the API (in other words, a Customer's - customer). -
-- Payment Method: an external - account that can originate or receive transfers (payments and - payouts), i.e. a debit or credit card, a bank account, etc. Payment: a - complex transaction involving fiat funds being transferred from an end - user's payment method, and depositing an associated amount of - stablecoin on a wallet. -
-- Payout: a complex transaction a - certain amount of stablecoin from a wallet and transferring the - associated fiat funds to a payment method Please use the menu on the - right to configure the api key. -
-
+
+ These words are commonly used across the app and documentation. +
++ Customer: the entity that + enters an agreement with Circle to gain access to the Payments API + (i.e. a business). +
++ End user: the entity that owns + a payment method used throughout the API (in other words, a + Customer's customer). +
++ Payment Method: an external + account that can originate or receive transfers (payments and + payouts), i.e. a debit or credit card, a bank account, etc. Payment: + a complex transaction involving fiat funds being transferred from an + end user's payment method, and depositing an associated amount of + stablecoin on a wallet. +
++ Payout: a complex transaction + a certain amount of stablecoin from a wallet and transferring the + associated fiat funds to a payment method Please use the menu on the + right to configure the api key. +
+