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.

<<<<<<< HEAD

abort

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

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

=======

752058179ec12f04f1d7719ecbb2d5e9f87ffd93