moyasar-payment-form 2.0.3

package/LICENCE.md

@@ -0,0 +1,7 @@
+Copyright 2020 Moyasar Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,695 @@
+# Moyasar Payment Form
+
+# Usage
+
+Sample Usage:
+
+```html
+<!-- We must provide an empty element that moyasar form will be mounted into -->
+<div class="mysr-form"></div>
+
+<script>
+  Moyasar.init({
+      // Root must be an Element or a string with a valid CSS selector to an element
+      element: '.mysr-form',
+
+      // Set the form language
+      // Default: <taken from current page>, falls back to en
+      language: 'ar',
+
+      // Provide additional translations
+      // Default: en and ar
+      translations: [
+          'de': {
+              // This is just a sample
+              // Checkout resources/lang/en.json for the full list
+              'error.authentication_error': 'Authentifizierungsfehler, Dienst ist jetzt nicht verfügbar'
+          }
+      ],
+
+      // Set predefined option to ApplePay and card pay buttons, defaults to pay
+      payment_button_type: 'buy'
+
+      // Amount to pay in smallest currency unit (minor)
+      amount: 100,
+
+      // Currency
+      currency: 'SAR',
+
+      // Country (Needed for Apple Pay to function)
+      country: 'SA',
+
+      // Description of the payment
+      description: 'Testing Moyasar payment form',
+
+      // Publishable API key
+      publishable_api_key: 'pk_live_some-random-string',
+
+      // Supported networks (Used to display icons in payment form, and to accept only supported networks in Apple Pay)
+      // default: ['mada', 'visa', 'mastercard']
+      supported_networks: [
+          'mada',
+          'visa',
+          'mastercard',
+          'amex',
+      ],
+
+      // Form payment methods, default: ['creditcard', 'applepay', 'stcpay']
+      payment_methods: [
+          'creditcard',
+          'applepay',
+          'stcpay'
+      ],
+
+      // Optional: Used for doing any job before payment is submitted, can also cancel payment
+      before_payment_callback: function (proceed, abort) {
+          if (1 > 2) {
+              proceed();
+          } else {
+              abort();
+          }
+      },
+
+      // When a payment is initiated, the library will use this handler
+      // Types:
+      //        1 - string, a URL that will recieve the payment object (HTTP method: POST)
+      //        2 - function, will be called with the payment object as an argument
+      on_payment_init: '/checkout/payments/initiated',
+
+      // When a payment is completed (either failed or succeeded), the library will use this handler
+      // Types:
+      //        1 - string, a URL that will recieve the payment object (HTTP method: POST)
+      //        2 - function, will be called with the payment object as an argument
+      on_payment_complete: '/checkout/payments/completed',
+
+      // Moyasar's form callback URL, will be used to redirect the user when the payment has finished (Required)
+      callback_url: 'https://my-store.xyz/checkout/payments/redirect',
+
+      // Optional: can be used to control the redirection behaviour
+      on_redirect: function (url) {
+
+      },
+
+      // Apple Pay Configurations (Required when ApplePay is enabled)
+      apple_pay: {
+          // Payment label
+          label: 'My Store XYZ',
+
+          // This endpoint must be implemented on the users backend
+          // A JSON object will be posted to the URL (HTTP method: POST)
+          // JSON: {validation_url: 'https://example.apple.com/validation/url'}
+          // The server must use the given URL and make a POST request to it using
+          // the merchant validation certificate (In SSL options)
+          // The returned JSON object from Apple must be returned to the browser as is
+          // with "Content-Type: application/json" header set in order for the library
+          // to parse it
+          validate_merchant_url: '/checkout/payments/apple-pay/validate-merchant',
+
+          // Optional: Used to provide merchant capabilities for moyasar
+          merchant_capabilities: [
+
+          ],
+
+          // Optional: Used to control Apple Pay JS version
+          // Default: 6
+          version: 9,
+
+          // Optional: Used to handle authorization of payment
+          // Args: payment object is passed from Apple to handler
+          on_authorize: function (paymentObject) {
+              // Manually handle auth (send it to Moyasar)
+          }
+      },
+
+      // Optional, (used for development purposes only, please don't use it)
+      base_url: 'https://api.moyasar.com',
+
+      // Optional: Used to handle failures of the form
+      on_failure: function (error) {
+
+      }
+  });
+</script>
+```
+
+## Configuration
+
+Here is a list of acceptable configurations values for the form.
+
+### Element (element) [Required]
+
+Element must be a valid CSS selector for the target element for form to be mounted in. Or
+can be an instance of DOM element `Element`. Here is an example:
+
+```javascript
+element: '.payment-form', // Using a class
+element: '#payment-form', // Using an ID
+element: document.querySelector('.payment-form'), // or just providing an Element instance
+```
+
+### Language (language) [Optional]
+
+This option can be used to set display language for the form. If left empty,
+language will be inferred from `<html>` element then fallback to `en` if it cannot
+be inferred. Here is an example
+
+```javascript
+language: 'en', // Displaying the form in English
+language: 'ar', // Displaying the form in Arabic
+language: 'fr', // Displaying the form in French (You need to provide your own translations)
+```
+
+### Translations (translations) [Optional]
+
+This option is used to add more translations to the form. Here is an example:
+
+```javascript
+translations: {
+    fr: {
+        "validation.should_be_english_letters_only": "Le nom ne peut avoir que l'alphabet anglais et des espaces",
+        "validation.first_and_last_name_required": "Le prénom et le nom de famille sont obligatoires",
+    }
+},
+```
+
+### Payment Button Type (payment_button_type) [Optional]
+
+This options allow to set predefined text for pay buttons - in card from and ApplePay (if configured).
+
+```javascript
+payment_button_type: 'plain'; // Will display no additional text, only amount
+payment_button_type: 'pay'; // Will display "Pay" label
+payment_button_type: 'buy'; // Will display "Buy with" label
+payment_button_type: 'donate'; // Will display "Donate with" label
+payment_button_type: 'book'; // Will display "Book with" label
+payment_button_type: 'check-out'; // Will display "Check out with" label
+payment_button_type: 'subscribe'; // Will display "Subscribe with" label
+payment_button_type: 'add-money'; // Will display "Add money with" label
+payment_button_type: 'contribute'; // Will display "Contribute with" label
+payment_button_type: 'order'; // Will display "Order with" label
+payment_button_type: 'reload'; // Will display "Reload with" label
+payment_button_type: 'rent'; // Will display "Rent with" label
+payment_button_type: 'support'; // Will display "Support with" label
+payment_button_type: 'tip'; // Will display "Tip with" label
+payment_button_type: 'top-up'; // Will display "Top Up with" label
+payment_button_type: 'continue'; // Will display "Continue with payment" label
+```
+
+### Publishable API Key (publishable_api_key) [Required]
+
+The publishable API key is required in order to communicate with Moyasar's API
+and complete the payment request. Here is an example:
+
+You can get both keys from your account at [Moyasar Dashboard](https://dashboard.moyasar.com)
+
+```javascript
+// Live key is used in production environemnt and will require a valid SSL certificate
+publishable_api_key: 'pk_live_AQpxBV3a29qm392e4mkasjnRhzADVrxSq5ydVNui',
+
+// This will put the form in testing mode and allow you to test without an SSL certificate
+publishable_api_key: 'pk_test_AQpxBV3a29qm392e4mrT4Fawd3ADVrxSq5ydVNui',
+```
+
+### Payment Methods (methods) [Optional]
+
+This is used to enable and disable payment methods on the form.
+By default, all the methods are enabled, which are:
+
+- Credit Card (creditcard)
+- Apple Pay (applepay)
+- Stc Pay (stcpay)
+
+```javascript
+// Enabling only Credit Card and Apple Pay
+methods: ['creditcard', 'applepay'];
+```
+
+### Amount (amount) [Required]
+
+This sets the amount for user to pay.
+Amount must be in minor unit of selected currency, e.g. if we want to
+get a payment of $10 then we must represent the amount in Cents 1000.
+Here is an example:
+
+```javascript
+amount: 1000;
+```
+
+### Currency (currency) [Required]
+
+This sets which currency is used for the amount to be paid.
+Here is an example:
+
+```javascript
+currency: 'USD', // Get payment in US Dollars
+currency: 'SAR', // Get payment in Saudi Riyals
+currency: 'JPY', // Get Payment in Japanese Yen
+```
+
+The currency must be in ISO 3166-1 alpha-3 country code format.
+
+### Description (description) [Required]
+
+This option is used to set a description to be sent along other payment information
+to Moyasar's API. Here is an example:
+
+```javascript
+description: 'Payment for Order #34321';
+```
+
+The description can be any string you want.
+
+### Callback URL (callback_url) [Required]
+
+This URL is used by Moyasar to redirect the user back after the payment is either
+successful, or the user has completed 3D stage.
+
+### Supported Networks (supported_networks) [Optional]
+
+This optional configuration option is used to set accepted card networks
+in the form. The default value is all networks except `amex`.
+
+Supported Networks:
+
+- Mada (mada)
+- Visa (visa)
+- Mastercard (mastercard)
+- American Express (amex)
+
+Example:
+
+```javascript
+supported_networks: [
+    'mada',
+    'visa',
+    'mastercard',
+    'amex'
+],
+```
+
+### Fixed Width (fixed_width) [Optional]
+
+This option is used to limit the form width to only `360px` and it is
+enabled by default. To disable this just set it to `false`.
+
+Example:
+
+```javascript
+fixed_width: false,
+```
+
+### On Initiating (on_initiating) [Optional]
+
+This `Promise` based callback is used to handle the event when a user starts a payment method
+and before any information is sent to Moyasar's API. You can use this to perform
+any last second validations or to prepare something.
+
+When you handle this event, you can return a `false` to stop the payment process,
+or a dictionary that is either empty or contains `description` or `callback_url`
+values to update the form configurations if you need to.
+
+Here is an example to stop the form from submitting:
+
+```javascript
+on_initiating: async () => {
+  return false;
+};
+```
+
+Make the form proceed:
+
+```javascript
+on_initiating: async function () {
+    return {};
+}
+```
+
+### On Completed (on_completed) [Optional]
+
+This event is fired when a payment is created by Moyasar's API. You can,
+intercept the payment to save it or do any other processing, by providing a `Promise` based callback;
+
+Example:
+
+```javascript
+on_completed: async function (payment) {
+    // savePayment is just an example, your usage may vary.
+    savePayment(payment)
+}
+```
+
+### On Failure (on_failure) [Optional]
+
+This event is used to handle payment failure, you will get a `string`
+if there is an error.
+
+Example:
+
+```javascript
+on_failure: async (error) =>
+  new Promise((resolve, reject) => {
+    // Handle error
+    resolve();
+  });
+```
+
+### On Redirect (on_redirect) [Optional]
+
+When the form finishes it work and is about to redirect the user, you can
+intercept this action and handle redirection manually. Here is an example:
+
+```javascript
+on_redirect: async (url) =>
+  new Promise((resolve, reject) => {
+    // Handle redirection manually
+    resolve();
+  });
+```
+
+## Credit Card Configuration Options (credit_card)
+
+This section describes Credit Card related options.
+
+### Manual (manual)
+
+This option allows you to only authorize the payment without capturing it. You will need to capture the payment later
+using Moyasar API. Make a post `POST` to `/v1/payments/{id}/capture`.
+
+Note: you need to enable this feature before using it.
+
+```javascript
+credit_card: {
+  manual: true;
+}
+```
+
+### Save Card (save_card)
+
+This option allows you to tokenize the card while completing the transaction.
+
+Note: you need to enable this feature before using it.
+
+```javascript
+credit_card: {
+  save_card: true;
+}
+```
+
+## Apple Pay Configurations (apple_pay) [Required if Apple Pay is activated]
+
+This is an object that contains Apple Pay specific configurations. Here is
+an example:
+
+```javascript
+apple_pay: {
+  // Apple Pay Configurations
+}
+```
+
+### Version (version) [Optional]
+
+This is used to specify Apple Pay JS version. Default is `6`. Here is an example:
+
+```javascript
+apple_pay: {
+  version: 7;
+}
+```
+
+### Country (country) [Required]
+
+Apple Pay merchant country. If other payment methods (Samsung Pay and/or Google Pay) are active, this can be set in `payment_options.country` to unify settings between multiple payments.
+
+```javascript
+apple_pay: {
+  country: 'SA';
+}
+```
+
+or
+
+```javascript
+payment_options: {
+  country: 'SA';
+}
+```
+
+### Merchant Capabilities (merchant_capabilities) [Optional]
+
+Merchant capabilities to activate for this Apple Pay session. Default is:
+
+```javascript
+apple_pay: {
+    merchant_capabilities: [
+        'supports3DS',
+        'supportsCredit',
+        'supportsDebit'
+    ],
+},
+```
+
+### Label (label) [Required]
+
+Label to be displayed in the payment modal. If other payment methods (Samsung Pay and/or Google Pay) are active, this can be set in `payment_options.label` to unify settings between multiple payments. Here is an example:
+
+```javascript
+apple_pay: {
+  label: 'Ali Hardware Store';
+}
+```
+
+or
+
+```javascript
+payment_options: {
+  label: 'Ali Hardware Store';
+}
+```
+
+### Merchant Validation URL (validate_merchant_url) [Optional]
+
+This URL is used to initiate the Apple Pay session. A `POST` request will made
+to the specified endpoint with a `JSON` object containing the URL. Here is the `JSON`
+snippet:
+
+```json
+{
+  "validation_url": "https://url.to.applepay.tld/something/somthing"
+}
+```
+
+The endpoint must return a response with the header `Content-Type: application/json` and
+the response return from Apple as is.
+
+Here is the configuration example:
+
+```javascript
+apple_pay: {
+  validate_merchant_url: 'https://mystore.test/applepay/validate-merchant';
+}
+```
+
+### Supported Countries (supported_countries) [Optional]
+
+An array of countries that cards are allowed from.
+
+Default: `['SA']`. Only Saudi Arabia is enabled by default to prevent fraudulent transactions, you may enable more countries at your own risk.
+
+```javascript
+apple_pay: {
+  supported_countries: ['SA', 'US'];
+}
+```
+
+## Google Pay Configurations (google_pay) [Required if Google Pay is activated]
+
+This is an object that contains Google Pay specific configurations. Here is
+an example:
+
+```javascript
+google_pay: {
+  // Google Pay Configurations
+}
+```
+
+### Service ID (merchant_id) [Required]
+
+This is used to specify Google Pay unique merchant ID:
+
+```javascript
+google_pay: {
+  merchant_id: 'dcc1cbb25d6a470bb42926';
+}
+```
+
+### Label (label) [Required]
+
+Label to be displayed in the payment modal. If other payment methods (Samsung Pay and/or Apple Pay) are active, this can be set in `payment_options.label` to unify settings between multiple payments. Here is an example:
+
+```javascript
+google_pay: {
+  label: 'Ali Hardware Store';
+}
+```
+
+or
+
+```javascript
+payment_options: {
+  label: 'Ali Hardware Store';
+}
+```
+
+### Country (country) [Required]
+
+Google Pay merchant country. If other payment methods (Samsung Pay and/or Apple Pay) are active, this can be set in `payment_options.country` to unify settings between multiple payments.
+
+```javascript
+google_pay: {
+  country: 'SA';
+}
+```
+
+or
+
+```javascript
+payment_options: {
+  country: 'SA';
+}
+```
+
+### Gateway Merchant ID (gateway_merchant_id) [Optional]
+
+A optional string that can be used to provide ID provided by your merchant gateway.
+
+```javascript
+google_pay: {
+  gateway_merchant_id: 'YOUR_GATEWAY_MERCHANT_ID';
+}
+```
+
+### Environment (environment) [Optional]
+
+A optional string that can be either `TEST` or `PRODUCTION` to manually define payment environment. Defaults value: `PRODUCTION`.
+
+```javascript
+google_pay: {
+  environment: 'TEST';
+}
+```
+
+## Samsung Pay Configurations (samsung_pay) [Required if Samsung Pay is activated]
+
+This is an object that contains Samsung Pay specific configurations. Here is
+an example:
+
+```javascript
+samsung_pay: {
+  // Samsung Pay Configurations
+}
+```
+
+### Service ID (service_id) [Required]
+
+This is used to specify Samsung Pay unique merchant ID:
+
+```javascript
+samsung_pay: {
+  service_id: 'dcc1cbb25d6a470bb42926';
+}
+```
+
+### Label (label) [Required]
+
+Label to be displayed in the payment modal. If other payment methods (Apple Pay and/or Google Pay) are active, this can be set in `payment_options.label` to unify settings between multiple payments. Here is an example:
+
+```javascript
+samsung_pay: {
+  label: 'Ali Hardware Store';
+}
+```
+
+or
+
+```javascript
+payment_options: {
+  label: 'Ali Hardware Store';
+}
+```
+
+### Country (country) [Required]
+
+Samsung Pay merchant country. If other payment methods (Apple Pay and/or Google Pay) are active, this can be set in `payment_options.country` to unify settings between multiple payments.
+
+```javascript
+samsung_pay: {
+  country: 'SA';
+}
+```
+
+or
+
+```javascript
+payment_options: {
+  country: 'SA';
+}
+```
+
+### Order Number (order_number) [Required]
+
+Order number of the transaction.
+
+```javascript
+samsung_pay: {
+  order_number: 'DSTRF3457dsgTY';
+}
+```
+
+### Version (version) [Optional]
+
+This is used to specify Samsung Pay version. Default is `2`. Here is an example:
+
+```javascript
+samsung_pay: {
+  version: 2;
+}
+```
+
+### ID (id) [Optional]
+
+This is the id value registered with Moyasar
+
+```javascript
+samsung_pay: {
+  id: 'idProvidedByPG';
+}
+```
+
+### Environment (environment) [Optional]
+
+A optional string that can be either `STAGE` or `PRODUCTION` to manually define payment environment. Defaults value: `PRODUCTION`.
+
+```javascript
+samsung_pay: {
+  environment: 'STAGE';
+}
+```
+
+### Payment Options (payment_options) [Optional]
+
+Optional object to share data between different payments methods.
+
+```javascript
+payment_options: {
+  label: 'Ali Hardware Store',
+  country: 'SA',
+}
+```
+
+# Contribution
+
+Please feel free to improve on this library by making a PR.
+
+# License
+
+This software is licensed under the [MIT](LICENSE.md) license.

package/dist/__vite-browser-external-DYxpcVy9.mjs

@@ -0,0 +1,11 @@
+/**
+ * name: moyasar-payment-form
+ * version: v2.0.2
+ * description: Moyasar payment form utilities
+ * author: Moyasar Development Team
+ * homepage: https://docs.moyasar.com/credit-card
+ */
+const e = {};
+export {
+  e as default
+};