SBase Payment Web Component

A Vue-based web component for handling payments in SBase applications.

Installation

npm install @sbase/payment-web-component

Usage

In HTML

<!-- Import Vue first -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Import the web component -->
<script type="module" src="path/to/vue-payment-app.js"></script>

<!-- Use the component -->
<vue-payment-app
  type="list"
  locale='{"key": "value"}'
  country="US"
  currency="USD"
  cdn-assets="https://cdn.example.com"
  checkout='{"id": "123"}'
  shop='{"id": "456"}'
  init-params='{"product_id": 789}'
></vue-payment-app>

In Vue

<template>
  <vue-payment-app
    :type="'list'"
    :locale="localeData"
    :country="'US'"
    :currency="'USD'"
    :cdn-assets="cdnUrl"
    :checkout="checkoutData"
    :shop="shopData"
    :init-params="initParams"
  />
</template>

<script setup>
import '@sbase/payment-web-component'

// Your component data
const localeData = {key: 'value'}
const cdnUrl = 'https://cdn.example.com'
const checkoutData = {id: '123'}
const shopData = {id: '456'}
const initParams = {product_id: 789}
</script>

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | type | 'list' | 'express' | 'express-cache' | Yes | Payment display type | | locale | Object | Yes | Localization data | | country | string | Yes | Country code | | currency | string | Yes | Currency code | | cdnAssets | string | Yes | CDN base URL | | checkout | Object | Yes | Checkout data | | shop | Object | Yes | Shop data | | initParams | Object | Yes | Initialization parameters |

License

MIT