react-native-tosspayments-v2
Version:
Unofficial Toss Payments V2 porting for React Native
2 lines • 4.99 kB
TypeScript
export declare const TossPaymentsV2WidgetHtml = "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta\n content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"\n name=\"viewport\"\n charset=\"UTF-8\"\n />\n <title>Toss Payments V2 Widget</title>\n <script src=\"https://js.tosspayments.com/v2/standard\"></script>\n <style></style>\n </head>\n <body>\n <div id=\"root\">\n <!-- \uACB0\uC81C UI -->\n <div id=\"payment-method\"></div>\n <!-- \uC774\uC6A9\uC57D\uAD00 UI -->\n <div id=\"agreement\"></div>\n <!-- \uACB0\uC81C\uD558\uAE30 \uBC84\uD2BC -->\n <button class=\"button\" id=\"payment-button\" style=\"margin-top: 30px\">\n \uACB0\uC81C\uD558\uAE30\n </button>\n </div>\n\n <script>\n const UNKNOWN_ERROR = {\n code: 'UNKNOWN',\n message: '\uC54C \uC218 \uC5C6\uB294 \uC5D0\uB7EC\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.',\n };\n const PARAMS = {};\n\n function sendMessageToRN(type, data) {\n window.ReactNativeWebView.postMessage(JSON.stringify({ type, data }));\n }\n\n function setParam(key, value) {\n PARAMS[key] = value;\n }\n\n async function requestPayment(widgets) {\n try {\n await widgets.requestPayment({\n successUrl: 'https://success',\n failUrl: 'https://fail',\n orderId: PARAMS['orderId'],\n orderName: PARAMS['orderName'],\n customerEmail: PARAMS['customerEmail'],\n customerName: PARAMS['customerName'],\n customerMobilePhone: PARAMS['customerMobilePhone'],\n taxFreeAmount: PARAMS['taxFreeAmount'],\n card: PARAMS['card']\n ? { taxExemptionAmount: PARAMS['card'].taxExemptionAmount }\n : undefined,\n });\n } catch (e) {\n sendMessageToRN(\n 'requestPaymentFail',\n typeof e === 'object' && e\n ? {\n code: e.code,\n message: e.message,\n }\n : UNKNOWN_ERROR\n );\n }\n }\n\n function onDocumentResized() {\n const container = document.getElementById('root');\n if (container) {\n sendMessageToRN('updateLayout', {\n scrollWidth: container.scrollWidth,\n scrollHeight: container.scrollHeight,\n clientWidth: container.clientWidth,\n });\n }\n }\n const documentResizeObserver = new ResizeObserver(() => {\n onDocumentResized();\n });\n documentResizeObserver.observe(document.getElementById('root'));\n\n async function init() {\n const button = document.getElementById('payment-button');\n // ------ \uACB0\uC81C\uC704\uC82F \uCD08\uAE30\uD654 ------\n const clientKey = PARAMS['clientKey'];\n const tossPayments = TossPayments(clientKey);\n\n // \uD68C\uC6D0 \uACB0\uC81C or \uBE44\uD68C\uC6D0 \uACB0\uC81C\n const customerKey = PARAMS['customerKey'];\n const widgets = tossPayments.widgets({\n customerKey: customerKey || TossPayments.ANONYMOUS,\n });\n\n // ------ \uC8FC\uBB38\uC758 \uACB0\uC81C \uAE08\uC561 \uC124\uC815 ------\n await widgets.setAmount({\n currency: 'KRW',\n value: PARAMS['amount'],\n });\n\n // ------ \uACB0\uC81C UI \uB80C\uB354\uB9C1 ------\n const paymentMethodWidget = await widgets.renderPaymentMethods({\n selector: '#payment-method',\n variantKey: PARAMS['paymentMethodsVariantKey'],\n });\n\n // ------ \uC774\uC6A9\uC57D\uAD00 UI \uB80C\uB354\uB9C1 ------\n const agreementWidget = await widgets.renderAgreement({\n selector: '#agreement',\n variantKey: PARAMS['agreementVariantKey'],\n });\n\n // ------ '\uACB0\uC81C\uD558\uAE30' \uBC84\uD2BC \uB204\uB974\uBA74 \uACB0\uC81C\uCC3D \uB744\uC6B0\uAE30 ------\n button.addEventListener('click', function () {\n requestPayment(widgets);\n });\n }\n\n async function handleMessage({ type, data }) {\n try {\n if (type === 'init') {\n await init();\n } else if (type === 'setParam') {\n setParam(data.key, data.value);\n }\n } catch (e) {\n sendMessageToRN(\n 'unknownError',\n typeof e === 'object' && e\n ? {\n code: e.code,\n message: e.message,\n }\n : UNKNOWN_ERROR\n );\n }\n }\n\n document.addEventListener('message', (event) => {\n handleMessage(event.data);\n });\n\n window.addEventListener('message', (event) => {\n handleMessage(event.data);\n });\n </script>\n </body>\n</html>\n";
//# sourceMappingURL=TossPaymentsV2WidgetHtml.d.ts.map