Payment request API implementation in Stenciljs
Switch branches/tags
Nothing to show
Clone or download
Latest commit 9a86005 Aug 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs feat(): update stencil core Aug 25, 2018
src feat(): update stencil core Aug 25, 2018
www feat(): update stencil core Aug 25, 2018
.gitignore feat(): update stencil core Aug 25, 2018
LICENSE Initial commit Sep 8, 2017
package.json feat(): update stencil core Aug 25, 2018
readme.md fix(): fix readme Aug 25, 2018
stencil.config.js feat(): update stencil core Aug 25, 2018
tsconfig.json feat(): Add an example to test Sep 9, 2017

readme.md

Built With Stencil

wc-payment

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

Demo

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 like this:
<wc-payment>
    Pay
</wc-payment>

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 like this:
<wc-payment>
    Pay
</wc-payment>

In a stencil-starter app

  • Run npm install stencil-payment --save
  • Add { name: 'stencil-payment' } to your collections
  • Then you can use the element like this:
<wc-payment>
    Pay
</wc-payment>

Parameters

methodData

You need to pass the list of payment methods:

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
  }
}

options

You can also get the email address, phone number or name of a user when configuring the options object:

  var options = {
    requestShipping: true,
    requestPayerEmail: true,
    requestPayerPhone: true,
    requestPayerName: true
  };

Events

paymentFailed

You can listen to this event to know when the payment was unsucessfull:

element = document.querySelector('wc-payment');
element.addEventListener("paymentFailed", () => {});

paymentSucceeded

You can listen to this event to know when the payment was sucessfull:

element = document.querySelector('wc-payment');
element.addEventListener("paymentSucceeded", () => {});

Methods

show

You can show the payment request anytime with the show method like this:

element = document.querySelector('wc-payment');
element.show();

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

abort

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

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