wc-payment

wc-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 [email protected]: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();