@akinon/pz-masterpass

pz-masterpass

Available Props

Masterpass Provider

File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx

<PluginModule
  component={Component.MasterpassProvider}
  props={{
    translations: {
      genericErrorMessage: 'An error occurred. Please try again later.'
    }
  }}
>
  ... ...
</PluginModule>

Additional Params

To add extra parameters, it can be added by passing additional Params property to the Masterpass Provider.

<PluginModule
  component={Component.MasterpassProvider}
  props={{
    additionalParams: {
      order_product_name_arr: ['TEST'],
      order_product_code_arr: ['TST'],
      order_qty_arr: ['1'],
      order_product_info_arr: ['test']
    }
  }}
>
  ... ...
</PluginModule>

Delete Confirmation Modal

File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx

<PluginModule
  component={Component.MasterpassDeleteConfirmationModal}
  props={{
    translations: {
      title: 'Are you sure you want to delete this card?',
      delete_button: 'Remove',
      cancel_button: 'Delete'
    }
  }}
/>

OTP Modal

File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx

<PluginModule
  component={Component.MasterpassOtpModal}
  props={{
    translations: {
      enter_the_verification_code: 'Enter the verification code',
      sms_code: 'SMS Code',
      verify: 'Verify',
      resend_sms: 'Resend SMS',
      // Or pass response code to show custom message
      5001: 'Please enter the OTP sent to your mobile number'
    }
  }}
/>

Link Modal

File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx

<PluginModule
  component={Component.MasterpassLinkModal}
  props={{
    translations: {
      use_masterpass_cards:
        'You have cards registered to your Masterpass account. Would you like to use your cards?',
      use: 'Use'
    }
  }}
/>

Card List

File Path: src/views/checkout/steps/payment/options/credit-card/index.tsx

<PluginModule
  component={Component.MasterpassCardList}
  props={{
    className: 'p-10',
    translations: {
      title: 'Select a card to pay with',
      pay_with_new_card: 'Pay with a new card',
      retryFetchCards: 'Retry Fetching Cards'
    }
  }}
/>

Card Registration

File Path: src/views/checkout/steps/payment/options/credit-card/index.tsx

<PluginModule
  component={Component.MasterpassCardRegistration}
  props={{
    // Do not remove getValues, it is used to get the form values
    getValues,
    className: 'mt-5 mb-10 sm:px-10',
    infoModalContent: <div>Lorem...</div>,
    infoModalIcon: <Icon name="info" />,
    translations: {
      enter_card_name: 'Enter card name',
      continue: 'Continue',
      pay_with_my_masterpass_card: 'Pay with my Masterpass card',
      terms_and_conditions: 'Masterpass terms and conditions',
      card_registration_consent:
        'I want to store my card information in the Mastercard infrastructure and use it again in my next purchase.'
    }
  }}
/>