stripe-pay

Stripe Pay

stripe-pay works by hooking into stripe-checkout.js and creates a custom web component that you can add to your site to allow accepting payments. It requires you to include https://checkout.stripe.com/checkout.js to utilize their sdk and all payments are processed through their popup. As with anything, please read the source code. I've attempted to document it using jsdoc style documentation to make it super simple to read. If you find any issues, feel free to open a Pull Request or an issue.

Setup

• Include https://checkout.stripe.com/checkout.js before including the stripe-pay component
• Include dist/stripe.js
• Use it on your page!

<stripe-pay
  key="pk_test_blahblahblah"
  name="Product Name"
  description="Product Description"
  currency="usd"
  locale="auto"
  amount="20000"
  image="https://stripe.com/img/documentation/checkout/marketplace.png"
  zipCode="true">
  Click Here to Buy!
</stripe-pay>

• When the user clicks the element, it will open a popup. That is unaltered from how stripe sets things up. The user can then fill in the required fields and hit the submit button. On success, the stripe-pay will fire an onToken event with information related to the purchase. When the popup closes, stripe-pay will fire an onClose event.

Styling

Styling is done with CSS Variables. The following variables are available to control the text of the link:

--stripe-pay-font-family
--stripe-pay-font-size
--stripe-pay-font-weight
--stripe-pay-color
--stripe-pay-decoration

You are also able to pass in images which you can control with regular CSS.

Local development

• Clone the repo
• npm i or yarn
• npm start or yarn start

Note: By default, stencil components only run in Chrome when development happens. This can be changed to add the --prod attribute to the package.json script but it slows don't recompiling.