{"id":21440667,"url":"https://github.com/malaa-tech/react-native-moyasar-apple-pay","last_synced_at":"2025-07-14T16:31:40.858Z","repository":{"id":233242586,"uuid":"701537936","full_name":"Malaa-tech/react-native-moyasar-apple-pay","owner":"Malaa-tech","description":"iOS apple pay implementation \u0026 integration with Moyasar SDK for React Native 💲","archived":false,"fork":false,"pushed_at":"2024-10-31T10:11:25.000Z","size":1000,"stargazers_count":8,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-31T10:21:27.011Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Malaa-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-06T21:27:42.000Z","updated_at":"2024-10-31T09:24:15.000Z","dependencies_parsed_at":"2024-08-17T11:37:46.889Z","dependency_job_id":null,"html_url":"https://github.com/Malaa-tech/react-native-moyasar-apple-pay","commit_stats":null,"previous_names":["malaa-tech/react-native-moyasar-apple-pay"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Freact-native-moyasar-apple-pay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Freact-native-moyasar-apple-pay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Freact-native-moyasar-apple-pay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Freact-native-moyasar-apple-pay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Malaa-tech","download_url":"https://codeload.github.com/Malaa-tech/react-native-moyasar-apple-pay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225986029,"owners_count":17555570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-23T01:17:18.375Z","updated_at":"2024-11-23T01:17:19.006Z","avatar_url":"https://github.com/Malaa-tech.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-moyasar-apple-pay\n\niOS native apple pay implementation \u0026 integration with Moyasar SDK for React Native\n\n### Installation in managed Expo projects\n\n```\nyarn add react-native-moyasar-apple-pay \u0026\u0026 npx expo prebuild --clean\n```\n\n### Installation in bare React Native projects\n\nFor bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.\n\n\n### Add the package to your npm dependencies\n\n```\nyarn add react-native-moyasar-apple-pay \u0026\u0026 cd ios \u0026\u0026 npx pod-install\n```\n\n\n\n## Usage\n\nThis package is devided into 2 parts, ApplePay button \u0026 initiating ApplePay payments. you can use one or both as you wish.\n\nHere are some of the options you can implement ApplePay throw this package.\n\n\n\n### (Option 1: Recommended) ApplePayButton -\u003e define the ApplePay button, you can refer to `ApplePayButtonProps` type to know what props are supported.\n```ts\nimport * as MoyasarApplePay from \"moyasar-apple-pay\";\n\n\u003cMoyasarApplePay.ApplePayButton\n  buttonStyle=\"black\"\n  buttonType=\"plain\" // -\u003e check this to know all the available types. https://developer.apple.com/documentation/apple_pay_on_the_web/applepaybuttontype\n  radius={20}\n  amount={amount}\n  merchantIdentifier={Merchant} // -\u003e This is the ApplePay merchant id, you will have to issue one throw the apple developer account. Moyasar has a guide on how to issue it.  (https://docs.moyasar.com/apple-pay-using-developer-account)\n  moyasarPublicKey={MoyasarKeys.TEST} // -\u003e Moyasar API Public Token for ApplePay, you should get this from their dashboard\n  summaryItems={[ // -\u003e make sure the total is equal to the sum of the rest of the items.\n    {\n      itemAmount: amount,\n      itemTitle: \"Payment\",\n    },\n    {\n      itemAmount: amount,\n      itemTitle: \"Total\",\n    },\n  ]}\n  metaData={[ // -\u003e meta data that will be attached to the payment request.\n    {\n      key: \"payment_id\",\n      value: \"test-payment-id-native-button\",\n    },\n  ]}\n  countryCode=\"SA\"\n  currency=\"SAR\"\n  description=\"Malaa Technologies\"\n  isMadaSupported={true}\n  isAmexSupported={false}\n  isMasterCardSupported={false}\n  isVisaSupported={false}\n  isMerchant3DSEnabled={true}\n  onApplePayCompleted={(payload) =\u003e { // -\u003e weather payment has finished processing\n    console.log(\"onApplePayCompleted\", payload); // -\u003e payload includes status or error description\n  }}\n  onApplePayModalStatusChanged={(payload) =\u003e { // -\u003e weather payment modal is open/close\n    console.log(\"onApplePayModalStatusChanged\", payload);\n  }}\n  width={380}\n  height={50}\n/\u003e\n```\n\n### (Option 2) initiateApplePayPayment -\u003e initiating ApplePay payment directly without the apple pay button. (In case you would like to create your own flow23)\n\npayment params should be very similar to the payment props for the ApplePayButton\n```ts\nimport * as MoyasarApplePay from \"moyasar-apple-pay\";\n\n\u003cTouchableOpacity\n  onPress={async () =\u003e {\n    MoyasarApplePay.initiateApplePayPayment({\n      amount,\n      moyasarPublicKey: MoyasarKeys.PROD,\n      merchantIdentifier: Merchant,\n      countryCode: \"SA\",\n      currency: \"SAR\",\n      isMadaSupported: true,\n      isAmexSupported: false,\n      isMasterCardSupported: false,\n      isVisaSupported: false,\n      isMerchant3DSEnabled: true,\n      metaData: [\n        {\n          key: \"payment_id\",\n          value: \"test-payment-id-native-button\",\n        },\n      ],\n      description: \"Malaa Technologies\",\n      summaryItems: [\n        {\n          itemAmount: amount,\n          itemTitle: \"Payment\",\n        },\n        {\n          itemAmount: amount,\n          itemTitle: \"Total\",\n        },\n      ],\n    }).catch((e) =\u003e {\n      setStatus(e.message);\n    });\n  }}\n\u003e\n  \u003cText\u003ePay With Apple Pay on Production\u003c/Text\u003e\n\u003c/TouchableOpacity\u003e\n```\n\nin order to catch payment status or know weather the modal has appeared or not you will have to capture the events in a way similar to this\n\n```ts\nimport * as MoyasarApplePay from \"moyasar-apple-pay\";\n\nuseEffect(() =\u003e {\n  const closedListener = MoyasarApplePay.onApplePayModalStatusChanged(\n    (payload) =\u003e {\n      if (payload.value === \"open\") {\n        alert(\"Apple Pay Modal Opened\");\n      } else {\n        alert(\"Apple Pay Modal Closed\");\n      }\n    }\n  );\n\n  const completedListener = MoyasarApplePay.onApplePayCompleted((payload) =\u003e {\n    if (payload.status === \"paid\") {\n      alert(\"Payment Successful\");\n    } else {\n      alert(\"Payment Declined\");\n    }\n  });\n\n  return () =\u003e {\n    closedListener.remove();\n    completedListener.remove();\n  };\n}, []);\n```\n\nif you would like to know if payments are supported or not on the device, you can use `canMakePayments()` function\n\n```ts\nMoyasarApplePay.canMakePayments().then((canMakePayments) =\u003e {\n  if (canMakePayments) {\n    alert(\"You can make payments\");\n  } else {\n    alert(\"You can't make payments\");\n  }\n});\n```\n\n\n\n# Contributing\n\nContributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalaa-tech%2Freact-native-moyasar-apple-pay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalaa-tech%2Freact-native-moyasar-apple-pay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalaa-tech%2Freact-native-moyasar-apple-pay/lists"}