zeply.payments-web-components

It is Zeply's PayConnect Web Components and library. It is published to public NPM packages repository as https://www.npmjs.com/package/zeply.payments-web-components.

Releases

• CHANGELOG.md

Integration

This is example of how to integrate ZeplyPayConnect () web component into your React or any other application.

import React from 'react';
import ReactDOM from 'react-dom';
import "zeply.payments-web-components";

const App = () => {
    // you need to provide valid payment token
    const paymentToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXltZW50Ijp7ImFtb3VudCI6MjEuNDUsImN1cnJlbmN5IjoiRVVSIiwiYXV0b0NhcHR1cmUiOnRydWV9LCJlbmRVc2VyRGF0YSI6eyJuYW1lIjoiSm9obiBEb2UiLCJjb3VudHJ5T2ZSZXNpZGVuY2UiOiJNVCIsImVuZFVzZXJJZCI6ImpvaG4yMDIzIiwibG9jYWxlIjoiZXRfRUUiLCJlbWFpbCI6ImpvaG5kb2VAZ21haWwuY29tIiwibW9iaWxlIjp7ImNvdW50cnlDb2RlIjoiKzM3MiIsIm51bWJlciI6Ijk5OTg4ODc3In0sImFkZHJlc3NMaW5lMSI6IkNpdHkgQ2VudGVyIiwiY2l0eSI6IlRhbGxpbm4iLCJwb3N0Q29kZSI6IjEwMTExIn0sImNhbGxiYWNrVXJsIjoiaHR0cHM6Ly9hcGktbWVyY2hhbnQtZGV2LnplcGx5LmRldi9wYXltZW50LWNhbGxiYWNrIiwib3B0aW9ucyI6eyJhbGxvd1JlbWVtYmVyQ2FyZCI6dHJ1ZX0sImNhcmRzIjpbeyJicmFuZCI6Ik1BU1RFUkNBUkQiLCJsYXN0Rm91ckRpZ2l0cyI6IjE4NzkifSx7ImJyYW5kIjoiVklTQSIsImxhc3RGb3VyRGlnaXRzIjoiMTExMSJ9XSwicGF5bWVudElkIjoiNjU0M2JiYWU4MmU0MjRiOTRlOGUzN2Y3IiwiYXBwbGVQYXlNZXJjaGFudElkIjoibWVyY2hhbnQuZGV2LnplcGx5LmRlbW8uc2FuZGJveCIsImdvb2dsZVBheSI6eyJnYXRld2F5IjoiY2hlY2tvdXRsdGQiLCJnYXRld2F5TWVyY2hhbnRJZCI6InBrX3Nib3hfbGZqM3ZzNzJpd2FxdmJqbXdlYjM0c2FyZHl3IiwibWVyY2hhbnRJZCI6IjAxMjM0NTY3ODkwMTIzNDU2Nzg5IiwibWVyY2hhbnROYW1lIjoiRGVtbyBNZXJjaGFudCJ9LCJtZXJjaGFudERpc3BsYXlOYW1lIjoiRGVtbyBNZXJjaGFudCIsImV4cCI6MTY5ODkzODY3NH0.dmfxcKZ_m3OwLzoFdh00768PggZFWDotecJingBgzCU';
    // this is required if you plan to allow users to input card detail as payment method
    const iframeOptions = {
        title: 'Merchant Demo App',
        language: 'en',
        mainColor: '#000',
        backgroundColor: '#fff',
        mode: 'full', // it can be full or compact
        hidePoweredByZeply: true,
        hidePciLogo: true,
        hideOuterPgBorder: true,
        hideCancelPayment: true,
        useCustomResultsScreens: true
    }
    return (<div>
        <zeply-pay-connect token={paymentToken} iframe={JSON.stringify(iframeOptions)} environment={'https://dev-payments.zeply.com'}></zeply-pay-connect>
    </div>);
};

ReactDOM.render(<App/>, document.getElementById('root'));