PaySuper Payment Form

Do not use this module directly, use paysuper-js-sdk instead.

PaySuper payment form is a PaySuper-hosted mobile browsers-friendly widget that lets you collect payments with just a few lines of code. Learn more about a payments flow and PaySuper Checkout integration.

	PaySuper Service Architecture
✨	Checkout integration. PaySuper JS SDK is designed to integrate a Checkout Form on a merchant's website or a game client.
💵	Frontend for a payment form. PaySuper Payment Form is a frontend for a single-page application with a payment form.
📊	Frontend for a merchant. PaySuper Dashboard is the BFF server and frontend to interact with all PaySuper related features for merchants.
🔧	Payment Form API Backend. PaySuper Checkout is a REST API backend for PaySuper Payment Form and a billing processing such as purchase receipts and others. Public API methods are documented in the API Reference.
🔧	Billing API Backend. PaySuper Management API is a REST API backend for PaySuper Dashboard and other management API methods. Public API methods are documented in the API Reference.
💳	Payment processing. PaySuper Billing Server is a micro-service that provides with any payment processing business logic.

Features

Conversion-optimized: The payment form loads instantly with a single-page layout.
Payment methods: VISA, Master Card, AMEX, JCB, China UnionPay, Bitcoin payments, Alipay, QIWI, Bank Wire Transfers.
Payment types: Simple Checkout, Items Checkout.
Authentication: Dynamic 3D Secure (ready for Strong Customer Authentication).
Localization: Localized for 24 languages.

Demo
Usage
Developing
Tests
Contributing
License

Demo

Try out the payment sample for a Simple Checkout and a Products Checkout.

Usage

Do not use this module directly, use paysuper-js-sdk instead. PaySuper JS SDK is designed to integrate a PaySuper Payment Form on your website or a game client.

Developing

The package requires Paysuper Dashboard backend to be served first:

yarn serve:be

The form runs on http://localhost:4040/ where you will be redirected to http://localhost:8080/order page. It's provided by Paysuper Dashboard backend.

Modal view

Add modal=true as a query parameter in the request URL to run the form in a modal view mode:

http://localhost:8080/order?modal=true

Dev data preset

Add devPreset=1 as a query parameter in the request URL to use a default development data preset (project + products combination):

http://localhost:8080/order?devPreset=1

Branches

We use the GitFlow as a branching model for Git.

Versioning

Dev version

https://cdn.pay.super.com/payform/dev/paysuper-form.js updates automatically by the develop branch updates.

Production release

https://cdn.pay.super.com/payform/latest/paysuper-form.js is a release version.

https://cdn.pay.super.com/payform/v0.23.2/paysuper-form.js updates with an actual version release by a tag starts with v* that is pushed into the repository.

Building

Compiles and hot-reloads for development

yarn serve

Compiles and minifies into single js-file

yarn build

####Like run build but with dist file size analysis

yarn check-size

Production

Define a mounting place by id attribute "id = paysuper-payment-form" and attach the form script library:

<div id="paysuper-payment-form"></div>
<script src="https://cdn.pay.super.com/payform/latest/paysuper-form.js"></script>

Testing

Run tests

yarn test

Run tests for development in a watch mode

yarn test:dev

Screenshot testing hint

https://static.protocol.one/paysuper/form/dev/tests/base-button-spec-js-base-button-vue-should-render-content-1-diff.png

Inside .travis.yml

#- set -e

- rclone copy tests/unit/__image_snapshots__/__diff_output__/ :s3://paysuper/form/dev/tests --s3-access-key-id=$S3_ACCESS_KEY --s3-secret-access-key=$S3_SECRET_KEY --s3-endpoint=$S3_HOST

Contributing, Feature Requests and Support

If you like this project then you can put a ⭐️ on it. It means a lot to us.

If you have an idea of how to improve PaySuper (or any of the product parts) or have general feedback, you're welcome to submit a feature request.

Chances are, you like what we have already but you may require a custom integration, a special license or something else big and specific to your needs. We're generally open to such conversations.

If you have a question and can't find the answer yourself, you can raise an issue and describe what exactly you're trying to do. We'll do our best to reply in a meaningful time.

We feel that a welcoming community is important and we ask that you follow PaySuper's Open Source Code of Conduct in all interactions with the community.

PaySuper welcomes contributions from anyone and everyone. Please refer to our contribution guide to learn more.

License

The project is available as open source under the terms of the GPL v3 License.

varshasachan/paysuper-payment-form