@solidgate/vue-sdk
TypeScript icon, indicating that this package has built-in type declarations

1.15.2 • Public • Published

Solidgate Vue3 SDK

This repository is a Vue 3 wrapper for the Solidgate Client Software Development Kit (SDK).

It supports rendering payment forms and resign forms, including custom container elements for Google Pay, Apple Pay, or PayPal buttons.

Check our

Structure

SDK for Vue3 contains Table of contents
lib – main Vue 3 SDK source code
public – assets for example project
src – entry point for example integration
package.json – project metadata and dependency definitions
Installation
Usage
Development server
Build

Installation

Run the following command inside your Vue 3 project:

npm i @solidgate/vue-sdk

Usage

Payment form

Render a payment form component in your Vue3 project.

<template>
  <Payment :merchant-data="merchantData" />
</template>

<script lang="ts" setup>
import Payment, { InitConfig } from '@solidgate/vue-sdk'

const merchantData: InitConfig['merchantData'] = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}
</script>

Custom containers

To render Google Pay/a>, Apple Pay, or PayPal buttons in separate containers, define Payment as an asynchronous component and pass references to the container elements.

<template>
  <Payment
    :merchan-data="merchantData"
    :google-pay-container-ref="googleButton"
    :apple-pay-container-ref="appleButton"
    :paypal-container-ref="paypalButton"
  />
  <div ref="googleButton" />
  <div ref="appleButton" />
  <div ref="paypalButton" />
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue'
import { InitConfig } from '@solidgate/vue-sdk'
const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))

const googleButton = ref<HTMLDivElement>()
const appleButton = ref<HTMLDivElement>()
const paypalButton = ref<HTMLDivElement>()

const merchantData: InitConfig['merchantData'] = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}
</script>

Resign form

Render a resign payment form component in your Vue3 project.

<template>
  <Resign :resign-request="resignRequest" />
</template>

<script lang="ts" setup>
import { Resign, ResignRequest } from '@solidgate/vue-sdk'

const resignRequest: ResignRequest = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  resignIntent: '<<--YOUR RESIGN INTENT-->>'
}
</script>

Development server

Vue3 + Typescript + Vite

  1. cd vue-sdk
  2. npm i
  3. npm run start
  4. Navigate to http://localhost:3000/

Build

  1. cd vue-sdk
  2. npm run build
  3. cd dist
  4. solid-payment.es.js is a js bundle

Readme

Keywords

none

Package Sidebar

Install

npm i @solidgate/vue-sdk

Weekly Downloads

51

Version

1.15.2

License

Apache-2.0

Unpacked Size

60.3 kB

Total Files

18

Last publish

Collaborators

  • solidgate