st-payment

st-payment is a web component built with Stencil that allows you to use the Payment Request API.

Getting Started

To try this component:

git clone git@github.com:Fdom92/stencil-payment.git
cd my-app
git remote rm origin

and run:

npm install
npm start

Using this component

Script tag

• Put <script src='https://unpkg.com/stencil-payment@latest/dist/payment.js'></script> in the head of your index.html
• Then you can use the element <st-payment> anywhere in your template, JSX, html etc

Node Modules

• Run npm install stencil-payment --save
• Put a script tag similar to this <script src='node_modules/stencil-payment/dist/payment.js></script> in the head of your index.html
• Then you can use the element <st-payment> anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install stencil-payment --save
• Add { name: 'stencil-payment' } to your collections
• Then you can use the element <st-payment> anywhere in your template, JSX, html etc

Docs

First of all you have to add this to your head tag on index file:

<script src="https://storage.googleapis.com/prshim/v1/payment-shim.js"/>

Parameters

methodData

You need to pass the method data:

var methodData = [
  {
    supportedMethods: ["visa", "mastercard"]
  }
]

At the moment payment api only accept this cards:

• amex
• diners
• discover
• jcb
• maestro
• mastercard
• unionpay
• visa

details

You need to pass the details of the transaction, an object with displayItems and the total object with the final value:

var details = {
  displayItems: [
    {
      label: "Original donation amount",
      amount: { currency: "USD", value : "65.00" }, // US$65.00
    },
    {
      label: "Friends and family discount",
      amount: { currency: "USD", value : "-10.00" }, // -US$10.00
      pending: true // The price is not determined yet
    }
  ],
  total:  {
    label: "Total",
    amount: { currency: "USD", value : "55.00" }, // US$55.00
  }
}

callback

You can pass a callback function if you want to make some checks after success.

Methods

pay

You can make the payment request anytime with the pay method like this:

element = document.querySelector('st-payment');
element.pay();

This way you can bind this function to your own pay button or wherever you want.

abort

You can abort the transaction with the abortmethod anytime due to some error.

element = document.querySelector('st-payment');
element.abort();

Browser Support