amwal-checkout-button-vue

This is a vue wrapper for the amwal-checkout-button package allowing it to be used directly in Vue projects

Installation.

npm i amwal-checkout-button-vue

Usage

In your main.js file, import amwal component library plugin and use it:

// src/main.js
import { ComponentLibrary } from 'amwal-checkout-button-vue';
createApp(App).use(ComponentLibrary).mount('#app')

In your page or component, you can now import and use your component wrappers:

<template>

  <amwal-checkout-button dark-mode="off" merchant-id="sandbox-amwal-7eb745d1-b917-47c9-8ad7-921f6c8b6f5f" amount="1"
    country-code="SA" locale="en" email-required='false' address-required='true'
    shipping-methods='[]' address-handshake='true' />

</template>


<script>

export default {
  mounted() {
    const amwalCheckoutButtonElement = document.querySelector('amwal-checkout-button');
    amwalCheckoutButtonElement.addEventListener('amwalAddressUpdate', (ev) => {
      console.log(ev.details)
      amwalCheckoutButtonElement.dispatchEvent(new Event('amwalAddressAck'))
      // if you want to report errors use the following
      // dispatchEvent(new CustomEvent('amwalAddressTriggerError', {
      // detail: {
      // description: 'Error in getting shipping methods',
      // error: err?.toString()
      // }
      // }))
    })
  }
}


</script>

Properties

Property	Attribute	Description	Type	Default
`addressHandshake`	`address-handshake`	addressHandshake specifies if address event and ack is activated ("true" or "false")	`boolean`	`false`
`addressRequired`	`address-required`	addressRequired specifies if shipping address is required or not ("true" or "false")	`boolean`	`true`
`allowedAddressCities`	--	allowedAddressCities specifies an array of allowed states for the address example {"SA":{"XX1":["Riady","Afif"],"XX2":["Jeddah","Makkah"]},"US":{"US1":["San Jose","San Francisco"],"US2":["New york"]}}	`{ [index: string]: CitySpecs; }`	`undefined`
`allowedAddressCountries`	--	allowedAddressCountries specifies an array of allowed countries for the address	`string[]`	`undefined`
`allowedAddressStates`	--	allowedAddressStates specifies an array of allowed states for the address example {"SA":{"XX1":"State 1","XX2":"State 2"},"US":{"US1":"State 1","US2":"State 2"}}	`{ [index: string]: StateSpecs; }`	`undefined`
`amount`	`amount`	The amount of money to charge the customer	`number`	`undefined`
`countryCode`	`country-code`	The country code of the merchant (e.g. SA)	`string`	`"SA"`
`darkMode`	`dark-mode`	Dark Mode: - on: turns on dark mode - off: turns on light mode - auto: use customer preference for dark mode	`"auto" \| "off" \| "on"`	`"off"`
`debug`	`debug`	debug flag for verbose printing of debug messages	`boolean`	`false`
`disabled`	`disabled`	disables the checkout button	`boolean`	`false`
`discount`	`discount`	discount specifies any discount to be applied	`number`	`0`
`discountDescription`	`discount-description`	discountDescription provides description for the discount	`string`	`undefined`
`fees`	`fees`	fees specifies any fees to be applied	`number`	`0`
`feesDescription`	`fees-description`	feesDescription provides description for the fees	`string`	`undefined`
`emailRequired`	`email-required`	emailRequired specifies if email address is required or not ("true" or "false"). Can only be true if addressRequired is true.	`boolean`	`false`
`enablePreCheckoutTrigger`	`enable-pre-checkout-trigger`	enable triggering a pre checkout click event to do initial tasks such as adding items to carts	`boolean`	`false`
`enablePrePayTrigger`	`enable-pre-pay-trigger`	enable triggering a pre pay event to do final task such as order creation	`boolean`	`false`
`initialAddress`	--	initialAddress specifies a default address, Country field is country code (two letter ISO country code)	`IAddress`	`undefined`
`initialEmail`	`initial-email`	initialEmail specifies a default email	`string`	`undefined`
`initialPhoneNumber`	`initial-phone-number`	initialPhone specifies a default phone number	`string`	`undefined`
`initialFirstName`	`initial-first-name`	initialFirstName specifies a default first name	`string`	`undefined`
`initial-first-name`	`initial-last-name`	initialLastName specifies a default last name	`string`	`undefined`
`label`	`label`	the label of the button. Either checkout for final checkout or quicky-buy for per product buy	`"checkout" \| "quick-buy"`	`"checkout"`
`locale`	`locale`	the language of the plugin. supported languages are Arabic ("ar") and English ("en")	`string`	`"en"`
`merchantId`	`merchant-id`	merchantId is the key to use obtained from https://merchant.sa.amwal.tech	`string`	`undefined`
`refId`	`ref-id`	refId a unique identifier to be included in the payment transaction	`string`	`undefined`
`uniqueRef`	`unique-ref`	uniqueRef a boolean to enforce the uniqueness of refId	`boolean`	`false`
`shippingMethods`	--	shippingMethods an array of shipping methods	`IShippingMethod[]`	`[]`
`showContinueShoppingButton`	`show-continue-shopping-button`	debug flag for verbose printing of debug messages	`boolean`	`false`
`taxes`	`taxes`	taxes specifies any additional taxes	`number`	`0`
`testEnvironment`	`test-environment`	this is an internal testing feature. don't specify	`string`	`undefined`
`installmentOptionsUrl`	`installment-options-url`	The installment options url is URL for the checkout page in the merchant website	`string`	`undefined`
`postcodeOptionalCountries`	`installment-options-url`	enable postal code required option	`string[]`	`undefined`

Events

Event	Description	Type
`amwalAddressUpdate`	amwalAddressUpdate is a dom event fired on address selection. It waits for either amwalAddressAck or amwalAddressTriggerError events to be sent back before proceeding to address update or aborting respectively.	`CustomEvent<IAddress>`
`amwalCheckoutSuccess`	amwalCheckoutSuccess is a dom event fired on success of payment. the event has orderId field which can be used to lookup transaction status at https://backend.sa.amwal.tech	`CustomEvent<AmwalCheckoutStatus>`
`amwalDismissed`	amwalDismissed is a dom event fired when the amwal modal or popup window is dismissed, event.detail indicates if it's successfull or not (boolean)	`CustomEvent<any>`
`amwalPreCheckoutTrigger`	amwalPreCheckoutTrigger is a dom event fired once amwal checkout button is clicked before a transaction is created. It is enabled if enablePreCheckoutTrigger is set. It waits for either amwalPreCheckoutTriggerAck or amwalPreCheckoutTriggerError events to be sent back before proceeding with the normal checkout flow.	`CustomEvent<ITransactionDetails>`
`amwalPrePayTrigger`	amwalPrePayTrigger is a dom event fired once payment button is clicked before payment is processed. It is enabled if enablePrePayTrigger is set. It waits for either amwalPrePayTriggerAck or amwalPrePayTriggerError events to be sent back before proceeding to payment or aborting respectively.	`CustomEvent<ITransactionDetails>`
`updateOrderOnPaymentsuccess`	updateOrderOnPaymentsuccess is a dom event fired on success of payment. the event has orderId field which can be used to lookup transaction status at https://backend.sa.amwal.tech	`CustomEvent<AmwalCheckoutStatus>`

Dependencies

Depends on

ion-text
ion-button
ion-icon

Graph

graph TD;
  amwal-checkout-button --> ion-text
  amwal-checkout-button --> ion-button
  amwal-checkout-button --> ion-icon
  ion-button --> ion-ripple-effect
  style amwal-checkout-button fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS