Payment request API implementation in Stenciljs

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.

<<<<<<< HEAD

abort

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

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

======= Browser Suport

752058179ec12f04f1d7719ecbb2d5e9f87ffd93

Install

Link to this version
ImportedReleased 25 August 2018MIT License
Framework Support
Browser Independent
Install with
npm install stencil-payment"@1.0.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.0

Dependencies

  • @stencil/core#0.11.4