Vue Installation


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


npm i amwal-checkout-button-vue


  1. In your main.js file, import amwal component library plugin and use it:
// src/main.js
import { ComponentLibrary } from 'amwal-checkout-button-vue';
  1. In your page or component, you can now import and use your component wrappers:

  <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' />



export default {
  mounted() {
    const amwalCheckoutButtonElement = document.querySelector('amwal-checkout-button');
    amwalCheckoutButtonElement.addEventListener('amwalAddressUpdate', () => {
      // this.handleAddress()
      amwalCheckoutButtonElement.shippingMethods = [
        { "id": "1", "label": "one day shipment", "price": 20 },
        { "id": "2", "label": "one day shipment", "price": 10 },
      setTimeout(() => window.dispatchEvent(new Event('amwalAddressAck')), 1000);



addressHandshakeaddress-handshakeaddressHandshake specifies if address event and ack is activated ("true" or "false")booleanfalse
addressRequiredaddress-requiredaddressRequired specifies if shipping address is required or not ("true" or "false")booleantrue
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 addressstring[]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
amountamountThe amount of money to charge the customernumberundefined
countryCodecountry-codeThe country code of the merchant (e.g. SA)string"SA"
darkModedark-modeDark Mode: - on: turns on dark mode - off: turns on light mode - auto: use customer preference for dark mode"auto" | "off" | "on""off"
debugdebugdebug flag for verbose printing of debug messagesbooleanfalse
disableddisableddisables the checkout buttonbooleanfalse
discountdiscountdiscount specifies any discount to be appliednumber0
emailRequiredemail-requiredemailRequired specifies if email address is required or not ("true" or "false"). Can only be true if addressRequired is true.booleanfalse
enablePreCheckoutTriggerenable-pre-checkout-triggerenable triggering a pre checkout click event to do initial tasks such as adding items to cartsbooleanfalse
enablePrePayTriggerenable-pre-pay-triggerenable triggering a pre pay event to do final task such as order creationbooleanfalse
initialAddress--initialAddress specifies a default address, Country field is country code (two letter ISO country code)IAddressundefined
initialEmailinitial-emailinitialEmail specifies a default emailstringundefined
initialPhoneNumberinitial-phone-numberinitialPhone specifies a default phone numberstringundefined
labellabelthe label of the button. Either checkout for final checkout or quicky-buy for per product buy"checkout" | "quick-buy""checkout"
localelocalethe language of the plugin. supported languages are Arabic ("ar") and English ("en")string"en"
merchantIdmerchant-idmerchantId is the key to use obtained from
refIdref-idrefId a unique identifier to be included in the payment transactionstringundefined
shippingMethods--shippingMethods an array of shipping methodsIShippingMethod[][]
showContinueShoppingButtonshow-continue-shopping-buttondebug flag for verbose printing of debug messagesbooleanfalse
taxestaxestaxes specifies any additional taxesnumber0
testEnvironmenttest-environmentthis is an internal testing feature. don't specifystringundefined


amwalAddressUpdateamwalAddressUpdate is a dom event fired on address selection.CustomEvent<IAddress>
amwalCheckoutSuccessamwalCheckoutSuccess is a dom event fired on success of payment. the event has orderId field which can be used to lookup transaction status at<AmwalCheckoutStatus>
amwalDismissedamwalDismissed 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>
amwalPreCheckoutTriggeramwalPreCheckoutTrigger 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>
amwalPrePayTriggeramwalPrePayTrigger 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>
updateOrderOnPaymentsuccessupdateOrderOnPaymentsuccess is a dom event fired on success of payment. the event has orderId field which can be used to lookup transaction status at<AmwalCheckoutStatus>


Depends on

  • ion-text
  • ion-button
  • ion-icon


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