# JS SDK

Before reading this article, please understand "How to get redirect_url" (opens new window)

# You can use JS SDK directly from a CDN via a script tag:

<script src="https://cdn.pyvio.com/plugins/payment-sdk-v1.js"></script>

# Instantiating the JS SDK class

<body>
  <div id="payment-wrap"></div>
</body>

<script>
  const checkout = new window.PYVIO_PAYMENT_PLUGIN({
    env: 'sandbox',
    manual: true,
    size: 'normal',
    rootId: 'payment-wrap',
  })
</script>
PARAMETERS
env
required
string
one of sandbox, prod or production. prod and production mean the same thing.
rootId
required
string
DOM id, checkout will be rendered in this tag, if this plugin could not find this DOM, checkout will be rendered in body of current page.
manual
boolean
set manual as true, we open that method witch called checkout.payNow() for you, calling it to trigger pay now.

# loadCheckout

Calling loadCheckout to render checkout page.

<script>
  // context
  checkout.loadCheckout(redirect_url, callback)
</script>
PARAMETERS
redirect_url
required
string
Call our Cashier Checkout api to get.
callback
function
This function will be executed when Checkout rendering is complete.

# payNow

Calling this function is equivalent to clicking the PayNow button on the page. To call this method, you must give manual as true at first.

<script>
  // context
  checkout.payNow()
</script>

# reload

This method could be called after "loadCheckout". Calling this method to reload Checkout(it will not change " redirect_url").

<script>
  // context
  checkout.reload()
</script>

# Full Demo

With html5 + javascript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
    <script src="https://treasure.pyvio.com/front/plugins/payment-sdk-v1.js"></script>
  </head>
  <body>
    <h1>This is a demo page</h1>
    <div id="payment-wrap"></div>
    <h2>This is a footer</h2>
  </body>
  <script>
    // This is not a real redirect_url
    const redirect_url = 'https://sandbox-cashier.pyvio.com/checkout?token=417ef70627e96844fceb09b4a3e4611f87d57749a39fdd59d520e00d5f5e85b6'
    const checkout = new window.PYVIO_PAYMENT_PLUGIN({
      env: 'sandbox',
      rootId: 'payment-wrap'
    })
    checkout.loadCheckout(redirect_url, cb)
    
    function cb(){
      console.log('Success')
    }
  </script>
</html>

# Theme Config

If you need to customize the style, please refer to the configuration below.

new window.PYVIO_PAYMENT_PLUGIN({
  env: 'sandbox',
  rootId: 'payment-wrap',
  // This key can help you to customize the style
  theme: {
    modulesVariable: {
      showHeader: true,
      showBillingInfo: true,
      showSupportCardBrands: true,
      showBill: true,
      showLocated: true,
      showFooterInfo: true,
      showPayBtn: true,
      showSecurityIconsl: true
    },
    themeVariable: {
      // 定制主题色
      themeColor: 'rgba(0, 123, 104, 1)',
      // 主题色渐变
      themeColorShadow: 'rgba(0, 123, 104, 0.46)',
      // 报错颜色
      errorColor: 'rgba(234, 91, 57, 1)',
      // 报错shadow
      errorShadowColor: 'rgba(234, 91, 57, 0.3)',
      // 警告颜色
      warningColor: '#F57929',
      // loading覆盖层色彩
      loadingMaskColor: 'rgba(255, 255, 255, 0.2)',
      // loading spinner背景色
      loadingSpinnerBackColor: 'rgba(0, 0, 0, 0.1)',
      // loading spinner主色彩
      loadingSpinnerColor: 'rgba(0, 0, 0, 0.8)',
      // 元素间最小间距
      minDistance: '8px',
      // 输入框/下拉选择框高度
      inputHeight: '48px',
      // 最小字体
      minFontSize: '12px',
      // 一般字体
      commonFontSize: '14px',
      // 标题字体
      titleFontSize: '16px',
      // Checkout页眉安全支付标题字体
      secureTitleFontSize: '40px',
      // checkout页眉高度
      checkoutHeaderHeight: '180px',
      // 标题文本色彩
      titleTextColor: '#141922',
      // 一般文字色彩
      commonTextColor: ' #525866',
      // 链接文字色彩
      linkTextColor: ' #007B68',
      // 浅灰色文本色彩
      lightGaryTextColor: '#9399A3',
      // 卡品牌上下padding
      supportCardBrandsPadding: '6px',
      // placeholder颜色
      placeholderColor: '#999999',
      // popup关闭区域高度
      popupHeight: '48px',
      // 页面左右边距
      wrapPadding: '15.8%',
      // result结果页content背景色
      resultContentBg: '#F7F8FA',
      // 表单上下边距
      formItemDistance: '14px',
      // 左侧billingInfo背景色
      billingBg: '#fff',
      // 左侧billingInfo右侧边框内阴影色
      billingInsetColor: 'rgba(72,88,101,0.06)',
      // 主表单背景色
      mainFormBg: '#ffffff',
      // 表单label颜色
      mainFormLabelColor: 'rgba(0, 0, 0, 0.45)',
      // 表单value颜色
      mainFormValueColor: 'rgba(0, 0, 0, 0.8)',
      // header背景色
      headerBg: 'linear-gradient(180deg, #F7F9FC 0%, #F3F8FC 100%)',
      // 主表单最大宽度
      paymentFormMaxWidth: '600px',
      // 表单输入框圆角
      inputBorderRadius: '4px',
      // 主表单padding
      formContentPadding: '80px 64px'
    }
  }
})

modulesVariable

themeVariable