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 alternative payment method (APM) buttons.
Check our
- Payment guide to understand business value better
- API Reference to find more examples of usage
| SDK for Vue3 contains | Table of contents |
|---|---|
lib – main Vue 3 SDK source codepublic – assets for example projectsrc – entry point for example integrationpackage.json – project metadata and dependency definitions
|
Installation Usage Development server Build |
Run the following command inside your Vue 3 project:
npm i @solidgate/vue-sdk
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>To render Google Pay, Apple Pay, PayPal, MB Way, or Pix QR buttons in separate containers, define payment as an asynchronous component and pass references to the container elements.
<template>
<Payment
:merchant-data="merchantData"
:google-pay-container-ref="googleButton"
:apple-pay-container-ref="appleButton"
:paypal-container-ref="paypalButton"
:mbway-container-ref="mbwayButton"
:pix-qr-container-ref="pixQrButton"
/>
<div ref="googleButton" />
<div ref="appleButton" />
<div ref="paypalButton" />
<div ref="mbwayButton" />
<div ref="pixQrButton" />
</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 mbwayButton = ref<HTMLDivElement>()
const pixQrButton = ref<HTMLDivElement>()
const merchantData: InitConfig['merchantData'] = {
merchant: '<<--YOUR MERCHANT ID-->>',
signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}
</script>Apple Pay and Google Pay report the payer's card funding type before the charge. Handle
walletCardType to inspect it and, optionally, pause the wallet flow with pauseUntil
while you call an update intent method (update, updateCheckout). The side effect has
a 25 s budget, measured from the moment the event fired.
<template>
<Payment
:merchant-data="merchantData"
:google-pay-button-params="googlePayButtonParams"
:on-wallet-card-type="onWalletCardType"
@ready-payment-instance="form = $event"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import Payment, {
ClientSdkInstance,
InitConfig,
WalletCardTypeCallback
} from '@solidgate/vue-sdk'
const form = ref<ClientSdkInstance>()
// required when you update the intent inside the event
const googlePayButtonParams: InitConfig['googlePayButtonParams'] = {
totalPriceStatus: 'TOTAL_PRICE_STATUS_ESTIMATED'
}
const onWalletCardType: WalletCardTypeCallback = (data, pauseUntil) => {
if (data.card.type === 'unknown') {
return // no intent update - the wallet continues immediately
}
pauseUntil(async () => {
await form.value?.update({ partialIntent: intentFor(data.card.type) })
})
}
</script>@wallet-card-type="onWalletCardType" binds the same prop, so either style works.
Change the checkout line items, discounts or subscription data after the form is mounted
with updateCheckout.
The invoice preview itself arrives through the invoicePreview event. It is sent by the
SDK during the form initialization process.
<template>
<Payment
:merchant-data="merchantData"
@invoice-preview="onInvoicePreview"
@ready-payment-instance="form = $event"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import Payment, {
ClientSdkInstance,
InvoicePreviewMessage,
UpdateCheckoutConfig
} from '@solidgate/vue-sdk'
const form = ref<ClientSdkInstance>()
const onInvoicePreview = (e: InvoicePreviewMessage) => {
console.log(e.invoicePreview.total, e.invoicePreview.currency)
}
const changeQuantity = async (quantity: number) => {
const config: UpdateCheckoutConfig = {
lineItems: [{ productPriceId: 'price_id', quantity }]
}
await form.value!.updateCheckout(config)
}
</script>:on-invoice-preview="onInvoicePreview" binds the same prop, so either style works.
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>Vue3 + Typescript + Vite
cd vue-sdknpm inpm run start- Navigate to http://localhost:3000/
cd vue-sdknpm run buildcd dist- solid-payment.es.js is a js bundle
Looking for help? Contact us
Want to contribute? Submit a pull request