Grubpay.js ES Module
Use Grubpay.js as an ES module.
Note: To be
PCI compliant,
you must load Grubpay.js directly from https://api.grubpay.io/v4/grubpay.js. You cannot
include it in a bundle or host it yourself. This package wraps the global
Grubpay function provided by the Grubpay.js script as an ES module.
Installation
Use npm to install the Grubpay.js module:
npm install @grubpay/grubpay-jsor
yarn add @grubpay/grubpay-jsUsage
loadGrubpay
This function returns a Promise that resolves with a newly created Grubpay
instance once Grubpay.js has loaded. It takes the same parameters passed when
directly
initializing a Grubpay instance. If
necessary, it will load Grubpay.js for you by inserting the Grubpay.js script tag.
If you call loadGrubpay in a server environment it will resolve to null.
import { loadGrubpay } from '@grubpay/grubpay-js';
const options = {
// Only available in pay mode
// Default is true, when showing, customer can decide if he/she wants
// to save the card, and if decided to save, card's token will be returned
// to the merchant upon submitPayment()
showSaveCardCheckBox: false,
defaultCheckBoxValue: false, // This option is only available in pay mode
checkboxToggleStyle: true, // true, false Checkbox or Switch/Toggle style?
// these are all the appearance options
// For simple usage, you can just specify a theme and colorPrimary
appearance: {
theme: 'default', // 'default','simple','minimal'
dense: false, // true, false
dark: false, // true, false
variables: {
colorPrimary: 'rgb(43, 196, 107)',
},
},
};
const grubpayElement = await loadGrubpay('yourSecureId', options);Mount in html
// Mount grubpay form on html container with querySelector eg: #grubpay-container
let mounted = await grubpayElement.mount('#grubpay-container');Submit payment when user clicked your submit button
// Mount grubpay form on html container with querySelector eg: #grubpay-container
// If [forceSaveCard] is set to true, the card will be save regardless of user's choice on the checkbox
let res = await grubpayElement.submitPayment({ forceSaveCard: false });
if (res.success) {
// Do success logic
} else {
// Do fail or pending logic accordingly. Refer to [https://develop.grubpay.io] for detail
}For more information on how to use Grubpay.js, please refer to the Grubpay.js API guide.
TypeScript support
This package includes TypeScript declarations for Grubpay.js. We support projects using TypeScript versions >= 3.1.
The type declarations in
@grubpay/grubpay-js for these objects in will always track the
latest version of the Grubpay API. If you would like to use these types but are using an older version of the Grubpay
API, we recommend updating to the latest version, or ignoring and overriding the type definitions as necessary.
Note that we may release new versions of @grubpay/grubpay-js with small but backwards-incompatible fixes to the type
declarations. These changes will not affect Grubpay.js itself.
Make Grubpay.js is available everywhere
By default, this module will insert a <script> tag that loads Grubpay.js from
https://api.grubpay.io. If your want to let the script load before import the module, you can also add :
<!-- Somewhere in your site's <head> -->
<script src="https://api.grubpay.io/v4/grubpay.js"></script>