"use strict"; const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { p: "p", ...props.components }, {AntomChannelFilterV2, AntomChunk, AntomCommand, AntomCondition, AntomDownloadBtn, AntomFile, AntomIntegrationBuilder, AntomPartial, AntomStep, AntomStepSection, Heading, InlineContent, Link, List, ListItem, MdxDocument, Paragraph, Quote, Spacer, Tab, TabGroup, Text} = _components; if (!AntomChannelFilterV2) _missingMdxReference("AntomChannelFilterV2", true); if (!AntomChunk) _missingMdxReference("AntomChunk", true); if (!AntomCommand) _missingMdxReference("AntomCommand", true); if (!AntomCondition) _missingMdxReference("AntomCondition", true); if (!AntomDownloadBtn) _missingMdxReference("AntomDownloadBtn", true); if (!AntomFile) _missingMdxReference("AntomFile", true); if (!AntomIntegrationBuilder) _missingMdxReference("AntomIntegrationBuilder", true); if (!AntomPartial) _missingMdxReference("AntomPartial", true); if (!AntomStep) _missingMdxReference("AntomStep", true); if (!AntomStepSection) _missingMdxReference("AntomStepSection", true); if (!Heading) _missingMdxReference("Heading", true); if (!InlineContent) _missingMdxReference("InlineContent", true); if (!Link) _missingMdxReference("Link", true); if (!List) _missingMdxReference("List", true); if (!ListItem) _missingMdxReference("ListItem", true); if (!MdxDocument) _missingMdxReference("MdxDocument", true); if (!Paragraph) _missingMdxReference("Paragraph", true); if (!Quote) _missingMdxReference("Quote", true); if (!Spacer) _missingMdxReference("Spacer", true); if (!Tab) _missingMdxReference("Tab", true); if (!TabGroup) _missingMdxReference("TabGroup", true); if (!Text) _missingMdxReference("Text", true); return _jsx(MdxDocument, { children: _jsx("div", { className: "idocs-mdx-document-zh", children: _jsxs(AntomIntegrationBuilder, { channelFilter: _jsx(AntomChannelFilterV2, { data: [{ label: 'Integration Types:', key: 'integration_type', value: ['Payment Element', 'Hosted CKP', 'Embedded CKP', 'API', 'SDK'] }, { label: 'Platforms:', key: 'platform', value: [{ when: { integration_type: 'Embedded CKP' }, value: ['Web'] }, { when: { integration_type: 'Hosted CKP' }, value: ['Web'] }, { when: { integration_type: 'Payment Element' }, value: ['Web', 'iOS', 'Android'] }, { when: {}, value: ['Web', 'iOS', 'Android'] }] }, { label: 'Clients:', key: 'client', value: [{ when: { integration_type: 'API', platform: 'Web' }, value: ['HTML'] }, { when: { integration_type: 'Embedded CKP', platform: 'Web' }, value: ['HTML'] }, { when: { integration_type: 'Hosted CKP', platform: 'Web' }, value: ['HTML'] }, { when: { integration_type: 'Payment Element', platform: 'Web' }, value: ['HTML'] }, { when: { integration_type: 'SDK', platform: 'Web' }, value: ['HTML', 'React', 'Vue'] }, { when: { platform: 'iOS' }, value: ['Objective-C'] }, { when: { platform: 'Android' }, value: ['Java'] }, { when: {}, value: ['HTML', 'React', 'Vue', 'Java', 'Objective-C'] }] }, { label: 'Servers:', key: 'server', value: ['Java', 'Python', 'PHP', 'Go', '.NET'] }] }), downloadFileName: 'antom-checkout-payment-sample.zip', children: [_jsx(AntomCondition, { when: { integration_type: 'API' }, children: _jsxs(Paragraph, { children: [_jsxs(_components.p, { children: ["Create a smooth checkout process by using Antom's payment capabilities. Antom offers client- and server-side sample code for", _jsx(Spacer, { len: 1 })] }), _jsx(Link, { href: 'https://docs.antom.com/ac/cashierpay/apm_api', target: "_blank", children: _jsx(_components.p, { children: "API-only integration" }) }), _jsx(_components.p, { children: ", to help you easily build a checkout experience that accepts various payment methods." })] }) }), _jsx(AntomCondition, { when: { integration_type: 'SDK' }, children: _jsxs(Paragraph, { children: [_jsxs(_components.p, { children: ["Create a smooth checkout process by using Antom's payment capabilities. Antom offers client- and server-side sample code for", _jsx(Spacer, { len: 1 })] }), _jsx(Link, { href: 'https://docs.antom.com/ac/cashierpay/apm', target: "_blank", children: _jsx(_components.p, { children: "SDK integration" }) }), _jsx(_components.p, { children: ", to help you easily build a checkout experience that accepts various payment methods." })] }) }), _jsx(AntomCondition, { when: { integration_type: 'Embedded CKP' }, children: _jsxs(Paragraph, { children: [_jsxs(_components.p, { children: ["Integrate the", _jsx(Spacer, { len: 1 })] }), _jsx(Link, { href: 'https://docs.antom.com/ac/cashierpay/embeddedckp', target: "_blank", children: _jsx(_components.p, { children: "embedded Antom Checkout Page (CKP)" }) }), _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "with minimal code. Upon a payment request, the Antom SDK utilizes the payment details to generate the Checkout Page. Critically, this page remains within the your domain, preserving a consistent and smooth experience for the buyer."] })] }) }), _jsx(AntomCondition, { when: { integration_type: 'Hosted CKP' }, children: _jsxs(Paragraph, { children: [_jsxs(_components.p, { children: ["Integrate the", _jsx(Spacer, { len: 1 })] }), _jsx(Link, { href: 'https://docs.antom.com/ac/cashierpay/HOSTEDCKP', target: "_blank", children: _jsx(_components.p, { children: "hosted Antom Checkout Page (CKP)" }) }), _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "using minimal code, helping your buyers to complete the payment by clicking a designated button on your website and redirecting to Antom's payment page."] })] }) }), _jsx(AntomCondition, { when: { integration_type: 'Payment Element' }, children: _jsxs(Paragraph, { children: [_jsx(Link, { href: 'https://docs.antom.com/ac/cashierpay/element', target: "_blank", children: _jsx(_components.p, { children: "Antom Payment Element" }) }), _jsxs(_components.p, { children: [' ', "is an SDK-based payment component designed to provide you with a seamless payment experience, thereby enhancing conversion rates. You can also use the"] }), _jsxs(Link, { href: 'https://docs.antom.com/ac/cashierpay/appearance', target: "_blank", children: [' ', _jsx("i", { children: "appearance" }), ' '] }), _jsx(_components.p, { children: "parameter to customize the visual style and layout of the payment interface, ensuring it matches your website's design." })] }) }), _jsx(AntomDownloadBtn, {}), _jsx(AntomStepSection, { number: 1, title: 'Set up the server' }), _jsxs(AntomStep, { id: 'install-antom-library', when: { server: 'Java' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "Install the Antom Java library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom Java library, add the dependency to your" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "pom.xml", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "file. You can find the latest_version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-java', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: ` com.alipay.global.sdk global-open-sdk-java {latest_version} `, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-java', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "to install the Antom Java library." })] }) })] })] }), _jsxs(AntomStep, { id: 'install-antom-library', when: { server: 'Python' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "Install the Antom Python library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom Python library, add the dependency to your" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "requirements.txt", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "file. You can find the latest_version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-python', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: `global-open-sdk-python=={latest_version}`, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-python', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub", ' '] }) }), _jsx(_components.p, { children: "to install the Antom Python library." })] }) })] })] }), _jsxs(AntomStep, { id: 'install-antom-library', when: { server: 'PHP' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "Install the Antom PHP library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom PHP library, add the dependency to your" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "composer.json", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "file. You can find the latest_version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-php', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: `{ "require": { "antom/global-open-sdk-php": "{latest_version}" } }`, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-php', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub", ' '] }) }), _jsx(_components.p, { children: "to install the Antom PHP library." })] }) })] })] }), _jsxs(AntomStep, { id: 'install-antom-library', when: { server: 'Go' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "Install the Antom Go library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom Go library, add the dependency to your" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "go.mod", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "file. You can find the latest_version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-go', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: `require ( github.com/alipay/global-open-sdk-go v{latest_version} )`, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-go', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "to install the Antom Go library." })] }) })] })] }), _jsxs(AntomStep, { id: 'install-antom-library', when: { server: '.NET' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "Install the Antom .NET library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom .NET library, add the dependency to your" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), ".csproj", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "file. You can find the latest_version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-dotnet', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: ` `, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-dotnet', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub", ' '] }) }), _jsx(_components.p, { children: "to install the Antom .NET library." })] }) })] })] }), _jsxs(AntomStep, { id: `get-integration-resources`, label: `server`, children: [_jsx(Heading, { level: 3, anchored: true, id: `get-integration-resources`, children: _jsx(_components.p, { children: "Get integration resources" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Get integration resources from the" }), _jsx(Link, { href: ' https://dashboard.antom.com/global-payments/developers/quickStart', target: "_blank", children: _jsxs(_components.p, { children: [' ', "Developer", ' '] }) }), _jsx(_components.p, { children: "section in Antom Dashboard. Configure the obtained integration resources in your application and these resources are to be further used when sending requests to the Antom server." })] })] }), _jsxs(AntomStep, { id: `create-a-payment-session`, label: `server`, when: { integration_type: 'SDK' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `create-a-payment-session`, children: _jsx(_components.p, { children: "Create a payment session" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint on your server to call the" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/session_cashier", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "createPaymentSession", _jsx(Spacer, { len: 1 })] }) }) }), _jsx(_components.p, { children: "API. When sending the request, specify the payment method, payment amount, currency, payment request ID, order information, and other required information for this payment." })] })] }), _jsxs(AntomStep, { id: `create-a-payment-session`, label: `server`, when: { integration_type: 'Embedded CKP' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `create-a-payment-session`, children: _jsx(_components.p, { children: "Create a payment session" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint on your server to call the" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/session_cashier", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "createPaymentSession", _jsx(Spacer, { len: 1 })] }) }) }), _jsx(_components.p, { children: "API. When sending the request, specify the payment amount, currency, payment request ID, order information, and other required information for this payment." })] })] }), _jsxs(AntomStep, { id: `create-a-payment-session`, label: `server`, when: { integration_type: 'Hosted CKP' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `create-a-payment-session`, children: _jsx(_components.p, { children: "Create a payment session" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint on your server to call the" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/session_cashier", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "createPaymentSession", _jsx(Spacer, { len: 1 })] }) }) }), _jsx(_components.p, { children: "API. When sending the request, specify the payment amount, currency, payment request ID, order information, and other required information for this payment." })] })] }), _jsxs(AntomStep, { id: `create-a-payment-session`, label: `server`, when: { integration_type: 'Payment Element' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `create-a-payment-session`, children: _jsx(_components.p, { children: "Create a payment session" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint on your server to call the" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/session_cashier", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "createPaymentSession", _jsx(Spacer, { len: 1 })] }) }) }), _jsx(_components.p, { children: "API. When sending the request, specify the payment amount, currency, payment request ID, order information, and other required information for this payment." })] })] }), _jsxs(AntomStep, { id: 'initiate-a-payment-request', label: `server`, when: { integration_type: 'API' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `initiate-a-payment-request`, children: _jsx(_components.p, { children: "Initiate a payment request" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint on your server to call the" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/payment_cashier", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [' ', "pay", ' '] }) }) }), _jsx(_components.p, { children: "API. When sending the payment request, specify the payment method, payment amount, currency, payment request ID, order information, and other required information for this payment." })] })] }), _jsxs(AntomStep, { id: 'specify-the-payment-redirect-url', label: `server`, children: [_jsx(Heading, { level: 3, anchored: true, id: `specify-the-payment-redirect-url`, children: _jsx(_components.p, { children: "Specify the payment redirection URL" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Set the payment redirection URL, where the buyer is to be redirected after completing the payment. You can guide the buyer with further actions on this page." }) })] }), _jsxs(AntomStep, { id: `inquire-payment-result`, label: `server`, children: [_jsx(Heading, { level: 3, anchored: true, id: `inquire-payment-result`, children: _jsx(_components.p, { children: "Inquire about the payment result" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint on your server to get the payment result by calling the" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/paymentri_online", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [' ', "inquiryPayment", ' '] }) }) }), _jsx(_components.p, { children: "API. Display the payment result when needed." })] })] }), _jsxs(AntomStep, { id: 'receive-payment-notification', label: `server`, children: [_jsx(Heading, { level: 3, anchored: true, id: `receive-payment-notification`, children: _jsx(_components.p, { children: "Receive payment notifications" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint on your server to receive notifications from Antom's" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/paymentrn_online", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [' ', "notifyPayment", ' '] }) }) }), _jsx(_components.p, { children: "API, including payment results, payment time and payment amount, etc. You can update the payment status and save the information to your database for subsequent queries." })] })] }), _jsx(AntomStepSection, { number: 2, title: 'Build the checkout page on the client' }), _jsxs(AntomStep, { id: 'install-antom-sdk', when: { platform: 'Web', client: 'html', integration_type: 'SDK' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'install-antom-sdk', children: _jsx(_components.p, { children: "Install Antom SDK" }) }), _jsx(Paragraph, { children: "Install the SDK resource package via CDN." }), _jsx(Paragraph, { children: _jsx(AntomCommand, { text: ``, type: `copy` }) }), _jsx(Paragraph, { children: _jsxs(Quote, { children: [_jsxs(_components.p, { children: [_jsx(Text, { isBold: true, children: "Note" }), ":"] }), _jsxs(List, { type: "ul", children: [_jsxs(ListItem, { children: [_jsx(Text, { children: _jsxs(_components.p, { children: ["Please replace", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { children: _jsx(_components.p, { children: "{latest_version}" }) }) }), _jsx(Text, { children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "in the code with the", _jsx(Spacer, { len: 1 })] }) }), _jsx(Link, { href: "https://docs.antom.com/ac/sdks/sdk_release_note", target: "_blank", children: _jsx(Text, { children: _jsx(_components.p, { children: "latest version" }) }) }), _jsx(Text, { children: _jsx(_components.p, { children: "." }) })] }), _jsx(ListItem, { children: _jsx(Text, { children: _jsx(_components.p, { children: "Antom SDK complies with PCI guidelines and guarantees that the buyer's payment information goes straight to Antom without passing through your server." }) }) })] })] }) })] }), _jsxs(AntomStep, { id: 'install-antom-sdk', when: { platform: 'Web', client: 'html', integration_type: 'Embedded CKP' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'install-antom-sdk', children: _jsx(_components.p, { children: "Install Antom SDK" }) }), _jsx(Paragraph, { children: "Install the SDK resource package via CDN:" }), _jsx(Paragraph, { children: _jsx(AntomCommand, { text: ``, type: `copy` }) }), _jsx(Paragraph, { children: _jsx(Quote, { children: _jsxs(_components.p, { children: [_jsx(Text, { isBold: true, children: "Note" }), ": Antom SDK complies with PCI guidelines and guarantees that the buyer's payment information goes straight to Antom without passing through your server."] }) }) })] }), _jsxs(AntomStep, { id: 'install-antom-sdk', when: { platform: 'Web', client: 'html', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'install-antom-sdk', children: _jsx(_components.p, { children: "Install Antom SDK" }) }), _jsx(Paragraph, { children: "Install the SDK resource package via CDN:" }), _jsx(Paragraph, { children: _jsx(AntomCommand, { text: ``, type: `copy` }) }), _jsx(Paragraph, { children: _jsx(Quote, { children: _jsxs(_components.p, { children: [_jsx(Text, { isBold: true, children: "Note" }), ": Antom SDK complies with PCI guidelines and guarantees that the buyer's payment information goes straight to Antom without passing through your server."] }) }) })] }), _jsxs(AntomStep, { id: 'install-antom-sdk', when: { platform: 'Web', integration_type: 'SDK' }, unless: { client: 'html' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'install-antom-sdk', children: _jsx(_components.p, { children: "Install Antom SDK" }) }), _jsxs(Paragraph, { children: [_jsx(Paragraph, { children: "Install the SDK resource package via npm:" }), _jsx(Text, { children: _jsxs(_components.p, { children: ["First, use npm to download", ' '] }) }), _jsx(InlineContent, { children: _jsx(Text, { children: _jsx(_components.p, { children: "@alipay/ams-checkout" }) }) }), _jsx(Text, { children: _jsx(_components.p, { children: ":" }) }), _jsx(AntomCommand, { text: `npm install @alipay/ams-checkout`, type: `copy` }), _jsx(_components.p, { children: "Method:" }), _jsx(AntomCommand, { text: `import { AMSCashierPayment } from '@alipay/ams-checkout';`, type: `copy` })] }), _jsx(Paragraph, { children: _jsx(Quote, { children: _jsxs(_components.p, { children: [_jsx(Text, { isBold: true, children: "Note" }), ": Antom SDK complies with PCI guidelines and guarantees that the buyer's payment information goes straight to Antom without passing through your server."] }) }) })] }), _jsxs(AntomStep, { id: 'install-antom-sdk', when: { platform: 'Android', integration_type: 'SDK' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'install-antom-sdk', children: _jsx(_components.p, { children: "Integrate Antom SDK" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Integrate the Android SDK package with Maven. For details, refer to" }), _jsx(Link, { href: "https://docs.antom.com/ac/sdks/android", target: "_blank", children: _jsxs(_components.p, { children: [' ', "Integrate the SDK Package for Android"] }) }), _jsx(_components.p, { children: "." })] }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add the dependencies in the" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "build.gradle", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "file using the code snippet below:" })] }), _jsx(AntomCommand, { text: `implementation "com.alipay.antom.sdk:payment-component:{latest_version}" implementation "com.alipay.antom.sdk:securitysdk:1.1.0"`, type: `copy` }), _jsx(Paragraph, { children: _jsxs(Quote, { children: [_jsx(Text, { isBold: true, children: "Note" }), _jsx(Text, { children: _jsxs(_components.p, { children: [": Please replace", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { children: _jsx(_components.p, { children: "{latest_version}" }) }) }), _jsx(Text, { children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "in the code with the", _jsx(Spacer, { len: 1 })] }) }), _jsx(Link, { href: "https://docs.antom.com/ac/sdks/sdk_release_note", target: "_blank", children: _jsx(Text, { children: _jsx(_components.p, { children: "latest version" }) }) }), _jsx(Text, { children: _jsx(_components.p, { children: "." }) })] }) })] }), _jsxs(AntomStep, { id: 'install-antom-sdk', when: { platform: 'iOS', integration_type: 'SDK' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'install-antom-sdk', children: _jsx(_components.p, { children: "Integrate Antom SDK" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Integrate the iOS SDK package with CocoaPods. For details, refer to" }), _jsx(Link, { href: "https://docs.antom.com/ac/sdks/ios", target: "_blank", children: _jsxs(_components.p, { children: [' ', "Integrate the SDK Package for iOS"] }) }), _jsx(_components.p, { children: "." })] }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add the dependencies to your" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "Podfile", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "using the code snippet below:" })] }), _jsx(AntomCommand, { text: `source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git' source 'https://globaltech.alipay.com/api/v1/file/common/5700989804217335/antom' platform :ios, '11.0' target 'cashierpayment_sdk_objc' do use_frameworks! pod 'AMSComponent' pod 'AMSSecurity' end`, type: `copy` })] }), _jsxs(AntomStep, { id: 'install-antom-sdk', when: { platform: 'Android', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'install-antom-sdk', children: _jsx(_components.p, { children: "Integrate Antom SDK" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Integrate the Android SDK package with Maven. For details, refer to" }), _jsx(Link, { href: "https://docs.antom.com/ac/sdks/android", target: "_blank", children: _jsxs(_components.p, { children: [' ', "Integrate the SDK Package for Android"] }) }), _jsx(_components.p, { children: "." })] }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add the dependencies in the" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "build.gradle", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "file using the code snippet below:" })] }), _jsx(AntomCommand, { text: `implementation "com.alipay.antom.sdk:foundation:{latest_version}" implementation "com.alipay.antom.sdk:element:{latest_version}"`, type: `copy` }), _jsx(Paragraph, { children: _jsxs(Quote, { children: [_jsx(Text, { isBold: true, children: "Note" }), _jsx(Text, { children: _jsxs(_components.p, { children: [": Please replace", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { children: _jsx(_components.p, { children: "{latest_version}" }) }) }), _jsx(Text, { children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "in the code with the", _jsx(Spacer, { len: 1 })] }) }), _jsx(Link, { href: "https://docs.antom.com/ac/sdks/sdk_release_note", target: "_blank", children: _jsx(Text, { children: _jsx(_components.p, { children: "latest version" }) }) }), _jsx(Text, { children: _jsx(_components.p, { children: "." }) })] }) })] }), _jsxs(AntomStep, { id: 'install-antom-sdk', when: { platform: 'iOS', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'install-antom-sdk', children: _jsx(_components.p, { children: "Integrate Antom SDK" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Integrate the iOS SDK package with CocoaPods. For details, refer to" }), _jsx(Link, { href: "https://docs.antom.com/ac/sdks/ios", target: "_blank", children: _jsxs(_components.p, { children: [' ', "Integrate the SDK Package for iOS"] }) }), _jsx(_components.p, { children: "." })] }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add the dependencies to your" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "Podfile", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "using the code snippet below:" })] }), _jsx(AntomCommand, { text: `source 'https://globaltech.alipay.com/api/v1/file/common/5700989804217335/antom' platform :ios, '{latest_version}' target 'payment_element_sdk_objc' do # Comment the next line if you don't want to use dynamic frameworks use_frameworks! pod 'AMSComponent/Element', '{latest_version}' pod 'AMSSecurity' end`, type: `copy` }), _jsx(Paragraph, { children: _jsxs(Quote, { children: [_jsx(Text, { isBold: true, children: "Note" }), _jsx(Text, { children: _jsxs(_components.p, { children: [": Please replace", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { children: _jsx(_components.p, { children: "{latest_version}" }) }) }), _jsx(Text, { children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "in the code with the", _jsx(Spacer, { len: 1 })] }) }), _jsx(Link, { href: "https://docs.antom.com/ac/sdks/sdk_release_note", target: "_blank", children: _jsx(Text, { children: _jsx(_components.p, { children: "latest version" }) }) }), _jsx(Text, { children: _jsx(_components.p, { children: "." }) })] }) })] }), _jsxs(AntomStep, { id: 'build-the-checkout-page', label: `client`, when: { integration_type: 'API' }, children: [_jsx(Heading, { level: 3, anchored: true, id: 'build-the-checkout-page', children: _jsx(_components.p, { children: "Build the checkout page" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Display the payment methods that you offer to buyers on the checkout page." }) })] }), _jsxs(AntomStep, { id: 'build-the-checkout-page', label: `client`, when: { integration_type: 'SDK' }, children: [_jsx(Heading, { level: 3, anchored: true, id: 'build-the-checkout-page', children: _jsx(_components.p, { children: "Build the checkout page" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Display the payment methods that you offer to buyers on the checkout page." }) })] }), _jsxs(AntomStep, { id: 'build-the-checkout-page', label: `client`, when: { integration_type: 'Embedded CKP' }, children: [_jsx(Heading, { level: 3, anchored: true, id: 'build-the-checkout-page', children: _jsx(_components.p, { children: "Embed the Checkout Page" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Create a DOM node on your checkout page to embed the Antom Checkout Page component." }) })] }), _jsxs(AntomStep, { id: 'build-the-checkout-page', label: `client`, when: { platform: 'Web', integration_type: 'Payment Element' }, children: [_jsx(Heading, { level: 3, anchored: true, id: 'build-the-checkout-page', children: _jsx(_components.p, { children: "Embed the Payment Element component" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Create a DOM node on your checkout page to embed the Payment Element component." }) })] }), _jsxs(AntomStep, { id: 'build-the-checkout-page', label: `client`, when: { integration_type: 'Hosted CKP' }, children: [_jsx(Heading, { level: 3, anchored: true, id: 'build-the-checkout-page', children: _jsx(_components.p, { children: "Host the Checkout Page" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Render on your checkout page or redirect to the Antom Checkout Page." }) })] }), _jsxs(AntomPartial, { children: [_jsxs(AntomStep, { id: 'initialize-instantiate-the-sdk', when: { integration_type: 'SDK' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'initialize-instantiate-the-sdk', children: _jsx(_components.p, { children: "Initialize and instantiate the SDK" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Create the SDK instance and specify basic configurations." }) })] }), _jsxs(AntomStep, { id: 'initialize-instantiate-the-sdk', when: { integration_type: 'Embedded CKP' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'initialize-instantiate-the-sdk', children: _jsx(_components.p, { children: "Initialize and instantiate the SDK" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Create the SDK instance and specify basic configurations." }) })] }), _jsxs(AntomStep, { id: 'get-a-payment-session', when: { integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'get-a-payment-session', children: _jsx(_components.p, { children: "Get a payment session" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "After the buyer selects the corresponding payment method, you send a createPaymentSession request with the corresponding payment method information and get a payment session." }) })] }), _jsxs(AntomStep, { id: 'initialize-instantiate-the-sdk', when: { platform: 'Web', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'initialize-instantiate-the-sdk', children: _jsx(_components.p, { children: "Initialize and instantiate the SDK" }) }), _jsxs(Paragraph, { children: [_jsxs(_components.p, { children: ["Create the SDK instance and specify basic configurations. You can use the", ' '] }), _jsx(InlineContent, { children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/web_mount", target: "_blank", children: _jsx(Text, { fontSize: 14, children: _jsx(_components.p, { children: "mount()" }) }) }) }), _jsxs(_components.p, { children: [' ', "method to configure the", _jsx(Spacer, { len: 1 })] }), _jsxs(Link, { href: 'https://docs.antom.com/ac/cashierpay/appearance', target: "_blank", children: [_jsx("i", { children: "appearance" }), _jsx(Spacer, { len: 1 })] }), _jsx(_components.p, { children: "parameter to customize the visual style and layout of the payment interface, including theme selection, layout configuration, and CSS styling." })] })] }), _jsxs(AntomStep, { id: 'initialize-instantiate-the-sdk', when: { platform: 'Android', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'initialize-instantiate-the-sdk', children: _jsx(_components.p, { children: "Initialize and instantiate the SDK" }) }), _jsxs(Paragraph, { children: [_jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: ["After obtaining", _jsx("i", { children: " paymentSessionData " }), "from the server, use the", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { fontSize: 14, children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/android_AMSPaymentElement", target: "_blank", children: "AMSPaymentElement" }) }) }), _jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "class to create SDK instance."] }) })] }), _jsx(List, { type: "ol", children: _jsxs(ListItem, { children: [_jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: ["Create the", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { fontSize: 14, children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/android_AMSBaseConfiguration", target: "_blank", children: "AMSBaseConfiguration" }) }) }), _jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "object and complete SDK configuration."] }) })] }) }), _jsx(List, { type: "ol", start: 2, children: _jsxs(ListItem, { children: [_jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: ["Implement", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { fontSize: 14, children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/android_OnCreateComponentListener", target: "_blank", children: "OnCreateComponentListener()" }) }) }), _jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "to handle events in the process of invoking the payment component and launching the payment page."] }) })] }) }), _jsx(List, { type: "ol", start: 3, children: _jsxs(ListItem, { children: [_jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: ["Implement", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { fontSize: 14, children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/android_OnSubmitPayListener", target: "_blank", children: "OnSubmitPayListener()" }) }) }), _jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "to handle events related to the payment initiation process."] }) })] }) }), _jsx(List, { type: "ol", start: 4, children: _jsx(ListItem, { children: _jsxs(Text, { fontSize: 14, children: [_jsxs(_components.p, { children: ["Invoke the", _jsx(Spacer, { len: 1 })] }), _jsx(InlineContent, { children: _jsx(Text, { fontSize: 14, children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/android_AMSPaymentElement.Builder#kIGQE", target: "_blank", children: "AMSPaymentElement.Builder(activity, configuration).build()" }) }) }), _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "method to create a", _jsx(Spacer, { len: 1 })] }), _jsx(Link, { href: 'https://docs.antom.com/ac/sdks/android_AMSPaymentElement', target: "_blank", children: _jsx(_components.p, { children: "AMSPaymentElement" }) }), _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "instance."] })] }) }) })] }), _jsxs(AntomStep, { id: 'initialize-instantiate-the-sdk', when: { platform: 'iOS', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'initialize-instantiate-the-sdk', children: _jsx(_components.p, { children: "Initialize and instantiate the SDK" }) }), _jsxs(Paragraph, { children: [_jsxs(_components.p, { children: ["After obtaining", _jsx("i", { children: " paymentSessionData " }), "from the server, use the", _jsx(Spacer, { len: 1 })] }), _jsx(InlineContent, { children: _jsx(Text, { fontSize: 14, children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/ios_AMSPaymentElement", children: "AMSPaymentElement" }) }) }), _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "class to create a Payment Element instance."] })] }), _jsx(List, { type: "ol", start: 1, children: _jsx(ListItem, { children: _jsxs(Text, { fontSize: 14, children: ["Create the ", _jsx(InlineContent, { children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/ios_AMSPaymentElementConfiguration", target: "_blank", children: "AMSPaymentElementConfiguration" }) }), " object and complete SDK configuration."] }) }) }), _jsx(List, { type: "ol", start: 2, children: _jsx(ListItem, { children: _jsxs(Text, { fontSize: 14, children: ["Implement ", _jsx(InlineContent, { children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/ios_AMSPaymentProtocol", target: "_blank", children: "AMSPaymentProtocol" }) }), " to handle corresponding events in subsequent processes."] }) }) })] }), _jsxs(AntomStep, { id: 'get-a-payment-session', when: { integration_type: 'SDK' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'get-a-payment-session', children: _jsx(_components.p, { children: "Get a payment session" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "After the buyer selects the product, you send a createPaymentSession request with the corresponding product information and get a payment session." }) })] }), _jsxs(AntomStep, { id: 'get-a-payment-session', when: { integration_type: 'Embedded CKP' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'get-a-payment-session', children: _jsx(_components.p, { children: "Get a payment session" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "After the buyer selects the product, you send a createPaymentSession request with the corresponding product information and get a payment session." }) })] }), _jsxs(AntomStep, { id: 'mount-element-component', when: { platform: 'Web', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'mount-element-component', children: _jsx(_components.p, { children: "Render the Payment Element component" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Render the configured Payment Element component to the client page." }) })] }), _jsxs(AntomStep, { id: 'mount-element-component', when: { platform: 'Android', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'mount-element-component', children: _jsx(_components.p, { children: "Render the Payment Element component" }) }), _jsxs(Paragraph, { children: [_jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: ["Invoke the", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { fontSize: 14, children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/android_createComponent", children: "createComponent()" }) }) }), _jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "method to render Payment Element, which displays the checkout page and allows buyers to proceed with the payment process."] }) })] })] }), _jsxs(AntomStep, { id: 'mount-element-component', when: { platform: 'iOS', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'mount-element-component', children: _jsx(_components.p, { children: "Render the Payment Element component" }) }), _jsxs(Paragraph, { children: [_jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: ["Use the", _jsx(Spacer, { len: 1 })] }) }), _jsx(InlineContent, { children: _jsx(Text, { fontSize: 14, children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/ios_createComponent", children: "createComponent()" }) }) }), _jsx(Text, { fontSize: 14, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "method on the instance object to invoke Payment Element."] }) })] })] }), _jsxs(AntomStep, { id: 'invoke-the-sdk', when: { integration_type: 'SDK' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'invoke-the-sdk', children: _jsx(_components.p, { children: "Invoke the SDK" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Invoke the SDK by using the payment session obtained. After being invoked, the SDK guides the buyer to complete the payment." }) })] }), _jsxs(AntomStep, { id: 'invoke-the-sdk', when: { integration_type: 'Embedded CKP' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'invoke-the-sdk', children: _jsx(_components.p, { children: "Invoke the SDK" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Invoke the SDK by using the payment session obtained. After being invoked, the SDK guides the buyer to complete the payment with the specified payment method." }) })] }), _jsxs(AntomStep, { id: 'invoke-the-sdk', when: { platform: 'Web', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'invoke-the-sdk', children: _jsx(_components.p, { children: "Invoke the SDK to submit payment" }) }), _jsxs(Paragraph, { children: [_jsxs(_components.p, { children: ["After the Payment Element component is rendered, invoke the", _jsx(Spacer, { len: 1 })] }), _jsx(InlineContent, { children: _jsx(Link, { href: "https://docs.antom.com/ac/sdks/web_submitPayment", target: "_blank", children: _jsx(Text, { fontSize: 14, children: _jsx(_components.p, { children: "submitPayment()" }) }) }) }), _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "method to submit payment. Payment Element will handle processes such as displaying QR codes, redirecting to payment method pages, 3DS authentication, and returning to the merchant result page based on the specific payment method. It will also return", _jsx(Spacer, { len: 1 })] }), _jsx(Link, { href: "https://docs.antom.com/ac/sdks/web_submitPayment#bflMZ", target: "_blank", children: _jsx(Text, { fontSize: 14, children: _jsx(_components.p, { children: "event codes" }) }) }), _jsx(_components.p, { children: ", you can perform corresponding handling based on these event codes." })] })] }), _jsxs(AntomStep, { id: 'invoke-the-sdk', when: { platform: 'Android', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'invoke-the-sdk', children: _jsx(_components.p, { children: "Invoke the SDK to submit payment" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "After the buyer clicks to submit payment, Payment Element will handle processes such as displaying QR codes, redirecting to payment method pages, 3DS authentication, and returning to the merchant result page based on the specific payment method. It will also return event codes, you can perform corresponding handling based on these event codes." }) })] }), _jsxs(AntomStep, { id: 'invoke-the-sdk', when: { platform: 'iOS', integration_type: 'Payment Element' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'invoke-the-sdk', children: _jsx(_components.p, { children: "Invoke the SDK to submit payment" }) }), _jsx(Paragraph, { children: _jsxs(_components.p, { children: ["Use", _jsx("i", { children: " paymentSessionData " }), "to invoke Payment Element on your client. After the buyer clicks to submit payment, Payment Element will handle the entire flow based on the selected payment method, including displaying QR codes, redirecting to payment pages, performing 3DS authentication, and returning to the merchant’s result page."] }) })] })] }), _jsxs(AntomPartial, { children: [_jsxs(AntomStep, { id: 'get-payment-continuation-link', when: { integration_type: 'API' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'get-payment-continuation-link', children: _jsx(_components.p, { children: "Get the payment continuation URL" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "After the buyer selects the corresponding payment method, you send a payment request with the corresponding payment method information and get the payment continuation URL from the payment response." }) })] }), _jsxs(AntomStep, { id: 'get-payment-continuation-link', when: { integration_type: 'Hosted CKP' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'get-payment-continuation-link', children: _jsx(_components.p, { children: "Get the payment continuation URL" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "After the buyer selects the product, you send a payment request with the corresponding product information. Get the payment continuation URL from the payment response, then render it on your checkout page or redirect to the Antom Checkout Page." }) })] }), _jsxs(AntomStep, { id: 'handle-the-redirection', when: { integration_type: 'API' }, label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'handle-the-redirection', children: _jsx(_components.p, { children: "Handle the redirection" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Redirect the buyer to the payment continuation URL to complete the payment." }) })] })] }), _jsxs(AntomStep, { id: 'display-the-payment-result', label: 'client', when: { integration_type: 'API' }, children: [_jsx(Heading, { level: 3, anchored: true, id: 'display-the-payment-result', children: _jsx(_components.p, { children: "Query the payment result" }) }), _jsxs(Paragraph, { children: [_jsxs(_components.p, { children: ["When the buyer completes the payment and is redirected to the payment redirection URL, you can call the server-side", _jsx(Spacer, { len: 1 })] }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/paymentri_online", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsx(_components.p, { children: "inquiryPayment" }) }) }), _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "API to obtain the payment result."] })] })] }), _jsxs(AntomStep, { id: 'display-the-payment-result', label: 'client', when: { integration_type: 'SDK' }, children: [_jsx(Heading, { level: 3, anchored: true, id: 'display-the-payment-result', children: _jsx(_components.p, { children: "Query the payment result" }) }), _jsxs(Paragraph, { children: [_jsxs(_components.p, { children: ["When the buyer completes payment, you can call the server-side", _jsx(Spacer, { len: 1 })] }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/paymentri_online", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsx(_components.p, { children: "inquiryPayment" }) }) }), _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "API to obtain the payment result."] })] })] }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/java/PaymentServer.java', when: { server: 'Java', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `java`, filename: 'src/main/java/com/antom/checkout/api/PaymentServer.java', downloadOnly: false, steps: [`get-integration-resources`, `initiate-a-payment-request`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.checkout.api; import com.alibaba.fastjson.JSON; import com.alipay.global.api.AlipayClient; import com.alipay.global.api.DefaultAlipayClient; import com.alipay.global.api.exception.AlipayApiException; import com.alipay.global.api.model.Result; import com.alipay.global.api.model.ResultStatusType; import com.alipay.global.api.model.ams.*; import com.alipay.global.api.model.constants.EndPointConstants; import com.alipay.global.api.request.ams.notify.AlipayPayResultNotify; import com.alipay.global.api.request.ams.pay.AlipayPayQueryRequest; import com.alipay.global.api.request.ams.pay.AlipayPayRequest; import com.alipay.global.api.response.ams.pay.AlipayPayQueryResponse; import com.alipay.global.api.response.ams.pay.AlipayPayResponse; import com.alipay.global.api.tools.WebhookTool; import lombok.Data; import org.joda.money.CurrencyUnit; import org.joda.money.Money; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import java.math.BigDecimal; import java.util.Map; import java.util.UUID; /** * sample payment server using Antom API integration mode **/ @Controller @RequestMapping("/payment") @CrossOrigin @SpringBootApplication public class PaymentServer { `] }, `server-Java-API-other1`), _jsx(AntomChunk, { language: `java`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id
* find your client id here: quickStart */ public static final String CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ public static final String ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ public static final String MERCHANT_PRIVATE_KEY = "your_private_key"; private final static AlipayClient CLIENT = new DefaultAlipayClient( EndPointConstants.SG, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY, CLIENT_ID); `] }, `server-Java-API-code1`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` public static void main(String[] args) { SpringApplication.run(PaymentServer.class, args); System.out.println("Open your browser and visit: http://localhost:8080"); } `] }, `server-Java-API-other2`), _jsx(AntomChunk, { language: `java`, steps: [`initiate-a-payment-request`], chunks: [` @PostMapping("/pay") public ResponseEntity pay(@RequestBody PaymentVO payment) { AlipayPayRequest alipayPayRequest = new AlipayPayRequest(); alipayPayRequest.setProductCode(ProductCodeType.CASHIER_PAYMENT); // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object long amountMinorLong = Money.of(CurrencyUnit.of(payment.currency), new BigDecimal(payment.amountValue)).getAmountMinorLong(); // set amount Amount amount = Amount.builder().currency(payment.currency).value(String.valueOf(amountMinorLong)).build(); alipayPayRequest.setPaymentAmount(amount); // replace with your paymentRequestId String paymentRequestId = UUID.randomUUID().toString(); alipayPayRequest.setPaymentRequestId(paymentRequestId); // set paymentMethod PaymentMethod paymentMethod = PaymentMethod.builder().paymentMethodType(payment.paymentMethodType).build(); alipayPayRequest.setPaymentMethod(paymentMethod); // replace with your orderId String orderId = UUID.randomUUID().toString(); // when paymentMethodType is CARD, need to set authorization if ("CARD".equals(payment.paymentMethodType)) { PaymentFactor paymentFactor = PaymentFactor.builder().isAuthorization(true).build(); alipayPayRequest.setPaymentFactor(paymentFactor); } // set buyer info Buyer buyer = Buyer.builder().referenceBuyerId("yourBuyerId").build(); // set order info Order order = Order.builder().referenceOrderId(orderId) .orderDescription("antom api testing order").orderAmount(amount).buyer(buyer).build(); alipayPayRequest.setOrder(order); // set env info Env env = Env.builder().terminalType(TerminalType.valueOf(payment.terminalType)).clientIp("1.2.3.4").build(); if (!TerminalType.WEB.equals(TerminalType.valueOf(payment.terminalType)) && payment.osType != null) { env.setOsType(OsType.valueOf(payment.osType)); } alipayPayRequest.setEnv(env); // replace with your notify url // or configure your notify url here: Notification URL alipayPayRequest.setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receivePaymentNotify"); `] }, `server-Java-API-code2`), _jsx(AntomChunk, { language: `java`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url alipayPayRequest.setPaymentRedirectUrl( "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId); `] }, `server-Java-API-code3`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` AlipayPayResponse alipayPayResponse; try { long startTime = System.currentTimeMillis(); System.out.println("payment request: " + JSON.toJSONString(alipayPayRequest)); alipayPayResponse = CLIENT.execute(alipayPayRequest); System.out.println("payment response: " + JSON.toJSONString(alipayPayResponse)); System.out.println("payment request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, alipayPayResponse)); } `] }, `server-Java-API-other3`), _jsx(AntomChunk, { language: `java`, steps: [`inquire-payment-result`], chunks: [` @RequestMapping(path = "/inquiryPayment", method = RequestMethod.POST) public ResponseEntity inquiryPayment(@RequestBody Map map) { String paymentRequestId = map.get("paymentRequestId"); AlipayPayQueryRequest alipayPayQueryRequest = new AlipayPayQueryRequest(); alipayPayQueryRequest.setPaymentRequestId(paymentRequestId); AlipayPayQueryResponse alipayPayQueryResponse; try { long startTime = System.currentTimeMillis(); System.out.println("inquiry payment request: " + JSON.toJSONString(alipayPayQueryRequest)); alipayPayQueryResponse = CLIENT.execute(alipayPayQueryRequest); System.out.println("inquiry payment response: " + JSON.toJSONString(alipayPayQueryResponse)); System.out.println("inquiry payment request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, alipayPayQueryResponse)); } `] }, `server-Java-API-code4`), _jsx(AntomChunk, { language: `java`, steps: [`receive-payment-notification`], chunks: [` /** * receive payment notify * * @param request request * @param notifyBody notify body * @return Result */ @PostMapping("/receivePaymentNotify") @ResponseBody public ResultWrapper receivePaymentNotify(HttpServletRequest request, @RequestBody String notifyBody) { // retrieve the required parameters from http request String requestUri = request.getRequestURI(); String requestMethod = request.getMethod(); // retrieve the required parameters from request header String requestTime = request.getHeader("request-time"); String clientId = request.getHeader("client-id"); String signature = request.getHeader("signature"); try { // verify the signature of notification boolean verifyResult = WebhookTool.checkSignature(requestUri, requestMethod, clientId, requestTime, signature, notifyBody, ANTOM_PUBLIC_KEY); if (!verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body AlipayPayResultNotify paymentNotify = JSON.parseObject(notifyBody, AlipayPayResultNotify.class); if (paymentNotify != null && "SUCCESS".equals(paymentNotify.getResult().getResultCode())) { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. System.out.println("receive payment notify: " + JSON.toJSONString(paymentNotify)); return new ResultWrapper(Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build()); } } catch (Exception e) { return new ResultWrapper(Result.builder().resultCode("FAIL").resultMessage("fail.").resultStatus(ResultStatusType.F).build()); } return new ResultWrapper(Result.builder().resultCode("SYSTEM_ERROR").resultMessage("system error.").resultStatus(ResultStatusType.F).build()); } `] }, `server-Java-API-code5`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` @Data public static class PaymentVO { private String amountValue; private String currency; private String paymentMethodType; private String terminalType = "WEB"; private String osType; } @Data private static class ApiResponse { private String status = "success"; private String paymentRequestId = ""; private String message; private Object data; public ApiResponse(String paymentRequestId, Object data) { this.paymentRequestId = paymentRequestId; this.data = data; } public ApiResponse(String paymentRequestId, AlipayApiException e) { this.paymentRequestId = paymentRequestId; this.status = "error"; this.message = e.getMessage(); } } @Data public static class ResultWrapper { private Result result; public ResultWrapper(Result result) { this.result = result; } } } `] }, `server-Java-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/java/PaymentServer.java', when: { server: 'Java', integration_type: 'SDK' }, children: _jsxs(AntomFile, { language: `java`, filename: 'src/main/java/com/antom/checkout/sdk/PaymentServer.java', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.checkout.sdk; import com.alibaba.fastjson.JSON; import com.alipay.global.api.AlipayClient; import com.alipay.global.api.DefaultAlipayClient; import com.alipay.global.api.exception.AlipayApiException; import com.alipay.global.api.model.Result; import com.alipay.global.api.model.ResultStatusType; import com.alipay.global.api.model.ams.*; import com.alipay.global.api.model.constants.EndPointConstants; import com.alipay.global.api.request.ams.notify.AlipayPayResultNotify; import com.alipay.global.api.request.ams.pay.AlipayPayQueryRequest; import com.alipay.global.api.request.ams.pay.AlipayPaymentSessionRequest; import com.alipay.global.api.response.ams.pay.AlipayPayQueryResponse; import com.alipay.global.api.response.ams.pay.AlipayPaymentSessionResponse; import com.alipay.global.api.tools.WebhookTool; import lombok.Data; import org.joda.money.CurrencyUnit; import org.joda.money.Money; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import java.math.BigDecimal; import java.util.Map; import java.util.UUID; /** * sample payment server using Antom SDK integration mode **/ @Controller @RequestMapping("/payment") @CrossOrigin @SpringBootApplication public class PaymentServer { `] }, `server-Java-SDK-other1`), _jsx(AntomChunk, { language: `java`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id
* find your client id here: quickStart */ public static final String CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ public static final String ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ public static final String MERCHANT_PRIVATE_KEY = "your_private_key"; private final static AlipayClient CLIENT = new DefaultAlipayClient( EndPointConstants.SG, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY, CLIENT_ID); `] }, `server-Java-SDK-code1`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` public static void main(String[] args) { SpringApplication.run(PaymentServer.class, args); System.out.println("Open your browser and visit: http://localhost:8080"); } `] }, `server-Java-SDK-other2`), _jsx(AntomChunk, { language: `java`, steps: [`create-a-payment-session`], chunks: [` @PostMapping("/createSession") public ResponseEntity createPaymentSession(@RequestBody PaymentVO payment) { AlipayPaymentSessionRequest alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); alipayPaymentSessionRequest.setProductCode(ProductCodeType.CASHIER_PAYMENT); // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object long amountMinorLong = Money.of(CurrencyUnit.of(payment.currency), new BigDecimal(payment.amountValue)).getAmountMinorLong(); // set amount Amount amount = Amount.builder().currency(payment.currency).value(String.valueOf(amountMinorLong)).build(); alipayPaymentSessionRequest.setPaymentAmount(amount); // replace with your paymentRequestId String paymentRequestId = UUID.randomUUID().toString(); alipayPaymentSessionRequest.setPaymentRequestId(paymentRequestId); // set paymentMethod PaymentMethod paymentMethod = PaymentMethod.builder().paymentMethodType(payment.paymentMethodType).build(); alipayPaymentSessionRequest.setPaymentMethod(paymentMethod); // replace with your orderId String orderId = UUID.randomUUID().toString(); // when paymentMethodType is CARD, need to set authorization if ("CARD".equals(payment.paymentMethodType)) { PaymentFactor paymentFactor = new PaymentFactor(); paymentFactor.setIsAuthorization(true); alipayPaymentSessionRequest.setPaymentFactor(paymentFactor); } // set buyer info Buyer buyer = Buyer.builder().referenceBuyerId("yourBuyerId").build(); // set order info Order order = Order.builder().referenceOrderId(orderId) .orderDescription("antom sdk testing order").orderAmount(amount).buyer(buyer).build(); alipayPaymentSessionRequest.setOrder(order); // replace with your notify url // or configure your notify url here: Notification URL alipayPaymentSessionRequest.setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receivePaymentNotify"); `] }, `server-Java-SDK-code2`), _jsx(AntomChunk, { language: `java`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url alipayPaymentSessionRequest.setPaymentRedirectUrl( "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId); `] }, `server-Java-SDK-code3`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` AlipayPaymentSessionResponse alipayPaymentSessionResponse; try { long startTime = System.currentTimeMillis(); System.out.println("paymentSession request: " + JSON.toJSONString(alipayPaymentSessionRequest)); alipayPaymentSessionResponse = CLIENT.execute(alipayPaymentSessionRequest); System.out.println("paymentSession response: " + JSON.toJSONString(alipayPaymentSessionResponse)); System.out .println("paymentSession request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok() .body(new ApiResponse(paymentRequestId, alipayPaymentSessionResponse)); } `] }, `server-Java-SDK-other3`), _jsx(AntomChunk, { language: `java`, steps: [`inquire-payment-result`], chunks: [` @RequestMapping(path = "/inquiryPayment", method = RequestMethod.POST) public ResponseEntity inquiryPayment(@RequestBody Map map) { String paymentRequestId = map.get("paymentRequestId"); AlipayPayQueryRequest alipayPayQueryRequest = new AlipayPayQueryRequest(); alipayPayQueryRequest.setPaymentRequestId(paymentRequestId); AlipayPayQueryResponse alipayPayQueryResponse; try { long startTime = System.currentTimeMillis(); System.out.println("inquiry payment request: " + JSON.toJSONString(alipayPayQueryRequest)); alipayPayQueryResponse = CLIENT.execute(alipayPayQueryRequest); System.out.println("inquiry payment response: " + JSON.toJSONString(alipayPayQueryResponse)); System.out .println("inquiry payment request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, alipayPayQueryResponse)); } `] }, `server-Java-SDK-code4`), _jsx(AntomChunk, { language: `java`, steps: [`receive-payment-notification`], chunks: [` /** * receive payment notify * * @param request request * @param notifyBody notify body * @return Result */ @PostMapping("/receivePaymentNotify") @ResponseBody public ResultWrapper receivePaymentNotify(HttpServletRequest request, @RequestBody String notifyBody) { // retrieve the required parameters from http request String requestUri = request.getRequestURI(); String requestMethod = request.getMethod(); // retrieve the required parameters from request header String requestTime = request.getHeader("request-time"); String clientId = request.getHeader("client-id"); String signature = request.getHeader("signature"); try { // verify the signature of notification boolean verifyResult = WebhookTool.checkSignature(requestUri, requestMethod, clientId, requestTime, signature, notifyBody, ANTOM_PUBLIC_KEY); if (!verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body AlipayPayResultNotify paymentNotify = JSON.parseObject(notifyBody, AlipayPayResultNotify.class); if (paymentNotify != null && "SUCCESS".equals(paymentNotify.getResult().getResultCode())) { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. System.out.println("receive payment notify: " + JSON.toJSONString(paymentNotify)); return new ResultWrapper(Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build()); } } catch (Exception e) { return new ResultWrapper(Result.builder().resultCode("FAIL").resultMessage("fail.").resultStatus(ResultStatusType.F).build()); } return new ResultWrapper(Result.builder().resultCode("SYSTEM_ERROR").resultMessage("system error.").resultStatus(ResultStatusType.F).build()); } `] }, `server-Java-SDK-code5`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` @Data public static class PaymentVO { private String amountValue; private String currency; private String paymentMethodType; } @Data private static class ApiResponse { private String status = "success"; private String paymentRequestId = ""; private String message; private Object data; public ApiResponse(String paymentRequestId, Object data) { this.paymentRequestId = paymentRequestId; this.data = data; } public ApiResponse(String paymentRequestId, AlipayApiException e) { this.paymentRequestId = paymentRequestId; this.status = "error"; this.message = e.getMessage(); } } @Data public static class ResultWrapper { private Result result; public ResultWrapper(Result result) { this.result = result; } } } `] }, `server-Java-SDK-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/java/PaymentServer.java', when: { server: 'Java', integration_type: 'Embedded CKP' }, children: _jsxs(AntomFile, { language: `java`, filename: 'src/main/java/com/antom/checkout/ckp/PaymentServer.java', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.checkout.ckp; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import com.alipay.global.api.AlipayClient; import com.alipay.global.api.DefaultAlipayClient; import com.alipay.global.api.exception.AlipayApiException; import com.alipay.global.api.model.Result; import com.alipay.global.api.model.ResultStatusType; import com.alipay.global.api.model.ams.*; import com.alipay.global.api.model.constants.EndPointConstants; import com.alipay.global.api.model.constants.ProductSceneConstants; import com.alipay.global.api.request.ams.notify.AlipayCaptureResultNotify; import com.alipay.global.api.request.ams.notify.AlipayPayResultNotify; import com.alipay.global.api.request.ams.pay.AlipayPayQueryRequest; import com.alipay.global.api.request.ams.pay.AlipayPaymentSessionRequest; import com.alipay.global.api.response.ams.pay.AlipayPayQueryResponse; import com.alipay.global.api.response.ams.pay.AlipayPaymentSessionResponse; import com.alipay.global.api.tools.WebhookTool; import lombok.Data; import org.joda.money.CurrencyUnit; import org.joda.money.Money; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import java.math.BigDecimal; import java.util.*; import java.util.stream.Collectors; import java.util.stream.Stream; /** * sample payment server using Antom CKP integration mode **/ @Controller @RequestMapping("/payment") @CrossOrigin @SpringBootApplication public class PaymentServer { `] }, `server-Java-CKP_EMBEDDED-other1`), _jsx(AntomChunk, { language: `java`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id
* find your client id here: quickStart */ public static final String CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ public static final String ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ public static final String MERCHANT_PRIVATE_KEY = "your_private_key"; private final static AlipayClient CLIENT = new DefaultAlipayClient( EndPointConstants.SG, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY, CLIENT_ID); `] }, `server-Java-CKP_EMBEDDED-code1`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` public static void main(String[] args) { SpringApplication.run(PaymentServer.class, args); System.out.println("Open your browser and visit: http://localhost:8080"); } `] }, `server-Java-CKP_EMBEDDED-other2`), _jsx(AntomChunk, { language: `java`, steps: [`create-a-payment-session`], chunks: [` @PostMapping("/createSession") public ResponseEntity createPaymentSession(@RequestBody PaymentVO payment) { AlipayPaymentSessionRequest alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); alipayPaymentSessionRequest.setProductCode(ProductCodeType.CASHIER_PAYMENT); alipayPaymentSessionRequest.setProductScene(ProductSceneConstants.CHECKOUT_PAYMENT); // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object long amountMinorLong = Money.of(CurrencyUnit.of(payment.currency), new BigDecimal(payment.amountValue)).getAmountMinorLong(); // set amount Amount amount = Amount.builder().currency(payment.currency).value(String.valueOf(amountMinorLong)).build(); alipayPaymentSessionRequest.setPaymentAmount(amount); // replace with your paymentRequestId String paymentRequestId = UUID.randomUUID().toString(); alipayPaymentSessionRequest.setPaymentRequestId(paymentRequestId); // replace with your orderId String orderId = UUID.randomUUID().toString(); // set buyer info Buyer buyer = Buyer.builder().referenceBuyerId("yourBuyerId").build(); // set goods info Goods goods = Goods.builder().goodsBrand("Antom Brand").goodsCategory("outdoor goods/bag").goodsName("Classic Woman Bag").goodsQuantity("1") .goodsSkuName("Black").goodsImageUrl("https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ") .goodsUnitAmount(amount).goodsUrl("https://yourGoodsUrl").referenceGoodsId("yourGoodsId").build(); // set order info Order order = Order.builder().referenceOrderId(orderId) .orderDescription("antom ckp testing order").orderAmount(amount).buyer(buyer).goods(Stream.of(goods).collect(Collectors.toList())).build(); alipayPaymentSessionRequest.setOrder(order); // replace with your notify url // or configure your notify url here: Notification URL alipayPaymentSessionRequest.setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receiveNotify"); `] }, `server-Java-CKP_EMBEDDED-code2`), _jsx(AntomChunk, { language: `java`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url alipayPaymentSessionRequest.setPaymentRedirectUrl( "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId); `] }, `server-Java-CKP_EMBEDDED-code3`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` AlipayPaymentSessionResponse alipayPaymentSessionResponse; try { long startTime = System.currentTimeMillis(); System.out.println("paymentSession request: " + JSON.toJSONString(alipayPaymentSessionRequest)); alipayPaymentSessionResponse = CLIENT.execute(alipayPaymentSessionRequest); System.out.println("paymentSession response: " + JSON.toJSONString(alipayPaymentSessionResponse)); System.out .println("paymentSession request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok() .body(new ApiResponse(paymentRequestId, alipayPaymentSessionResponse)); } `] }, `server-Java-CKP_EMBEDDED-other3`), _jsx(AntomChunk, { language: `java`, steps: [`inquire-payment-result`], chunks: [` @RequestMapping(path = "/inquiryPayment", method = RequestMethod.POST) public ResponseEntity inquiryPayment(@RequestBody Map map) { String paymentRequestId = map.get("paymentRequestId"); AlipayPayQueryRequest alipayPayQueryRequest = new AlipayPayQueryRequest(); alipayPayQueryRequest.setPaymentRequestId(paymentRequestId); AlipayPayQueryResponse alipayPayQueryResponse; try { long startTime = System.currentTimeMillis(); System.out.println("inquiry payment request: " + JSON.toJSONString(alipayPayQueryRequest)); alipayPayQueryResponse = CLIENT.execute(alipayPayQueryRequest); System.out.println("inquiry payment response: " + JSON.toJSONString(alipayPayQueryResponse)); System.out .println("inquiry payment request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, alipayPayQueryResponse)); } `] }, `server-Java-CKP_EMBEDDED-code4`), _jsx(AntomChunk, { language: `java`, steps: [`receive-payment-notification`], chunks: [` /** * receive notify * * @param request request * @param notifyBody notify body * @return Result */ @PostMapping("/receiveNotify") @ResponseBody public ResultWrapper receiveNotify(HttpServletRequest request, @RequestBody String notifyBody) { // retrieve the required parameters from http request String requestUri = request.getRequestURI(); String requestMethod = request.getMethod(); // retrieve the required parameters from request header String requestTime = request.getHeader("request-time"); String clientId = request.getHeader("client-id"); String signature = request.getHeader("signature"); try { // verify the signature of notification boolean verifyResult = WebhookTool.checkSignature(requestUri, requestMethod, clientId, requestTime, signature, notifyBody, ANTOM_PUBLIC_KEY); if (!verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body JSONObject jsonObject = JSON.parseObject(notifyBody); String notifyType = (String)jsonObject.get("notifyType"); if("PAYMENT_RESULT".equals(notifyType)){ AlipayPayResultNotify paymentNotify = jsonObject.toJavaObject(AlipayPayResultNotify.class); if (paymentNotify != null && "SUCCESS".equals(paymentNotify.getResult().getResultCode())) { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. System.out.println("receive payment notify: " + JSON.toJSONString(paymentNotify)); return new ResultWrapper(Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build()); } }else if("CAPTURE_RESULT".equals(notifyType)){ AlipayCaptureResultNotify captureNotify = jsonObject.toJavaObject(AlipayCaptureResultNotify.class); if (captureNotify != null && "SUCCESS".equals(captureNotify.getResult().getResultCode())) { // handle your own business logic. System.out.println("receive capture notify: " + JSON.toJSONString(captureNotify)); return new ResultWrapper(Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build()); } } } catch (Exception e) { return new ResultWrapper(Result.builder().resultCode("FAIL").resultMessage("fail.").resultStatus(ResultStatusType.F).build()); } return new ResultWrapper(Result.builder().resultCode("SYSTEM_ERROR").resultMessage("system error.").resultStatus(ResultStatusType.F).build()); } `] }, `server-Java-CKP_EMBEDDED-code5`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` @Data public static class PaymentVO { private String amountValue; private String currency; } @Data private static class ApiResponse { private String status = "success"; private String paymentRequestId; private String message; private Object data; public ApiResponse(String paymentRequestId, Object data) { this.paymentRequestId = paymentRequestId; this.data = data; } public ApiResponse(String paymentRequestId, AlipayApiException e) { this.paymentRequestId = paymentRequestId; this.status = "error"; this.message = e.getMessage(); } } @Data public static class ResultWrapper { private Result result; public ResultWrapper(Result result) { this.result = result; } } } `] }, `server-Java-CKP_EMBEDDED-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/java/PaymentServer.java', when: { server: 'Java', integration_type: 'Hosted CKP' }, children: _jsxs(AntomFile, { language: `java`, filename: 'src/main/java/com/antom/checkout/ckp/PaymentServer.java', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.checkout.ckp; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import com.alipay.global.api.AlipayClient; import com.alipay.global.api.DefaultAlipayClient; import com.alipay.global.api.exception.AlipayApiException; import com.alipay.global.api.model.Result; import com.alipay.global.api.model.ResultStatusType; import com.alipay.global.api.model.ams.*; import com.alipay.global.api.model.constants.EndPointConstants; import com.alipay.global.api.model.constants.ProductSceneConstants; import com.alipay.global.api.request.ams.notify.AlipayCaptureResultNotify; import com.alipay.global.api.request.ams.notify.AlipayPayResultNotify; import com.alipay.global.api.request.ams.pay.AlipayPayQueryRequest; import com.alipay.global.api.request.ams.pay.AlipayPaymentSessionRequest; import com.alipay.global.api.response.ams.pay.AlipayPayQueryResponse; import com.alipay.global.api.response.ams.pay.AlipayPaymentSessionResponse; import com.alipay.global.api.tools.WebhookTool; import lombok.Data; import org.joda.money.CurrencyUnit; import org.joda.money.Money; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import java.math.BigDecimal; import java.util.*; import java.util.stream.Collectors; import java.util.stream.Stream; /** * sample payment server using Antom CKP integration mode **/ @Controller @RequestMapping("/payment") @CrossOrigin @SpringBootApplication public class PaymentServer { `] }, `server-Java-CKP_HOST-other1`), _jsx(AntomChunk, { language: `java`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id
* find your client id here: quickStart */ public static final String CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ public static final String ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ public static final String MERCHANT_PRIVATE_KEY = "your_private_key"; private final static AlipayClient CLIENT = new DefaultAlipayClient( EndPointConstants.SG, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY, CLIENT_ID); `] }, `server-Java-CKP_HOST-code1`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` public static void main(String[] args) { SpringApplication.run(PaymentServer.class, args); System.out.println("Open your browser and visit: http://localhost:8080"); } `] }, `server-Java-CKP_HOST-other2`), _jsx(AntomChunk, { language: `java`, steps: [`create-a-payment-session`], chunks: [` @PostMapping("/createSession") public ResponseEntity createPaymentSession(@RequestBody PaymentVO payment) { AlipayPaymentSessionRequest alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); alipayPaymentSessionRequest.setProductCode(ProductCodeType.CASHIER_PAYMENT); alipayPaymentSessionRequest.setProductScene(ProductSceneConstants.CHECKOUT_PAYMENT); // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object long amountMinorLong = Money.of(CurrencyUnit.of(payment.currency), new BigDecimal(payment.amountValue)).getAmountMinorLong(); // set amount Amount amount = Amount.builder().currency(payment.currency).value(String.valueOf(amountMinorLong)).build(); alipayPaymentSessionRequest.setPaymentAmount(amount); // replace with your paymentRequestId String paymentRequestId = UUID.randomUUID().toString(); alipayPaymentSessionRequest.setPaymentRequestId(paymentRequestId); // replace with your orderId String orderId = UUID.randomUUID().toString(); // set buyer info Buyer buyer = Buyer.builder().referenceBuyerId("yourBuyerId").build(); // set goods info Goods goods = Goods.builder().goodsBrand("Antom Brand").goodsCategory("outdoor goods/bag").goodsName("Classic Woman Bag").goodsQuantity("1") .goodsSkuName("Black").goodsImageUrl("https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ") .goodsUnitAmount(amount).goodsUrl("https://yourGoodsUrl").referenceGoodsId("yourGoodsId").build(); // set order info Order order = Order.builder().referenceOrderId(orderId) .orderDescription("antom ckp testing order").orderAmount(amount).buyer(buyer).goods(Stream.of(goods).collect(Collectors.toList())).build(); alipayPaymentSessionRequest.setOrder(order); // replace with your notify url // or configure your notify url here: Notification URL alipayPaymentSessionRequest.setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receiveNotify"); `] }, `server-Java-CKP_HOST-code2`), _jsx(AntomChunk, { language: `java`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url alipayPaymentSessionRequest.setPaymentRedirectUrl( "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId); `] }, `server-Java-CKP_HOST-code3`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` AlipayPaymentSessionResponse alipayPaymentSessionResponse; try { long startTime = System.currentTimeMillis(); System.out.println("paymentSession request: " + JSON.toJSONString(alipayPaymentSessionRequest)); alipayPaymentSessionResponse = CLIENT.execute(alipayPaymentSessionRequest); System.out.println("paymentSession response: " + JSON.toJSONString(alipayPaymentSessionResponse)); System.out .println("paymentSession request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok() .body(new ApiResponse(paymentRequestId, alipayPaymentSessionResponse)); } `] }, `server-Java-CKP_HOST-other3`), _jsx(AntomChunk, { language: `java`, steps: [`inquire-payment-result`], chunks: [` @RequestMapping(path = "/inquiryPayment", method = RequestMethod.POST) public ResponseEntity inquiryPayment(@RequestBody Map map) { String paymentRequestId = map.get("paymentRequestId"); AlipayPayQueryRequest alipayPayQueryRequest = new AlipayPayQueryRequest(); alipayPayQueryRequest.setPaymentRequestId(paymentRequestId); AlipayPayQueryResponse alipayPayQueryResponse; try { long startTime = System.currentTimeMillis(); System.out.println("inquiry payment request: " + JSON.toJSONString(alipayPayQueryRequest)); alipayPayQueryResponse = CLIENT.execute(alipayPayQueryRequest); System.out.println("inquiry payment response: " + JSON.toJSONString(alipayPayQueryResponse)); System.out .println("inquiry payment request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, alipayPayQueryResponse)); } `] }, `server-Java-CKP_HOST-code4`), _jsx(AntomChunk, { language: `java`, steps: [`receive-payment-notification`], chunks: [` /** * receive notify * * @param request request * @param notifyBody notify body * @return Result */ @PostMapping("/receiveNotify") @ResponseBody public ResultWrapper receiveNotify(HttpServletRequest request, @RequestBody String notifyBody) { // retrieve the required parameters from http request String requestUri = request.getRequestURI(); String requestMethod = request.getMethod(); // retrieve the required parameters from request header String requestTime = request.getHeader("request-time"); String clientId = request.getHeader("client-id"); String signature = request.getHeader("signature"); try { // verify the signature of notification boolean verifyResult = WebhookTool.checkSignature(requestUri, requestMethod, clientId, requestTime, signature, notifyBody, ANTOM_PUBLIC_KEY); if (!verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body JSONObject jsonObject = JSON.parseObject(notifyBody); String notifyType = (String)jsonObject.get("notifyType"); if("PAYMENT_RESULT".equals(notifyType)){ AlipayPayResultNotify paymentNotify = jsonObject.toJavaObject(AlipayPayResultNotify.class); if (paymentNotify != null && "SUCCESS".equals(paymentNotify.getResult().getResultCode())) { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. System.out.println("receive payment notify: " + JSON.toJSONString(paymentNotify)); return new ResultWrapper(Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build()); } }else if("CAPTURE_RESULT".equals(notifyType)){ AlipayCaptureResultNotify captureNotify = jsonObject.toJavaObject(AlipayCaptureResultNotify.class); if (captureNotify != null && "SUCCESS".equals(captureNotify.getResult().getResultCode())) { // handle your own business logic. System.out.println("receive capture notify: " + JSON.toJSONString(captureNotify)); return new ResultWrapper(Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build()); } } } catch (Exception e) { return new ResultWrapper(Result.builder().resultCode("FAIL").resultMessage("fail.").resultStatus(ResultStatusType.F).build()); } return new ResultWrapper(Result.builder().resultCode("SYSTEM_ERROR").resultMessage("system error.").resultStatus(ResultStatusType.F).build()); } `] }, `server-Java-CKP_HOST-code5`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` @Data public static class PaymentVO { private String amountValue; private String currency; } @Data private static class ApiResponse { private String status = "success"; private String paymentRequestId; private String message; private Object data; public ApiResponse(String paymentRequestId, Object data) { this.paymentRequestId = paymentRequestId; this.data = data; } public ApiResponse(String paymentRequestId, AlipayApiException e) { this.paymentRequestId = paymentRequestId; this.status = "error"; this.message = e.getMessage(); } } @Data public static class ResultWrapper { private Result result; public ResultWrapper(Result result) { this.result = result; } } } `] }, `server-Java-CKP_HOST-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/java/PaymentServer.java', when: { server: 'Java', integration_type: 'Payment Element' }, children: _jsxs(AntomFile, { language: `java`, filename: 'src/main/java/com/antom/checkout/ele/PaymentServer.java', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.checkout.ele; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import com.alipay.global.api.AlipayClient; import com.alipay.global.api.DefaultAlipayClient; import com.alipay.global.api.exception.AlipayApiException; import com.alipay.global.api.model.Result; import com.alipay.global.api.model.ResultStatusType; import com.alipay.global.api.model.ams.*; import com.alipay.global.api.model.constants.EndPointConstants; import com.alipay.global.api.model.constants.ProductSceneConstants; import com.alipay.global.api.request.ams.notify.AlipayCaptureResultNotify; import com.alipay.global.api.request.ams.notify.AlipayPayResultNotify; import com.alipay.global.api.request.ams.pay.AlipayPayQueryRequest; import com.alipay.global.api.request.ams.pay.AlipayPaymentSessionRequest; import com.alipay.global.api.response.ams.pay.AlipayPayQueryResponse; import com.alipay.global.api.response.ams.pay.AlipayPaymentSessionResponse; import com.alipay.global.api.tools.WebhookTool; import lombok.Data; import org.joda.money.CurrencyUnit; import org.joda.money.Money; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import java.math.BigDecimal; import java.util.Map; import java.util.UUID; /** * sample payment server using Antom ELEMENT integration mode **/ @Controller @RequestMapping("/payment") @CrossOrigin @SpringBootApplication public class PaymentServer { `] }, `server-Java-ELEMENT-other1`), _jsx(AntomChunk, { language: `java`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id
* find your client id here: quickStart */ public static final String CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ public static final String ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ public static final String MERCHANT_PRIVATE_KEY = "your_private_key"; /** * replace with your domain
* find your domain here: quickStart */ public static final String DOMAIN = EndPointConstants.SG; private final static AlipayClient CLIENT = new DefaultAlipayClient( DOMAIN, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY, CLIENT_ID); `] }, `server-Java-ELEMENT-code1`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` public static void main(String[] args) { SpringApplication.run(PaymentServer.class, args); System.out.println("Open your browser and visit: http://localhost:8080"); } `] }, `server-Java-ELEMENT-other2`), _jsx(AntomChunk, { language: `java`, steps: [`create-a-payment-session`], chunks: [` @PostMapping("/createSession") public ResponseEntity createPaymentSession(@RequestBody PaymentVO payment) { AlipayPaymentSessionRequest alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); alipayPaymentSessionRequest.setProductCode(ProductCodeType.CASHIER_PAYMENT); alipayPaymentSessionRequest.setProductScene(ProductSceneConstants.ELEMENT_PAYMENT); // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object long amountMinorLong = Money.of(CurrencyUnit.of(payment.currency), new BigDecimal(payment.amountValue)).getAmountMinorLong(); // set amount Amount amount = Amount.builder().currency(payment.currency).value(String.valueOf(amountMinorLong)).build(); alipayPaymentSessionRequest.setPaymentAmount(amount); // replace with your paymentRequestId String paymentRequestId = UUID.randomUUID().toString(); alipayPaymentSessionRequest.setPaymentRequestId(paymentRequestId); // replace with your orderId String orderId = UUID.randomUUID().toString(); // set buyer info Buyer buyer = Buyer.builder().referenceBuyerId("yourBuyerId").build(); // set order info Order order = Order.builder().referenceOrderId(orderId) .orderDescription("antom element testing order").orderAmount(amount).buyer(buyer).build(); alipayPaymentSessionRequest.setOrder(order); // replace with your notify url // or configure your notify url here: Notification URL alipayPaymentSessionRequest.setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receiveNotify"); // replace with your settlementCurrency // you can query your settlementCurrency here: Settlement overview SettlementStrategy settlementStrategy = SettlementStrategy.builder().settlementCurrency("SGD").build(); alipayPaymentSessionRequest.setSettlementStrategy(settlementStrategy); `] }, `server-Java-ELEMENT-code2`), _jsx(AntomChunk, { language: `java`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url alipayPaymentSessionRequest.setPaymentRedirectUrl( "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId); `] }, `server-Java-ELEMENT-code3`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` AlipayPaymentSessionResponse alipayPaymentSessionResponse; try { long startTime = System.currentTimeMillis(); System.out.println("paymentSession request: " + JSON.toJSONString(alipayPaymentSessionRequest)); alipayPaymentSessionResponse = CLIENT.execute(alipayPaymentSessionRequest); System.out.println("paymentSession response: " + JSON.toJSONString(alipayPaymentSessionResponse)); System.out.println("paymentSession request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok() .body(new ApiResponse(paymentRequestId, alipayPaymentSessionResponse)); } `] }, `server-Java-ELEMENT-other3`), _jsx(AntomChunk, { language: `java`, steps: [`inquire-payment-result`], chunks: [` @RequestMapping(path = "/inquiryPayment", method = RequestMethod.POST) public ResponseEntity inquiryPayment(@RequestBody Map map) { String paymentRequestId = map.get("paymentRequestId"); AlipayPayQueryRequest alipayPayQueryRequest = new AlipayPayQueryRequest(); alipayPayQueryRequest.setPaymentRequestId(paymentRequestId); AlipayPayQueryResponse alipayPayQueryResponse; try { long startTime = System.currentTimeMillis(); System.out.println("inquiry payment request: " + JSON.toJSONString(alipayPayQueryRequest)); alipayPayQueryResponse = CLIENT.execute(alipayPayQueryRequest); System.out.println("inquiry payment response: " + JSON.toJSONString(alipayPayQueryResponse)); System.out .println("inquiry payment request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, e)); } return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, alipayPayQueryResponse)); } `] }, `server-Java-ELEMENT-code4`), _jsx(AntomChunk, { language: `java`, steps: [`receive-payment-notification`], chunks: [` /** * receive notify * * @param request request * @param notifyBody notify body * @return Result */ @PostMapping("/receiveNotify") @ResponseBody public ResultWrapper receiveNotify(HttpServletRequest request, @RequestBody String notifyBody) { // retrieve the required parameters from http request String requestUri = request.getRequestURI(); String requestMethod = request.getMethod(); // retrieve the required parameters from request header String requestTime = request.getHeader("request-time"); String clientId = request.getHeader("client-id"); String signature = request.getHeader("signature"); try { // verify the signature of notification boolean verifyResult = WebhookTool.checkSignature(requestUri, requestMethod, clientId, requestTime, signature, notifyBody, ANTOM_PUBLIC_KEY); if (!verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body JSONObject jsonObject = JSON.parseObject(notifyBody); String notifyType = (String)jsonObject.get("notifyType"); if("PAYMENT_RESULT".equals(notifyType)){ AlipayPayResultNotify paymentNotify = jsonObject.toJavaObject(AlipayPayResultNotify.class); if (paymentNotify != null && "SUCCESS".equals(paymentNotify.getResult().getResultCode())) { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. System.out.println("receive payment notify: " + JSON.toJSONString(paymentNotify)); return new ResultWrapper(Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build()); } }else if("CAPTURE_RESULT".equals(notifyType)){ AlipayCaptureResultNotify captureNotify = jsonObject.toJavaObject(AlipayCaptureResultNotify.class); if (captureNotify != null && "SUCCESS".equals(captureNotify.getResult().getResultCode())) { // handle your own business logic. System.out.println("receive capture notify: " + JSON.toJSONString(captureNotify)); return new ResultWrapper(Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build()); } } } catch (Exception e) { return new ResultWrapper(Result.builder().resultCode("FAIL").resultMessage("fail.").resultStatus(ResultStatusType.F).build()); } return new ResultWrapper(Result.builder().resultCode("SYSTEM_ERROR").resultMessage("system error.").resultStatus(ResultStatusType.F).build()); } `] }, `server-Java-ELEMENT-code5`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` @Data public static class PaymentVO { private String amountValue; private String currency; } @Data private static class ApiResponse { private String status = "success"; private String paymentRequestId; private String message; private Object data; public ApiResponse(String paymentRequestId, Object data) { this.paymentRequestId = paymentRequestId; this.data = data; } public ApiResponse(String paymentRequestId, AlipayApiException e) { this.paymentRequestId = paymentRequestId; this.status = "error"; this.message = e.getMessage(); } } @Data public static class ResultWrapper { private Result result; public ResultWrapper(Result result) { this.result = result; } } } `] }, `server-Java-ELEMENT-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/python/server.py', when: { server: 'Python', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `python`, filename: 'server.py', downloadOnly: false, steps: [`get-integration-resources`, `initiate-a-payment-request`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`#! /usr/bin/env python3 """ server.py Antom Sample. Python 3.9 or newer required. """ import json import time import uuid from com.alipay.ams.api.default_alipay_client import DefaultAlipayClient from com.alipay.ams.api.exception.exception import AlipayApiException from com.alipay.ams.api.model.amount import Amount from com.alipay.ams.api.model.buyer import Buyer from com.alipay.ams.api.model.env import Env from com.alipay.ams.api.model.order import Order from com.alipay.ams.api.model.os_type import OsType from com.alipay.ams.api.model.payment_factor import PaymentFactor from com.alipay.ams.api.model.payment_method import PaymentMethod from com.alipay.ams.api.model.product_code_type import ProductCodeType from com.alipay.ams.api.model.terminal_type import TerminalType from com.alipay.ams.api.request.notify.alipay_pay_result_notify import AlipayPayResultNotify from com.alipay.ams.api.request.pay.alipay_pay_query_request import AlipayPayQueryRequest from com.alipay.ams.api.request.pay.alipay_pay_request import AlipayPayRequest from com.alipay.ams.api.response.pay.alipay_pay_query_response import AlipayPayQueryResponse from com.alipay.ams.api.response.pay.alipay_pay_response import AlipayPayResponse from com.alipay.ams.api.tools.webhook_tool import check_signature from flask import Blueprint, Flask, jsonify, request from flask_cors import CORS from money import Currency, Money `] }, `server-Python-API-other1`), _jsx(AntomChunk, { language: `python`, steps: [`get-integration-resources`], chunks: [`''' replace with your client id find your client id here: https://dashboard.antom.com/global-payments/developers/quickStart ''' CLIENT_ID = "your_client_id" ''' replace with your antom public key (used to verify signature) find your antom public key here: https://dashboard.antom.com/global-payments/developers/quickStart ''' ANTOM_PUBLIC_KEY = "antom_public_key" ''' replace with your private key (used to sign) please ensure the secure storage of your private key to prevent leakage ''' MERCHANT_PRIVATE_KEY = "your_private_key" default_alipay_client = DefaultAlipayClient("https://open-sea-global.alipay.com", CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY) `] }, `server-Python-API-code1`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`app = Flask(__name__) payment_bp = Blueprint("payment", __name__, url_prefix="/payment") CORS(app) `] }, `server-Python-API-other2`), _jsx(AntomChunk, { language: `python`, steps: [`initiate-a-payment-request`], chunks: [`@payment_bp.route("/pay", methods=['POST']) def pay(): payment_vo = request.get_json() terminal_type = payment_vo.get("terminalType", TerminalType.WEB.name) alipay_pay_request = AlipayPayRequest() alipay_pay_request.product_code = ProductCodeType.CASHIER_PAYMENT # convert amount unit(in practice, amount should be calculated on your serverside) # For details, please refer to: https://docs.antom.com/ac/ref/cc money_sub_units = Money(payment_vo['amountValue'], Currency[payment_vo['currency']]).sub_units # set amount amount = Amount(payment_vo['currency'], money_sub_units) alipay_pay_request.payment_amount = amount # replace with your paymentRequestId payment_request_id = str(uuid.uuid4()) alipay_pay_request.payment_request_id = payment_request_id # set paymentMethod payment_method = PaymentMethod() payment_method.payment_method_type = payment_vo['paymentMethodType'] alipay_pay_request.payment_method = payment_method if "CARD" == payment_vo['paymentMethodType']: payment_factor = PaymentFactor() payment_factor.is_authorization = True alipay_pay_request.payment_factor = payment_factor # set buyer info buyer = Buyer() buyer.reference_buyer_id = "your_buyer_id" # replace with your orderId order_id = str(uuid.uuid4()) # set order info order = Order() order.reference_order_id = order_id order.order_description = "antom api testing order" order.order_amount = amount order.buyer = buyer alipay_pay_request.order = order # set env info env = Env() env.terminal_type = TerminalType[terminal_type] env.client_ip = "1.2.3.4" if TerminalType.WEB.name != terminal_type and "osType" in payment_vo: env.os_type = OsType[payment_vo['osType']] alipay_pay_request.env = env # replace with your notify url # or configure your notify url here: https://dashboard.antom.com/global-payments/developers/iNotify alipay_pay_request.payment_notify_url = "http://www.yourNotifyUrl.com/payment/receivePaymentNotify" `] }, `server-Python-API-code2`), _jsx(AntomChunk, { language: `python`, steps: [`specify-the-payment-redirect-url`], chunks: [` # replace with your redirect url alipay_pay_request.payment_redirect_url = f"http://localhost:5173/index.html?paymentRequestId={payment_request_id}" `] }, `server-Python-API-code3`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` try: start_time = time.time() print(f"payment request: {alipay_pay_request.to_ams_json()}") alipay_pay_response_body = default_alipay_client.execute(alipay_pay_request) alipay_pay_response = AlipayPayResponse(alipay_pay_response_body) print(f"payment response: {alipay_pay_response_body}") print(f"payment request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_pay_response_body))) `] }, `server-Python-API-other3`), _jsx(AntomChunk, { language: `python`, steps: [`inquire-payment-result`], chunks: [`@payment_bp.route("/inquiryPayment", methods=['POST']) def inquery_payment(): inquery_vo = request.get_json() payment_request_id = inquery_vo.get("paymentRequestId") alipay_pay_query_request = AlipayPayQueryRequest() alipay_pay_query_request.payment_request_id = payment_request_id try: start_time = time.time() print(f"inquiry payment request: {alipay_pay_query_request.to_ams_json()}") alipay_pay_query_response_body = default_alipay_client.execute(alipay_pay_query_request) alipay_pay_query_response = AlipayPayQueryResponse(alipay_pay_query_response_body) print(f"inquiry payment response: {alipay_pay_query_response_body}") print(f"inquiry payment request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_pay_query_response_body))) `] }, `server-Python-API-code4`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` `] }, `server-Python-API-other4`), _jsx(AntomChunk, { language: `python`, steps: [`receive-payment-notification`], chunks: [`# receive payment notify @payment_bp.route("/receivePaymentNotify", methods=['POST']) def receive_payment_notify(): # retrieve the required parameters from http request notify_body = request.get_data(as_text=True) request_uri = request.path request_method = request.method # retrieve the required parameters from request header headers = request.headers request_time = headers.get("request-time") client_id = headers.get("client-id") signature = headers.get("signature") try: # verify the signature of notification verify_result = check_signature(request_method, request_uri, client_id, request_time, str(notify_body), signature, ANTOM_PUBLIC_KEY) if not verify_result: raise Exception("Invalid notify signature") # deserialize the notification body alipay_pay_result_notify = AlipayPayResultNotify(notify_body) if alipay_pay_result_notify.result.result_code == "SUCCESS": # handle your own business logic. # e.g. The relationship between payment information and users is kept in the database. print(f"receive payment notify: {notify_body}") return jsonify({"result": {"resultCode": "SUCCESS", "resultMessage": "success.", "resultStatus": "S"}}) except Exception as e: print(str(e)) return jsonify({"result": {"resultCode": "FAIL", "resultMessage": "fail.", "resultStatus": "F"}}) return jsonify({"result": {"resultCode": "SYSTEM_ERROR", "resultMessage": "system error.", "resultStatus": 'F'}}) `] }, `server-Python-API-code5`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` class ApiResponse: def __init__(self): self.__status = "success" self.__payment_request_id = "" self.__message = "" self.__data = None def success(self, payment_request_id, data): self.__payment_request_id = payment_request_id self.__data = data return self.to_json() def error(self, payment_request_id, e): self.__payment_request_id = payment_request_id self.__message = str(e) self.__status = "error" return self.to_json() def to_json(self): return { "status": self.__status, "message": self.__message, "data": self.__data, "paymentRequestId": self.__payment_request_id } app.register_blueprint(payment_bp) if __name__ == '__main__': app.run(host='localhost', port=8080) `] }, `server-Python-API-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/python/server.py', when: { server: 'Python', integration_type: 'SDK' }, children: _jsxs(AntomFile, { language: `python`, filename: 'server.py', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`#! /usr/bin/env python3 """ server.py Antom Sample. Python 3.9 or newer required. """ import json import time import uuid from com.alipay.ams.api.default_alipay_client import DefaultAlipayClient from com.alipay.ams.api.exception.exception import AlipayApiException from com.alipay.ams.api.model.amount import Amount from com.alipay.ams.api.model.buyer import Buyer from com.alipay.ams.api.model.order import Order from com.alipay.ams.api.model.payment_factor import PaymentFactor from com.alipay.ams.api.model.payment_method import PaymentMethod from com.alipay.ams.api.model.product_code_type import ProductCodeType from com.alipay.ams.api.request.notify.alipay_pay_result_notify import AlipayPayResultNotify from com.alipay.ams.api.request.pay.alipay_create_session_request import AlipayCreateSessionRequest from com.alipay.ams.api.request.pay.alipay_pay_query_request import AlipayPayQueryRequest from com.alipay.ams.api.response.pay.alipay_create_session_response import AlipayCreateSessionResponse from com.alipay.ams.api.response.pay.alipay_pay_query_response import AlipayPayQueryResponse from com.alipay.ams.api.tools.webhook_tool import check_signature from flask import Blueprint, Flask, jsonify, request from flask_cors import CORS from money import Currency, Money `] }, `server-Python-SDK-other1`), _jsx(AntomChunk, { language: `python`, steps: [`get-integration-resources`], chunks: [`''' replace with your client id find your client id here: https://dashboard.antom.com/global-payments/developers/quickStart ''' CLIENT_ID = "your_client_id" ''' replace with your antom public key (used to verify signature) find your antom public key here: https://dashboard.antom.com/global-payments/developers/quickStart ''' ANTOM_PUBLIC_KEY = "antom_public_key" ''' replace with your private key (used to sign) please ensure the secure storage of your private key to prevent leakage ''' MERCHANT_PRIVATE_KEY = "antom_public_key" default_alipay_client = DefaultAlipayClient("https://open-sea-global.alipay.com", CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY) `] }, `server-Python-SDK-code1`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`app = Flask(__name__) payment_bp = Blueprint("payment", __name__, url_prefix="/payment") CORS(app) `] }, `server-Python-SDK-other2`), _jsx(AntomChunk, { language: `python`, steps: [`create-a-payment-session`], chunks: [`@payment_bp.route("/createSession", methods=['POST']) def create_payment_session(): payment_vo = request.get_json() alipay_create_session_request = AlipayCreateSessionRequest() alipay_create_session_request.product_code = ProductCodeType.CASHIER_PAYMENT # convert amount unit(in practice, amount should be calculated on your serverside) # For details, please refer to: https://docs.antom.com/ac/ref/cc money_sub_units = Money(payment_vo['amountValue'], Currency[payment_vo['currency']]).sub_units # set amount amount = Amount(payment_vo['currency'], money_sub_units) alipay_create_session_request.payment_amount = amount # replace with your paymentRequestId payment_request_id = str(uuid.uuid4()) alipay_create_session_request.payment_request_id = payment_request_id # set paymentMethod payment_method = PaymentMethod() payment_method.payment_method_type = payment_vo['paymentMethodType'] alipay_create_session_request.payment_method = payment_method if "CARD" == payment_vo['paymentMethodType']: payment_factor = PaymentFactor() payment_factor.is_authorization = True alipay_create_session_request.payment_factor = payment_factor # set buyer info buyer = Buyer() buyer.reference_buyer_id = "your_buyer_id" # replace with your orderId order_id = str(uuid.uuid4()) # set order info order = Order() order.reference_order_id = order_id order.order_description = "antom sdk testing order" order.order_amount = amount order.buyer = buyer alipay_create_session_request.order = order # replace with your notify url # or configure your notify url here: https://dashboard.antom.com/global-payments/developers/iNotify alipay_create_session_request.payment_notify_url = "http://www.yourNotifyUrl.com/payment/receivePaymentNotify" `] }, `server-Python-SDK-code2`), _jsx(AntomChunk, { language: `python`, steps: [`specify-the-payment-redirect-url`], chunks: [` # replace with your redirect url alipay_create_session_request.payment_redirect_url = f"http://localhost:5173/index.html?paymentRequestId={payment_request_id}" `] }, `server-Python-SDK-code3`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` try: start_time = time.time() print(f"paymentSession request: {alipay_create_session_request.to_ams_json()}") alipay_create_session_response_body = default_alipay_client.execute(alipay_create_session_request) alipay_create_session_response = AlipayCreateSessionResponse(alipay_create_session_response_body) print(f"paymentSession response: {alipay_create_session_response_body}") print(f"paymentSession request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_create_session_response_body))) `] }, `server-Python-SDK-other3`), _jsx(AntomChunk, { language: `python`, steps: [`inquire-payment-result`], chunks: [`@payment_bp.route("/inquiryPayment", methods=['POST']) def inquery_payment(): inquery_vo = request.get_json() payment_request_id = inquery_vo.get("paymentRequestId") alipay_pay_query_request = AlipayPayQueryRequest() alipay_pay_query_request.payment_request_id = payment_request_id try: start_time = time.time() print(f"inquiry payment request: {alipay_pay_query_request.to_ams_json()}") alipay_pay_query_response_body = default_alipay_client.execute(alipay_pay_query_request) alipay_pay_query_response = AlipayPayQueryResponse(alipay_pay_query_response_body) print(f"inquiry payment response: {alipay_pay_query_response_body}") print(f"inquiry payment request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_pay_query_response_body))) `] }, `server-Python-SDK-code4`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` `] }, `server-Python-SDK-other4`), _jsx(AntomChunk, { language: `python`, steps: [`receive-payment-notification`], chunks: [`# receive payment notify @payment_bp.route("/receivePaymentNotify", methods=['POST']) def receive_payment_notify(): # retrieve the required parameters from http request notify_body = request.get_data(as_text=True) request_uri = request.path request_method = request.method # retrieve the required parameters from request header headers = request.headers request_time = headers.get("request-time") client_id = headers.get("client-id") signature = headers.get("signature") try: # verify the signature of notification verify_result = check_signature(request_method, request_uri, client_id, request_time, str(notify_body), signature, ANTOM_PUBLIC_KEY) if not verify_result: raise Exception("Invalid notify signature") # deserialize the notification body alipay_pay_result_notify = AlipayPayResultNotify(notify_body) if alipay_pay_result_notify.result.result_code == "SUCCESS": # handle your own business logic. # e.g. The relationship between payment information and users is kept in the database. print(f"receive payment notify: {notify_body}") return jsonify({"result": {"resultCode": "SUCCESS", "resultMessage": "success.", "resultStatus": "S"}}) except Exception as e: print(str(e)) return jsonify({"result": {"resultCode": "FAIL", "resultMessage": "fail.", "resultStatus": "F"}}) return jsonify({"result": {"resultCode": "SYSTEM_ERROR", "resultMessage": "system error.", "resultStatus": 'F'}}) `] }, `server-Python-SDK-code5`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` class ApiResponse: def __init__(self): self.__status = "success" self.__payment_request_id = "" self.__message = "" self.__data = None def success(self, payment_request_id, data): self.__payment_request_id = payment_request_id self.__data = data return self.to_json() def error(self, payment_request_id, e): self.__payment_request_id = payment_request_id self.__message = str(e) self.__status = "error" return self.to_json() def to_json(self): return { "status": self.__status, "message": self.__message, "data": self.__data, "paymentRequestId": self.__payment_request_id } app.register_blueprint(payment_bp) if __name__ == '__main__': app.run(host='localhost', port=8080) `] }, `server-Python-SDK-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/python/server.py', when: { server: 'Python', integration_type: 'Embedded CKP' }, children: _jsxs(AntomFile, { language: `python`, filename: 'server.py', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`#! /usr/bin/env python3 """ server.py Antom Sample. Python 3.9 or newer required. """ import json import time import uuid from com.alipay.ams.api.default_alipay_client import DefaultAlipayClient from com.alipay.ams.api.exception.exception import AlipayApiException from com.alipay.ams.api.model.amount import Amount from com.alipay.ams.api.model.buyer import Buyer from com.alipay.ams.api.model.goods import Goods from com.alipay.ams.api.model.order import Order from com.alipay.ams.api.model.product_code_type import ProductCodeType from com.alipay.ams.api.request.notify.alipay_capture_result_notify import AlipayCaptureResultNotify from com.alipay.ams.api.request.notify.alipay_pay_result_notify import AlipayPayResultNotify from com.alipay.ams.api.request.pay.alipay_create_session_request import AlipayCreateSessionRequest from com.alipay.ams.api.request.pay.alipay_pay_query_request import AlipayPayQueryRequest from com.alipay.ams.api.response.pay.alipay_create_session_response import AlipayCreateSessionResponse from com.alipay.ams.api.response.pay.alipay_pay_query_response import AlipayPayQueryResponse from com.alipay.ams.api.tools.webhook_tool import check_signature from flask import Blueprint, Flask, jsonify, request from flask_cors import CORS from money import Currency, Money `] }, `server-Python-CKP_EMBEDDED-other1`), _jsx(AntomChunk, { language: `python`, steps: [`get-integration-resources`], chunks: [`''' replace with your client id find your client id here: https://dashboard.antom.com/global-payments/developers/quickStart ''' CLIENT_ID = "your_client_id" ''' replace with your antom public key (used to verify signature) find your antom public key here: https://dashboard.antom.com/global-payments/developers/quickStart ''' ANTOM_PUBLIC_KEY = "antom_public_key" ''' replace with your private key (used to sign) please ensure the secure storage of your private key to prevent leakage ''' MERCHANT_PRIVATE_KEY = "your_private_key" default_alipay_client = DefaultAlipayClient("https://open-sea-global.alipay.com", CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY) `] }, `server-Python-CKP_EMBEDDED-code1`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`app = Flask(__name__) payment_bp = Blueprint("payment", __name__, url_prefix="/payment") CORS(app) `] }, `server-Python-CKP_EMBEDDED-other2`), _jsx(AntomChunk, { language: `python`, steps: [`create-a-payment-session`], chunks: [`@payment_bp.route("/createSession", methods=['POST']) def create_payment_session(): payment_vo = request.get_json() alipay_create_session_request = AlipayCreateSessionRequest() alipay_create_session_request.product_code = ProductCodeType.CASHIER_PAYMENT alipay_create_session_request.product_scene = "CHECKOUT_PAYMENT" # convert amount unit(in practice, amount should be calculated on your serverside) # For details, please refer to: https://docs.antom.com/ac/ref/cc money_sub_units = Money(payment_vo['amountValue'], Currency[payment_vo['currency']]).sub_units # set amount amount = Amount(payment_vo['currency'], money_sub_units) alipay_create_session_request.payment_amount = amount # replace with your paymentRequestId payment_request_id = str(uuid.uuid4()) alipay_create_session_request.payment_request_id = payment_request_id # set buyer info buyer = Buyer() buyer.reference_buyer_id = "your_buyer_id" # set goods info goods = Goods() goods.goods_brand = "Antom Brand" goods.goods_category = "outdoor goods/bag" goods.goods_name = "Classic Woman Bag" goods.goods_quantity = "1" goods.goods_sku_name = "Black" goods.goods_image_url = "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ" goods.goods_unit_amount = amount goods.goods_url = "https://yourGoodsUrl" goods.reference_goods_id = "yourGoodsId" # replace with your orderId order_id = str(uuid.uuid4()) # set order info order = Order() order.reference_order_id = order_id order.order_description = "antom ckp testing order" order.order_amount = amount order.buyer = buyer order.goods = goods alipay_create_session_request.order = order # replace with your notify url # or configure your notify url here: https://dashboard.antom.com/global-payments/developers/iNotify alipay_create_session_request.payment_notify_url = "http://www.yourNotifyUrl.com/payment/receiveNotify" `] }, `server-Python-CKP_EMBEDDED-code2`), _jsx(AntomChunk, { language: `python`, steps: [`specify-the-payment-redirect-url`], chunks: [` # replace with your redirect url alipay_create_session_request.payment_redirect_url = f"http://localhost:5173/index.html?paymentRequestId={payment_request_id}" `] }, `server-Python-CKP_EMBEDDED-code3`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` try: start_time = time.time() print(f"paymentSession request: {alipay_create_session_request.to_ams_json()}") alipay_create_session_response_body = default_alipay_client.execute(alipay_create_session_request) alipay_create_session_response = AlipayCreateSessionResponse(alipay_create_session_response_body) print(f"paymentSession response: {alipay_create_session_response_body}") print(f"paymentSession request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_create_session_response_body))) `] }, `server-Python-CKP_EMBEDDED-other3`), _jsx(AntomChunk, { language: `python`, steps: [`inquire-payment-result`], chunks: [`@payment_bp.route("/inquiryPayment", methods=['POST']) def inquery_payment(): inquery_vo = request.get_json() payment_request_id = inquery_vo.get("paymentRequestId") alipay_pay_query_request = AlipayPayQueryRequest() alipay_pay_query_request.payment_request_id = payment_request_id try: start_time = time.time() print(f"inquiry payment request: {alipay_pay_query_request.to_ams_json()}") alipay_pay_query_response_body = default_alipay_client.execute(alipay_pay_query_request) alipay_pay_query_response = AlipayPayQueryResponse(alipay_pay_query_response_body) print(f"inquiry payment response: {alipay_pay_query_response_body}") print(f"inquiry payment request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_pay_query_response_body))) `] }, `server-Python-CKP_EMBEDDED-code4`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` `] }, `server-Python-CKP_EMBEDDED-other4`), _jsx(AntomChunk, { language: `python`, steps: [`receive-payment-notification`], chunks: [`# receive notify @payment_bp.route("/receiveNotify", methods=['POST']) def receive_notify(): # retrieve the required parameters from http request notify_body = request.get_data(as_text=True) request_uri = request.path request_method = request.method # retrieve the required parameters from request header headers = request.headers request_time = headers.get("request-time") client_id = headers.get("client-id") signature = headers.get("signature") try: # verify the signature of notification verify_result = check_signature(request_method, request_uri, client_id, request_time, str(notify_body), signature, ANTOM_PUBLIC_KEY) if not verify_result: raise Exception("Invalid notify signature") # deserialize the notification body notify = json.loads(notify_body) if notify['notifyType'] == "PAYMENT_RESULT": alipay_pay_result_notify = AlipayPayResultNotify(notify_body) if alipay_pay_result_notify.result.result_code == "SUCCESS": # handle your own business logic. # e.g. The relationship between payment information and users is kept in the database. print(f"receive payment notify: {notify_body}") return jsonify({"result": {"resultCode": "SUCCESS", "resultMessage": "success.", "resultStatus": "S"}}) if notify['notifyType'] == "CAPTURE_RESULT": alipay_capture_result_notify = AlipayCaptureResultNotify(notify_body) if alipay_capture_result_notify.result.result_code == "SUCCESS": # handle your own business logic. print(f"receive capture notify: {notify_body}") return jsonify({"result": {"resultCode": "SUCCESS", "resultMessage": "success.", "resultStatus": "S"}}) except Exception as e: print(str(e)) return jsonify({"result": {"resultCode": "FAIL", "resultMessage": "fail.", "resultStatus": "F"}}) return jsonify({"result": {"resultCode": "SYSTEM_ERROR", "resultMessage": "system error.", "resultStatus": 'F'}}) `] }, `server-Python-CKP_EMBEDDED-code5`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` class ApiResponse: def __init__(self): self.__status = "success" self.__payment_request_id = "" self.__message = "" self.__data = None def success(self, payment_request_id, data): self.__payment_request_id = payment_request_id self.__data = data return self.to_json() def error(self, payment_request_id, e): self.__payment_request_id = payment_request_id self.__message = str(e) self.__status = "error" return self.to_json() def to_json(self): return { "status": self.__status, "message": self.__message, "data": self.__data, "paymentRequestId": self.__payment_request_id } app.register_blueprint(payment_bp) if __name__ == '__main__': app.run(host='localhost', port=8080) `] }, `server-Python-CKP_EMBEDDED-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/python/server.py', when: { server: 'Python', integration_type: 'Hosted CKP' }, children: _jsxs(AntomFile, { language: `python`, filename: 'server.py', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`#! /usr/bin/env python3 """ server.py Antom Sample. Python 3.9 or newer required. """ import json import time import uuid from com.alipay.ams.api.default_alipay_client import DefaultAlipayClient from com.alipay.ams.api.exception.exception import AlipayApiException from com.alipay.ams.api.model.amount import Amount from com.alipay.ams.api.model.buyer import Buyer from com.alipay.ams.api.model.goods import Goods from com.alipay.ams.api.model.order import Order from com.alipay.ams.api.model.product_code_type import ProductCodeType from com.alipay.ams.api.request.notify.alipay_capture_result_notify import AlipayCaptureResultNotify from com.alipay.ams.api.request.notify.alipay_pay_result_notify import AlipayPayResultNotify from com.alipay.ams.api.request.pay.alipay_create_session_request import AlipayCreateSessionRequest from com.alipay.ams.api.request.pay.alipay_pay_query_request import AlipayPayQueryRequest from com.alipay.ams.api.response.pay.alipay_create_session_response import AlipayCreateSessionResponse from com.alipay.ams.api.response.pay.alipay_pay_query_response import AlipayPayQueryResponse from com.alipay.ams.api.tools.webhook_tool import check_signature from flask import Blueprint, Flask, jsonify, request from flask_cors import CORS from money import Currency, Money `] }, `server-Python-CKP_HOST-other1`), _jsx(AntomChunk, { language: `python`, steps: [`get-integration-resources`], chunks: [`''' replace with your client id find your client id here: https://dashboard.antom.com/global-payments/developers/quickStart ''' CLIENT_ID = "your_client_id" ''' replace with your antom public key (used to verify signature) find your antom public key here: https://dashboard.antom.com/global-payments/developers/quickStart ''' ANTOM_PUBLIC_KEY = "antom_public_key" ''' replace with your private key (used to sign) please ensure the secure storage of your private key to prevent leakage ''' MERCHANT_PRIVATE_KEY = "your_private_key" default_alipay_client = DefaultAlipayClient("https://open-sea-global.alipay.com", CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY) `] }, `server-Python-CKP_HOST-code1`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`app = Flask(__name__) payment_bp = Blueprint("payment", __name__, url_prefix="/payment") CORS(app) `] }, `server-Python-CKP_HOST-other2`), _jsx(AntomChunk, { language: `python`, steps: [`create-a-payment-session`], chunks: [`@payment_bp.route("/createSession", methods=['POST']) def create_payment_session(): payment_vo = request.get_json() alipay_create_session_request = AlipayCreateSessionRequest() alipay_create_session_request.product_code = ProductCodeType.CASHIER_PAYMENT alipay_create_session_request.product_scene = "CHECKOUT_PAYMENT" # convert amount unit(in practice, amount should be calculated on your serverside) # For details, please refer to: https://docs.antom.com/ac/ref/cc money_sub_units = Money(payment_vo['amountValue'], Currency[payment_vo['currency']]).sub_units # set amount amount = Amount(payment_vo['currency'], money_sub_units) alipay_create_session_request.payment_amount = amount # replace with your paymentRequestId payment_request_id = str(uuid.uuid4()) alipay_create_session_request.payment_request_id = payment_request_id # set buyer info buyer = Buyer() buyer.reference_buyer_id = "your_buyer_id" # set goods info goods = Goods() goods.goods_brand = "Antom Brand" goods.goods_category = "outdoor goods/bag" goods.goods_name = "Classic Woman Bag" goods.goods_quantity = "1" goods.goods_sku_name = "Black" goods.goods_image_url = "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ" goods.goods_unit_amount = amount goods.goods_url = "https://yourGoodsUrl" goods.reference_goods_id = "yourGoodsId" # replace with your orderId order_id = str(uuid.uuid4()) # set order info order = Order() order.reference_order_id = order_id order.order_description = "antom ckp testing order" order.order_amount = amount order.buyer = buyer order.goods = goods alipay_create_session_request.order = order # replace with your notify url # or configure your notify url here: https://dashboard.antom.com/global-payments/developers/iNotify alipay_create_session_request.payment_notify_url = "http://www.yourNotifyUrl.com/payment/receiveNotify" `] }, `server-Python-CKP_HOST-code2`), _jsx(AntomChunk, { language: `python`, steps: [`specify-the-payment-redirect-url`], chunks: [` # replace with your redirect url alipay_create_session_request.payment_redirect_url = f"http://localhost:5173/index.html?paymentRequestId={payment_request_id}" `] }, `server-Python-CKP_HOST-code3`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` try: start_time = time.time() print(f"paymentSession request: {alipay_create_session_request.to_ams_json()}") alipay_create_session_response_body = default_alipay_client.execute(alipay_create_session_request) alipay_create_session_response = AlipayCreateSessionResponse(alipay_create_session_response_body) print(f"paymentSession response: {alipay_create_session_response_body}") print(f"paymentSession request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_create_session_response_body))) `] }, `server-Python-CKP_HOST-other3`), _jsx(AntomChunk, { language: `python`, steps: [`inquire-payment-result`], chunks: [`@payment_bp.route("/inquiryPayment", methods=['POST']) def inquery_payment(): inquery_vo = request.get_json() payment_request_id = inquery_vo.get("paymentRequestId") alipay_pay_query_request = AlipayPayQueryRequest() alipay_pay_query_request.payment_request_id = payment_request_id try: start_time = time.time() print(f"inquiry payment request: {alipay_pay_query_request.to_ams_json()}") alipay_pay_query_response_body = default_alipay_client.execute(alipay_pay_query_request) alipay_pay_query_response = AlipayPayQueryResponse(alipay_pay_query_response_body) print(f"inquiry payment response: {alipay_pay_query_response_body}") print(f"inquiry payment request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_pay_query_response_body))) `] }, `server-Python-CKP_HOST-code4`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` `] }, `server-Python-CKP_HOST-other4`), _jsx(AntomChunk, { language: `python`, steps: [`receive-payment-notification`], chunks: [`# receive notify @payment_bp.route("/receiveNotify", methods=['POST']) def receive_notify(): # retrieve the required parameters from http request notify_body = request.get_data(as_text=True) request_uri = request.path request_method = request.method # retrieve the required parameters from request header headers = request.headers request_time = headers.get("request-time") client_id = headers.get("client-id") signature = headers.get("signature") try: # verify the signature of notification verify_result = check_signature(request_method, request_uri, client_id, request_time, str(notify_body), signature, ANTOM_PUBLIC_KEY) if not verify_result: raise Exception("Invalid notify signature") # deserialize the notification body notify = json.loads(notify_body) if notify['notifyType'] == "PAYMENT_RESULT": alipay_pay_result_notify = AlipayPayResultNotify(notify_body) if alipay_pay_result_notify.result.result_code == "SUCCESS": # handle your own business logic. # e.g. The relationship between payment information and users is kept in the database. print(f"receive payment notify: {notify_body}") return jsonify({"result": {"resultCode": "SUCCESS", "resultMessage": "success.", "resultStatus": "S"}}) if notify['notifyType'] == "CAPTURE_RESULT": alipay_capture_result_notify = AlipayCaptureResultNotify(notify_body) if alipay_capture_result_notify.result.result_code == "SUCCESS": # handle your own business logic. print(f"receive capture notify: {notify_body}") return jsonify({"result": {"resultCode": "SUCCESS", "resultMessage": "success.", "resultStatus": "S"}}) except Exception as e: print(str(e)) return jsonify({"result": {"resultCode": "FAIL", "resultMessage": "fail.", "resultStatus": "F"}}) return jsonify({"result": {"resultCode": "SYSTEM_ERROR", "resultMessage": "system error.", "resultStatus": 'F'}}) `] }, `server-Python-CKP_HOST-code5`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` class ApiResponse: def __init__(self): self.__status = "success" self.__payment_request_id = "" self.__message = "" self.__data = None def success(self, payment_request_id, data): self.__payment_request_id = payment_request_id self.__data = data return self.to_json() def error(self, payment_request_id, e): self.__payment_request_id = payment_request_id self.__message = str(e) self.__status = "error" return self.to_json() def to_json(self): return { "status": self.__status, "message": self.__message, "data": self.__data, "paymentRequestId": self.__payment_request_id } app.register_blueprint(payment_bp) if __name__ == '__main__': app.run(host='localhost', port=8080) `] }, `server-Python-CKP_HOST-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/python/server.py', when: { server: 'Python', integration_type: 'Payment Element' }, children: _jsxs(AntomFile, { language: `python`, filename: 'server.py', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`#! /usr/bin/env python3 """ server.py Antom Sample. Python 3.9 or newer required. """ import json import time import uuid from com.alipay.ams.api.default_alipay_client import DefaultAlipayClient from com.alipay.ams.api.exception.exception import AlipayApiException from com.alipay.ams.api.model.amount import Amount from com.alipay.ams.api.model.buyer import Buyer from com.alipay.ams.api.model.order import Order from com.alipay.ams.api.model.product_code_type import ProductCodeType from com.alipay.ams.api.model.settlement_strategy import SettlementStrategy from com.alipay.ams.api.request.notify.alipay_capture_result_notify import AlipayCaptureResultNotify from com.alipay.ams.api.request.notify.alipay_pay_result_notify import AlipayPayResultNotify from com.alipay.ams.api.request.pay.alipay_create_session_request import AlipayCreateSessionRequest from com.alipay.ams.api.request.pay.alipay_pay_query_request import AlipayPayQueryRequest from com.alipay.ams.api.response.pay.alipay_create_session_response import AlipayCreateSessionResponse from com.alipay.ams.api.response.pay.alipay_pay_query_response import AlipayPayQueryResponse from com.alipay.ams.api.tools.webhook_tool import check_signature from flask import Blueprint, Flask, jsonify, request from flask_cors import CORS from money import Currency, Money `] }, `server-Python-ELEMENT-other1`), _jsx(AntomChunk, { language: `python`, steps: [`get-integration-resources`], chunks: [`''' replace with your client id find your client id here: https://dashboard.antom.com/global-payments/developers/quickStart ''' CLIENT_ID = "your_client_id" ''' replace with your antom public key (used to verify signature) find your antom public key here: https://dashboard.antom.com/global-payments/developers/quickStart ''' ANTOM_PUBLIC_KEY = "antom_public_key" ''' replace with your private key (used to sign) please ensure the secure storage of your private key to prevent leakage ''' MERCHANT_PRIVATE_KEY = "your_private_key" ''' replace with your domain
find your domain here: https://dashboard.antom.com/global-payments/developers/quickStart ''' DOMAIN = "https://open-sea-global.alipay.com" default_alipay_client = DefaultAlipayClient(DOMAIN, CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY) `] }, `server-Python-ELEMENT-code1`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`app = Flask(__name__) payment_bp = Blueprint("payment", __name__, url_prefix="/payment") CORS(app) `] }, `server-Python-ELEMENT-other2`), _jsx(AntomChunk, { language: `python`, steps: [`create-a-payment-session`], chunks: [`@payment_bp.route("/createSession", methods=['POST']) def create_payment_session(): payment_vo = request.get_json() alipay_create_session_request = AlipayCreateSessionRequest() alipay_create_session_request.product_code = ProductCodeType.CASHIER_PAYMENT alipay_create_session_request.product_scene = "ELEMENT_PAYMENT" # convert amount unit(in practice, amount should be calculated on your serverside) # For details, please refer to: https://docs.antom.com/ac/ref/cc money_sub_units = Money(payment_vo['amountValue'], Currency[payment_vo['currency']]).sub_units # set amount amount = Amount(payment_vo['currency'], money_sub_units) alipay_create_session_request.payment_amount = amount # replace with your paymentRequestId payment_request_id = str(uuid.uuid4()) alipay_create_session_request.payment_request_id = payment_request_id # set buyer info buyer = Buyer() buyer.reference_buyer_id = "your_buyer_id" # replace with your orderId order_id = str(uuid.uuid4()) # set order info order = Order() order.reference_order_id = order_id order.order_description = "antom element testing order" order.order_amount = amount order.buyer = buyer alipay_create_session_request.order = order # replace with your settlementCurrency # you can query your settlementCurrency here:"https://dashboard.antom.com/global-payments/finance/overview">Settlement overview settlement_strategy = SettlementStrategy() settlement_strategy.settlement_currency = "SGD" alipay_create_session_request.settlement_strategy = settlement_strategy # replace with your notify url # or configure your notify url here: https://dashboard.antom.com/global-payments/developers/iNotify alipay_create_session_request.payment_notify_url = "http://www.yourNotifyUrl.com/payment/receiveNotify" `] }, `server-Python-ELEMENT-code2`), _jsx(AntomChunk, { language: `python`, steps: [`specify-the-payment-redirect-url`], chunks: [` # replace with your redirect url alipay_create_session_request.payment_redirect_url = f"http://localhost:5173/index.html?paymentRequestId={payment_request_id}" `] }, `server-Python-ELEMENT-code3`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` try: start_time = time.time() print(f"paymentSession request: {alipay_create_session_request.to_ams_json()}") alipay_create_session_response_body = default_alipay_client.execute(alipay_create_session_request) alipay_create_session_response = AlipayCreateSessionResponse(alipay_create_session_response_body) print(f"paymentSession response: {alipay_create_session_response_body}") print(f"paymentSession request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_create_session_response_body))) `] }, `server-Python-ELEMENT-other3`), _jsx(AntomChunk, { language: `python`, steps: [`inquire-payment-result`], chunks: [`@payment_bp.route("/inquiryPayment", methods=['POST']) def inquery_payment(): inquery_vo = request.get_json() payment_request_id = inquery_vo.get("paymentRequestId") alipay_pay_query_request = AlipayPayQueryRequest() alipay_pay_query_request.payment_request_id = payment_request_id try: start_time = time.time() print(f"inquiry payment request: {alipay_pay_query_request.to_ams_json()}") alipay_pay_query_response_body = default_alipay_client.execute(alipay_pay_query_request) alipay_pay_query_response = AlipayPayQueryResponse(alipay_pay_query_response_body) print(f"inquiry payment response: {alipay_pay_query_response_body}") print(f"inquiry payment request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, e)) return jsonify(ApiResponse().success(payment_request_id, json.loads(alipay_pay_query_response_body))) `] }, `server-Python-ELEMENT-code4`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` `] }, `server-Python-ELEMENT-other4`), _jsx(AntomChunk, { language: `python`, steps: [`receive-payment-notification`], chunks: [`# receive notify @payment_bp.route("/receiveNotify", methods=['POST']) def receive_notify(): # retrieve the required parameters from http request notify_body = request.get_data(as_text=True) request_uri = request.path request_method = request.method # retrieve the required parameters from request header headers = request.headers request_time = headers.get("request-time") client_id = headers.get("client-id") signature = headers.get("signature") try: # verify the signature of notification verify_result = check_signature(request_method, request_uri, client_id, request_time, str(notify_body), signature, ANTOM_PUBLIC_KEY) if not verify_result: raise Exception("Invalid notify signature") # deserialize the notification body notify = json.loads(notify_body) if notify['notifyType'] == "PAYMENT_RESULT": alipay_pay_result_notify = AlipayPayResultNotify(notify_body) if alipay_pay_result_notify.result.result_code == "SUCCESS": # handle your own business logic. # e.g. The relationship between payment information and users is kept in the database. print(f"receive payment notify: {notify_body}") return jsonify({"result": {"resultCode": "SUCCESS", "resultMessage": "success.", "resultStatus": "S"}}) if notify['notifyType'] == "CAPTURE_RESULT": alipay_capture_result_notify = AlipayCaptureResultNotify(notify_body) if alipay_capture_result_notify.result.result_code == "SUCCESS": # handle your own business logic. print(f"receive capture notify: {notify_body}") return jsonify({"result": {"resultCode": "SUCCESS", "resultMessage": "success.", "resultStatus": "S"}}) except Exception as e: print(str(e)) return jsonify({"result": {"resultCode": "FAIL", "resultMessage": "fail.", "resultStatus": "F"}}) return jsonify({"result": {"resultCode": "SYSTEM_ERROR", "resultMessage": "system error.", "resultStatus": 'F'}}) `] }, `server-Python-ELEMENT-code5`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` class ApiResponse: def __init__(self): self.__status = "success" self.__payment_request_id = "" self.__message = "" self.__data = None def success(self, payment_request_id, data): self.__payment_request_id = payment_request_id self.__data = data return self.to_json() def error(self, payment_request_id, e): self.__payment_request_id = payment_request_id self.__message = str(e) self.__status = "error" return self.to_json() def to_json(self): return { "status": self.__status, "message": self.__message, "data": self.__data, "paymentRequestId": self.__payment_request_id } app.register_blueprint(payment_bp) if __name__ == '__main__': app.run(host='localhost', port=8080) `] }, `server-Python-ELEMENT-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/php/server.php', when: { server: 'PHP', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `php`, filename: 'server.php', downloadOnly: false, steps: [`get-integration-resources`, `initiate-a-payment-request`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` * find your client id here: quickStart */ const CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ const ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ const MERCHANT_PRIVATE_KEY = "your_private_key"; private static \$CLIENT; public function __construct() { self::\$CLIENT = new DefaultAlipayClient( "https://open-sea-global.alipay.com", self::MERCHANT_PRIVATE_KEY, self::ANTOM_PUBLIC_KEY, self::CLIENT_ID ); } `] }, `server-PHP-API-code1`), _jsx(AntomChunk, { language: `php`, steps: [`initiate-a-payment-request`], chunks: [` public function pay(\$payment) { \$alipayPayRequest = new AlipayPayRequest(); \$alipayPayRequest->setProductCode(ProductCodeType::CASHIER_PAYMENT); \$payment['terminalType'] = isset(\$payment['terminalType']) ? \$payment['terminalType'] : TerminalType::WEB; // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object \$moneyParser = new DecimalMoneyParser(new ISOCurrencies()); \$money = \$moneyParser->parse((string)\$payment['amountValue'], new Currency(\$payment['currency'])); // set amount \$amount = new Amount(); \$amount->setCurrency(\$payment['currency']); \$amount->setValue(\$money->getAmount()); \$alipayPayRequest->setPaymentAmount(\$amount); // replace with your paymentRequestId \$paymentRequestId = uniqid('PR_'); \$alipayPayRequest->setPaymentRequestId(\$paymentRequestId); // set paymentMethod \$paymentMethod = new PaymentMethod(); \$paymentMethod->setPaymentMethodType(\$payment['paymentMethodType']); \$alipayPayRequest->setPaymentMethod(\$paymentMethod); // replace with your orderId \$orderId = uniqid('ORDER_'); // when paymentMethodType is CARD, need to set authorization if (\$payment['paymentMethodType'] === 'CARD') { \$paymentFactor = new PaymentFactor(); \$paymentFactor->setIsAuthorization(true); \$alipayPayRequest->setPaymentFactor(\$paymentFactor); } // set buyer info \$buyer = new Buyer(); \$buyer->setReferenceBuyerId("yourBuyerId"); // set order info \$order = new Order(); \$order->setReferenceOrderId(\$orderId); \$order->setOrderDescription("antom api testing order"); \$order->setOrderAmount(\$amount); \$order->setBuyer(\$buyer); \$alipayPayRequest->setOrder(\$order); // set env info \$env = new Env(); \$p = \$payment['terminalType']; error_log("terminalType: " . \$p); \$env->setTerminalType(\$payment['terminalType']); \$env->setClientIp("1.2.3.4"); if (\$payment['terminalType'] !== TerminalType::WEB && !empty(\$payment['osType'])) { \$env->setOsType(\$payment['osType']); } \$alipayPayRequest->setEnv(\$env); // replace with your notify url // or configure your notify url here: Notification URL \$alipayPayRequest->setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receivePaymentNotify"); `] }, `server-PHP-API-code2`), _jsx(AntomChunk, { language: `php`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url \$alipayPayRequest->setPaymentRedirectUrl( "http://localhost:5173/index.html?paymentRequestId=" . \$paymentRequestId ); `] }, `server-PHP-API-code3`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` try { \$startTime = microtime(true); error_log("payment request: " . json_encode(\$alipayPayRequest)); \$alipayPayResponse = self::\$CLIENT->execute(\$alipayPayRequest); error_log("payment response: " . json_encode(\$alipayPayResponse)); error_log("payment request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPayResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-API-other2`), _jsx(AntomChunk, { language: `php`, steps: [`inquire-payment-result`], chunks: [` public function inquiryPayment(\$data) { \$paymentRequestId = \$data['paymentRequestId']; \$alipayPayQueryRequest = new AlipayPayQueryRequest(); \$alipayPayQueryRequest->setPaymentRequestId(\$paymentRequestId); try { \$startTime = microtime(true); error_log("inquiry payment request: " . json_encode(\$alipayPayQueryRequest)); \$alipayPayQueryResponse = self::\$CLIENT->execute(\$alipayPayQueryRequest); error_log("inquiry payment response: " . json_encode(\$alipayPayQueryResponse)); error_log("inquiry payment request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPayQueryResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-API-code4`), _jsx(AntomChunk, { language: `php`, steps: [`receive-payment-notification`], chunks: [` /** * receive payment notify * */ public function receivePaymentNotify(\$request, \$notifyBody) { // retrieve the required parameters from http request \$requestUri = \$request->getResourceUri(); \$requestMethod = \$request->getMethod(); // retrieve the required parameters from request header \$requestTime = \$request->headers('request-time'); \$clientId = \$request->headers('client-id'); \$signature = \$request->headers('signature'); error_log('uri: ' . \$requestUri); error_log('method: ' . \$requestMethod); error_log('clientId: ' . \$clientId); error_log('requestTime: ' . \$requestTime); error_log('signature: ' . \$signature); error_log('notifyBody: ' . \$notifyBody); \$realSignature = ''; try { // verify the signature of notification if (empty(\$signature)) { throw new RuntimeException("Invalid notify signature"); }else{ \$parts = explode("signature=", \$signature); if(count(\$parts)>1){ \$realSignature = \$parts[1]; } } \$verifyResult = SignatureTool::verify( \$requestMethod, \$requestUri, \$clientId, \$requestTime, \$notifyBody, \$realSignature, self::ANTOM_PUBLIC_KEY ); if (!\$verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body \$paymentNotify = json_decode(\$notifyBody, true); if (\$paymentNotify && \$paymentNotify['result']['resultCode'] === 'SUCCESS') { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. error_log("receive payment notify: " . json_encode(\$paymentNotify)); return array( 'resultCode' => 'SUCCESS', 'resultMessage' => 'success.', 'resultStatus' => 'S' ); } } catch (Exception \$e) { return array( 'resultCode' => 'FAIL', 'resultMessage' => 'fail.', 'resultStatus' => 'F' ); } return array( 'resultCode' => 'SYSTEM_ERROR', 'resultMessage' => 'system error.', 'resultStatus' => 'F' ); } `] }, `server-PHP-API-code5`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` private function apiResponse(\$paymentRequestId, \$data) { if (\$data instanceof Exception) { return array( 'status' => 'error', 'paymentRequestId' => \$paymentRequestId, 'message' => \$data->getMessage() ); } return array( 'status' => 'success', 'paymentRequestId' => \$paymentRequestId, 'data' => \$data ); } } // Slim Framework routes setup \$app = new \\Slim\\Slim(array( 'base.path' => '' )); // Add CORS middleware \$app->response->headers->set('Access-Control-Allow-Origin', '*'); \$app->response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); \$app->response->headers->set('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization'); // Add OPTIONS request handler \$app->options('/(:path+)', function () use (\$app) { \$app->response->setStatus(200); }); \$paymentServer = new PaymentServer(); \$app->post('/payment/pay', function () use (\$app, \$paymentServer) { \$payment = \$app->request->getBody(); \$payment = json_decode(\$payment, true); \$response = \$paymentServer->pay(\$payment); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/inquiryPayment', function () use (\$app, \$paymentServer) { \$data = \$app->request->getBody(); \$data = json_decode(\$data, true); \$response = \$paymentServer->inquiryPayment(\$data); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/receivePaymentNotify', function () use (\$app, \$paymentServer) { \$notifyBody = \$app->request->getBody(); \$response = \$paymentServer->receivePaymentNotify(\$app->request, \$notifyBody); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->run(); `] }, `server-PHP-API-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/php/server.php', when: { server: 'PHP', integration_type: 'SDK' }, children: _jsxs(AntomFile, { language: `php`, filename: 'server.php', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` * find your client id here: quickStart */ const CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ const ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ const MERCHANT_PRIVATE_KEY = "your_private_key"; private static \$CLIENT; public function __construct() { self::\$CLIENT = new DefaultAlipayClient( "https://open-sea-global.alipay.com", self::MERCHANT_PRIVATE_KEY, self::ANTOM_PUBLIC_KEY, self::CLIENT_ID ); } `] }, `server-PHP-SDK-code1`), _jsx(AntomChunk, { language: `php`, steps: [`create-a-payment-session`], chunks: [` public function createPaymentSession(\$payment) { \$alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); \$alipayPaymentSessionRequest->setProductCode(ProductCodeType::CASHIER_PAYMENT); // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object \$moneyParser = new DecimalMoneyParser(new ISOCurrencies()); \$money = \$moneyParser->parse((string)\$payment['amountValue'], new Currency(\$payment['currency'])); // set amount \$amount = new Amount(); \$amount->setCurrency(\$payment['currency']); \$amount->setValue(\$money->getAmount()); \$alipayPaymentSessionRequest->setPaymentAmount(\$amount); // replace with your paymentRequestId \$paymentRequestId = uniqid('PR_'); \$alipayPaymentSessionRequest->setPaymentRequestId(\$paymentRequestId); // set paymentMethod \$paymentMethod = new PaymentMethod(); \$paymentMethod->setPaymentMethodType(\$payment['paymentMethodType']); \$alipayPaymentSessionRequest->setPaymentMethod(\$paymentMethod); // replace with your orderId \$orderId = uniqid('ORDER_'); // when paymentMethodType is CARD, need to set authorization if (\$payment['paymentMethodType'] === 'CARD') { \$paymentFactor = new PaymentFactor(); \$paymentFactor->setIsAuthorization(true); \$alipayPaymentSessionRequest->setPaymentFactor(\$paymentFactor); } // set buyer info \$buyer = new Buyer(); \$buyer->setReferenceBuyerId("yourBuyerId"); // set order info \$order = new Order(); \$order->setReferenceOrderId(\$orderId); \$order->setOrderDescription("antom sdk testing order"); \$order->setOrderAmount(\$amount); \$order->setBuyer(\$buyer); \$alipayPaymentSessionRequest->setOrder(\$order); // replace with your notify url // or configure your notify url here: Notification URL \$alipayPaymentSessionRequest->setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receivePaymentNotify"); `] }, `server-PHP-SDK-code2`), _jsx(AntomChunk, { language: `php`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url \$alipayPaymentSessionRequest->setPaymentRedirectUrl( "http://localhost:5173/index.html?paymentRequestId=" . \$paymentRequestId ); `] }, `server-PHP-SDK-code3`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` try { \$startTime = microtime(true); error_log("paymentSession request: " . json_encode(\$alipayPaymentSessionRequest)); \$alipayPaymentSessionResponse = self::\$CLIENT->execute(\$alipayPaymentSessionRequest); error_log("paymentSession response: " . json_encode(\$alipayPaymentSessionResponse)); error_log("paymentSession request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPaymentSessionResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-SDK-other2`), _jsx(AntomChunk, { language: `php`, steps: [`inquire-payment-result`], chunks: [` public function inquiryPayment(\$data) { \$paymentRequestId = \$data['paymentRequestId']; \$alipayPayQueryRequest = new AlipayPayQueryRequest(); \$alipayPayQueryRequest->setPaymentRequestId(\$paymentRequestId); try { \$startTime = microtime(true); error_log("inquiry payment request: " . json_encode(\$alipayPayQueryRequest)); \$alipayPayQueryResponse = self::\$CLIENT->execute(\$alipayPayQueryRequest); error_log("inquiry payment response: " . json_encode(\$alipayPayQueryResponse)); error_log("inquiry payment request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPayQueryResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-SDK-code4`), _jsx(AntomChunk, { language: `php`, steps: [`receive-payment-notification`], chunks: [` /** * receive payment notify */ public function receivePaymentNotify(\$request, \$notifyBody) { // retrieve the required parameters from http request \$requestUri = \$request->getResourceUri(); \$requestMethod = \$request->getMethod(); // retrieve the required parameters from request header \$requestTime = \$request->headers('request-time'); \$clientId = \$request->headers('client-id'); \$signature = \$request->headers('signature'); try { // verify the signature of notification if (empty(\$signature)) { throw new RuntimeException("Invalid notify signature"); }else{ \$parts = explode("signature=", \$signature); if(count(\$parts)>1){ \$realSignature = \$parts[1]; } } \$verifyResult = SignatureTool::verify( \$requestMethod, \$requestUri, \$clientId, \$requestTime, \$notifyBody, \$realSignature, self::ANTOM_PUBLIC_KEY ); if (!\$verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body \$paymentNotify = json_decode(\$notifyBody, true); if (\$paymentNotify && \$paymentNotify['result']['resultCode'] === 'SUCCESS') { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. error_log("receive payment notify: " . json_encode(\$paymentNotify)); return array( 'resultCode' => 'SUCCESS', 'resultMessage' => 'success.', 'resultStatus' => 'S' ); } } catch (Exception \$e) { return array( 'resultCode' => 'FAIL', 'resultMessage' => 'fail.', 'resultStatus' => 'F' ); } return array( 'resultCode' => 'SYSTEM_ERROR', 'resultMessage' => 'system error.', 'resultStatus' => 'F' ); } `] }, `server-PHP-SDK-code5`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` private function apiResponse(\$paymentRequestId, \$data) { if (\$data instanceof Exception) { return array( 'status' => 'error', 'paymentRequestId' => \$paymentRequestId, 'message' => \$data->getMessage() ); } return array( 'status' => 'success', 'paymentRequestId' => \$paymentRequestId, 'data' => \$data ); } } // Slim Framework routes setup \$app = new \\Slim\\Slim(array( 'base.path' => '' )); // Add CORS middleware \$app->response->headers->set('Access-Control-Allow-Origin', '*'); \$app->response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); \$app->response->headers->set('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization'); // Add OPTIONS request handler \$app->options('/(:path+)', function () use (\$app) { \$app->response->setStatus(200); }); \$paymentServer = new PaymentServer(); \$app->post('/payment/createSession', function () use (\$app, \$paymentServer) { \$payment = \$app->request->getBody(); \$payment = json_decode(\$payment, true); \$response = \$paymentServer->createPaymentSession(\$payment); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/inquiryPayment', function () use (\$app, \$paymentServer) { \$data = \$app->request->getBody(); \$data = json_decode(\$data, true); \$response = \$paymentServer->inquiryPayment(\$data); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/receivePaymentNotify', function () use (\$app, \$paymentServer) { \$notifyBody = \$app->request->getBody(); \$response = \$paymentServer->receivePaymentNotify(\$app->request, \$notifyBody); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->run(); `] }, `server-PHP-SDK-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/php/server.php', when: { server: 'PHP', integration_type: 'Embedded CKP' }, children: _jsxs(AntomFile, { language: `php`, filename: 'server.php', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` * find your client id here: quickStart */ const CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ const ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ const MERCHANT_PRIVATE_KEY = "your_private_key"; private static \$CLIENT; public function __construct() { self::\$CLIENT = new DefaultAlipayClient( "https://open-sea-global.alipay.com", self::MERCHANT_PRIVATE_KEY, self::ANTOM_PUBLIC_KEY, self::CLIENT_ID ); } `] }, `server-PHP-CKP_EMBEDDED-code1`), _jsx(AntomChunk, { language: `php`, steps: [`create-a-payment-session`], chunks: [` public function createPaymentSession(\$payment) { \$alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); \$alipayPaymentSessionRequest->setProductCode(ProductCodeType::CASHIER_PAYMENT); \$alipayPaymentSessionRequest->setProductScene("CHECKOUT_PAYMENT"); // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object \$moneyParser = new DecimalMoneyParser(new ISOCurrencies()); \$money = \$moneyParser->parse((string)\$payment['amountValue'], new Currency(\$payment['currency'])); // set amount \$amount = new Amount(); \$amount->setCurrency(\$payment['currency']); \$amount->setValue(\$money->getAmount()); \$alipayPaymentSessionRequest->setPaymentAmount(\$amount); // replace with your paymentRequestId \$paymentRequestId = uniqid('PR_'); \$alipayPaymentSessionRequest->setPaymentRequestId(\$paymentRequestId); // set buyer info \$buyer = new Buyer(); \$buyer->setReferenceBuyerId("yourBuyerId"); // set goods info \$goods = new Goods(); \$goods->setGoodsBrand("Antom Brand"); \$goods->setGoodsCategory("outdoor goods/bag"); \$goods->setGoodsName("Classic Woman Bag"); \$goods->setGoodsQuantity("1"); \$goods->setGoodsSkuName("Black"); \$goods->setGoodsImageUrl("https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ"); \$goods->setGoodsUnitAmount(\$amount); \$goods->setGoodsUrl("https://yourGoodsUrl"); \$goods->setReferenceGoodsId("yourGoodsId"); // replace with your orderId \$orderId = uniqid('ORDER_'); // set order info \$order = new Order(); \$order->setReferenceOrderId(\$orderId); \$order->setOrderDescription("antom ckp testing order"); \$order->setOrderAmount(\$amount); \$order->setBuyer(\$buyer); \$order->setGoods(\$goods); \$alipayPaymentSessionRequest->setOrder(\$order); // replace with your notify url // or configure your notify url here: Notification URL \$alipayPaymentSessionRequest->setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receiveNotify"); `] }, `server-PHP-CKP_EMBEDDED-code2`), _jsx(AntomChunk, { language: `php`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url \$alipayPaymentSessionRequest->setPaymentRedirectUrl( "http://localhost:5173/index.html?paymentRequestId=" . \$paymentRequestId ); `] }, `server-PHP-CKP_EMBEDDED-code3`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` try { \$startTime = microtime(true); error_log("paymentSession request: " . json_encode(\$alipayPaymentSessionRequest)); \$alipayPaymentSessionResponse = self::\$CLIENT->execute(\$alipayPaymentSessionRequest); error_log("paymentSession response: " . json_encode(\$alipayPaymentSessionResponse)); error_log("paymentSession request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPaymentSessionResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-CKP_EMBEDDED-other2`), _jsx(AntomChunk, { language: `php`, steps: [`inquire-payment-result`], chunks: [` public function inquiryPayment(\$data) { \$paymentRequestId = \$data['paymentRequestId']; \$alipayPayQueryRequest = new AlipayPayQueryRequest(); \$alipayPayQueryRequest->setPaymentRequestId(\$paymentRequestId); try { \$startTime = microtime(true); error_log("inquiry payment request: " . json_encode(\$alipayPayQueryRequest)); \$alipayPayQueryResponse = self::\$CLIENT->execute(\$alipayPayQueryRequest); error_log("inquiry payment response: " . json_encode(\$alipayPayQueryResponse)); error_log("inquiry payment request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPayQueryResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-CKP_EMBEDDED-code4`), _jsx(AntomChunk, { language: `php`, steps: [`receive-payment-notification`], chunks: [` /** * receive notify */ public function receiveNotify(\$request, \$notifyBody) { // retrieve the required parameters from http request \$requestUri = \$request->getResourceUri(); \$requestMethod = \$request->getMethod(); // retrieve the required parameters from request header \$requestTime = \$request->headers('request-time'); \$clientId = \$request->headers('client-id'); \$signature = \$request->headers('signature'); try { // verify the signature of notification if (empty(\$signature)) { throw new RuntimeException("Invalid notify signature"); } else { \$parts = explode("signature=", \$signature); if (count(\$parts) > 1) { \$realSignature = \$parts[1]; } } \$verifyResult = SignatureTool::verify( \$requestMethod, \$requestUri, \$clientId, \$requestTime, \$notifyBody, \$realSignature, self::ANTOM_PUBLIC_KEY ); if (!\$verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body \$paymentNotify = json_decode(\$notifyBody, true); if (\$paymentNotify && \$paymentNotify['result']['resultCode'] === 'SUCCESS') { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. error_log("receive payment notify: " . json_encode(\$paymentNotify)); return array( 'resultCode' => 'SUCCESS', 'resultMessage' => 'success.', 'resultStatus' => 'S' ); } } catch (Exception \$e) { return array( 'resultCode' => 'FAIL', 'resultMessage' => 'fail.', 'resultStatus' => 'F' ); } return array( 'resultCode' => 'SYSTEM_ERROR', 'resultMessage' => 'system error.', 'resultStatus' => 'F' ); } `] }, `server-PHP-CKP_EMBEDDED-code5`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` private function apiResponse(\$paymentRequestId, \$data) { if (\$data instanceof Exception) { return array( 'status' => 'error', 'paymentRequestId' => \$paymentRequestId, 'message' => \$data->getMessage() ); } return array( 'status' => 'success', 'paymentRequestId' => \$paymentRequestId, 'data' => \$data ); } } // Slim Framework routes setup \$app = new \\Slim\\Slim(array( 'base.path' => '' )); // Add CORS middleware \$app->response->headers->set('Access-Control-Allow-Origin', '*'); \$app->response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); \$app->response->headers->set('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization'); // Add OPTIONS request handler \$app->options('/(:path+)', function () use (\$app) { \$app->response->setStatus(200); }); \$paymentServer = new PaymentServer(); \$app->post('/payment/createSession', function () use (\$app, \$paymentServer) { \$payment = \$app->request->getBody(); \$payment = json_decode(\$payment, true); \$response = \$paymentServer->createPaymentSession(\$payment); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/inquiryPayment', function () use (\$app, \$paymentServer) { \$data = \$app->request->getBody(); \$data = json_decode(\$data, true); \$response = \$paymentServer->inquiryPayment(\$data); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/receiveNotify', function () use (\$app, \$paymentServer) { \$notifyBody = \$app->request->getBody(); \$response = \$paymentServer->receiveNotify(\$app->request, \$notifyBody); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->run(); `] }, `server-PHP-CKP_EMBEDDED-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/php/server.php', when: { server: 'PHP', integration_type: 'Hosted CKP' }, children: _jsxs(AntomFile, { language: `php`, filename: 'server.php', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` * find your client id here: quickStart */ const CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ const ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ const MERCHANT_PRIVATE_KEY = "your_private_key"; private static \$CLIENT; public function __construct() { self::\$CLIENT = new DefaultAlipayClient( "https://open-sea-global.alipay.com", self::MERCHANT_PRIVATE_KEY, self::ANTOM_PUBLIC_KEY, self::CLIENT_ID ); } `] }, `server-PHP-CKP_HOST-code1`), _jsx(AntomChunk, { language: `php`, steps: [`create-a-payment-session`], chunks: [` public function createPaymentSession(\$payment) { \$alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); \$alipayPaymentSessionRequest->setProductCode(ProductCodeType::CASHIER_PAYMENT); \$alipayPaymentSessionRequest->setProductScene("CHECKOUT_PAYMENT"); // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object \$moneyParser = new DecimalMoneyParser(new ISOCurrencies()); \$money = \$moneyParser->parse((string)\$payment['amountValue'], new Currency(\$payment['currency'])); // set amount \$amount = new Amount(); \$amount->setCurrency(\$payment['currency']); \$amount->setValue(\$money->getAmount()); \$alipayPaymentSessionRequest->setPaymentAmount(\$amount); // replace with your paymentRequestId \$paymentRequestId = uniqid('PR_'); \$alipayPaymentSessionRequest->setPaymentRequestId(\$paymentRequestId); // set buyer info \$buyer = new Buyer(); \$buyer->setReferenceBuyerId("yourBuyerId"); // set goods info \$goods = new Goods(); \$goods->setGoodsBrand("Antom Brand"); \$goods->setGoodsCategory("outdoor goods/bag"); \$goods->setGoodsName("Classic Woman Bag"); \$goods->setGoodsQuantity("1"); \$goods->setGoodsSkuName("Black"); \$goods->setGoodsImageUrl("https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ"); \$goods->setGoodsUnitAmount(\$amount); \$goods->setGoodsUrl("https://yourGoodsUrl"); \$goods->setReferenceGoodsId("yourGoodsId"); // replace with your orderId \$orderId = uniqid('ORDER_'); // set order info \$order = new Order(); \$order->setReferenceOrderId(\$orderId); \$order->setOrderDescription("antom ckp testing order"); \$order->setOrderAmount(\$amount); \$order->setBuyer(\$buyer); \$order->setGoods(\$goods); \$alipayPaymentSessionRequest->setOrder(\$order); // replace with your notify url // or configure your notify url here: Notification URL \$alipayPaymentSessionRequest->setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receiveNotify"); `] }, `server-PHP-CKP_HOST-code2`), _jsx(AntomChunk, { language: `php`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url \$alipayPaymentSessionRequest->setPaymentRedirectUrl( "http://localhost:5173/index.html?paymentRequestId=" . \$paymentRequestId ); `] }, `server-PHP-CKP_HOST-code3`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` try { \$startTime = microtime(true); error_log("paymentSession request: " . json_encode(\$alipayPaymentSessionRequest)); \$alipayPaymentSessionResponse = self::\$CLIENT->execute(\$alipayPaymentSessionRequest); error_log("paymentSession response: " . json_encode(\$alipayPaymentSessionResponse)); error_log("paymentSession request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPaymentSessionResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-CKP_HOST-other2`), _jsx(AntomChunk, { language: `php`, steps: [`inquire-payment-result`], chunks: [` public function inquiryPayment(\$data) { \$paymentRequestId = \$data['paymentRequestId']; \$alipayPayQueryRequest = new AlipayPayQueryRequest(); \$alipayPayQueryRequest->setPaymentRequestId(\$paymentRequestId); try { \$startTime = microtime(true); error_log("inquiry payment request: " . json_encode(\$alipayPayQueryRequest)); \$alipayPayQueryResponse = self::\$CLIENT->execute(\$alipayPayQueryRequest); error_log("inquiry payment response: " . json_encode(\$alipayPayQueryResponse)); error_log("inquiry payment request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPayQueryResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-CKP_HOST-code4`), _jsx(AntomChunk, { language: `php`, steps: [`receive-payment-notification`], chunks: [` /** * receive notify */ public function receiveNotify(\$request, \$notifyBody) { // retrieve the required parameters from http request \$requestUri = \$request->getResourceUri(); \$requestMethod = \$request->getMethod(); // retrieve the required parameters from request header \$requestTime = \$request->headers('request-time'); \$clientId = \$request->headers('client-id'); \$signature = \$request->headers('signature'); try { // verify the signature of notification if (empty(\$signature)) { throw new RuntimeException("Invalid notify signature"); } else { \$parts = explode("signature=", \$signature); if (count(\$parts) > 1) { \$realSignature = \$parts[1]; } } \$verifyResult = SignatureTool::verify( \$requestMethod, \$requestUri, \$clientId, \$requestTime, \$notifyBody, \$realSignature, self::ANTOM_PUBLIC_KEY ); if (!\$verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body \$paymentNotify = json_decode(\$notifyBody, true); if (\$paymentNotify && \$paymentNotify['result']['resultCode'] === 'SUCCESS') { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. error_log("receive payment notify: " . json_encode(\$paymentNotify)); return array( 'resultCode' => 'SUCCESS', 'resultMessage' => 'success.', 'resultStatus' => 'S' ); } } catch (Exception \$e) { return array( 'resultCode' => 'FAIL', 'resultMessage' => 'fail.', 'resultStatus' => 'F' ); } return array( 'resultCode' => 'SYSTEM_ERROR', 'resultMessage' => 'system error.', 'resultStatus' => 'F' ); } `] }, `server-PHP-CKP_HOST-code5`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` private function apiResponse(\$paymentRequestId, \$data) { if (\$data instanceof Exception) { return array( 'status' => 'error', 'paymentRequestId' => \$paymentRequestId, 'message' => \$data->getMessage() ); } return array( 'status' => 'success', 'paymentRequestId' => \$paymentRequestId, 'data' => \$data ); } } // Slim Framework routes setup \$app = new \\Slim\\Slim(array( 'base.path' => '' )); // Add CORS middleware \$app->response->headers->set('Access-Control-Allow-Origin', '*'); \$app->response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); \$app->response->headers->set('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization'); // Add OPTIONS request handler \$app->options('/(:path+)', function () use (\$app) { \$app->response->setStatus(200); }); \$paymentServer = new PaymentServer(); \$app->post('/payment/createSession', function () use (\$app, \$paymentServer) { \$payment = \$app->request->getBody(); \$payment = json_decode(\$payment, true); \$response = \$paymentServer->createPaymentSession(\$payment); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/inquiryPayment', function () use (\$app, \$paymentServer) { \$data = \$app->request->getBody(); \$data = json_decode(\$data, true); \$response = \$paymentServer->inquiryPayment(\$data); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/receiveNotify', function () use (\$app, \$paymentServer) { \$notifyBody = \$app->request->getBody(); \$response = \$paymentServer->receiveNotify(\$app->request, \$notifyBody); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->run(); `] }, `server-PHP-CKP_HOST-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/php/server.php', when: { server: 'PHP', integration_type: 'Payment Element' }, children: _jsxs(AntomFile, { language: `php`, filename: 'server.php', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` * find your client id here: quickStart */ const CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ const ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ const MERCHANT_PRIVATE_KEY = "your_private_key"; /** * replace with your domain
* find your domain here: quickStart */ const DOMAIN = "https://open-sea-global.alipay.com"; private static \$CLIENT; public function __construct() { self::\$CLIENT = new DefaultAlipayClient( self::DOMAIN, self::MERCHANT_PRIVATE_KEY, self::ANTOM_PUBLIC_KEY, self::CLIENT_ID ); } `] }, `server-PHP-ELEMENT-code1`), _jsx(AntomChunk, { language: `php`, steps: [`create-a-payment-session`], chunks: [` public function createPaymentSession(\$payment) { \$alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); \$alipayPaymentSessionRequest->setProductCode(ProductCodeType::CASHIER_PAYMENT); \$alipayPaymentSessionRequest->setProductScene("ELEMENT_PAYMENT"); // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object \$moneyParser = new DecimalMoneyParser(new ISOCurrencies()); \$money = \$moneyParser->parse((string)\$payment['amountValue'], new Currency(\$payment['currency'])); // set amount \$amount = new Amount(); \$amount->setCurrency(\$payment['currency']); \$amount->setValue(\$money->getAmount()); \$alipayPaymentSessionRequest->setPaymentAmount(\$amount); // replace with your paymentRequestId \$paymentRequestId = uniqid('PR_'); \$alipayPaymentSessionRequest->setPaymentRequestId(\$paymentRequestId); // set buyer info \$buyer = new Buyer(); \$buyer->setReferenceBuyerId("yourBuyerId"); // replace with your orderId \$orderId = uniqid('ORDER_'); // set order info \$order = new Order(); \$order->setReferenceOrderId(\$orderId); \$order->setOrderDescription("antom element testing order"); \$order->setOrderAmount(\$amount); \$order->setBuyer(\$buyer); \$alipayPaymentSessionRequest->setOrder(\$order); // replace with your settlementCurrency // you can query your settlementCurrency here: Settlement overview \$settlementStrategy = new SettlementStrategy(); \$settlementStrategy->setSettlementCurrency("SGD"); // replace with your notify url // or configure your notify url here: Notification URL \$alipayPaymentSessionRequest->setPaymentNotifyUrl("http://www.yourNotifyUrl.com/payment/receiveNotify"); `] }, `server-PHP-ELEMENT-code2`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` // replace with your redirect url`] }, `server-PHP-ELEMENT-other2`), _jsx(AntomChunk, { language: `php`, steps: [`specify-the-payment-redirect-url`], chunks: [` \$alipayPaymentSessionRequest->setPaymentRedirectUrl( "http://localhost:5173/index.html?paymentRequestId=" . \$paymentRequestId ); `] }, `server-PHP-ELEMENT-code3`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` try { \$startTime = microtime(true); error_log("paymentSession request: " . json_encode(\$alipayPaymentSessionRequest)); \$alipayPaymentSessionResponse = self::\$CLIENT->execute(\$alipayPaymentSessionRequest); error_log("paymentSession response: " . json_encode(\$alipayPaymentSessionResponse)); error_log("paymentSession request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPaymentSessionResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-ELEMENT-other3`), _jsx(AntomChunk, { language: `php`, steps: [`inquire-payment-result`], chunks: [` public function inquiryPayment(\$data) { \$paymentRequestId = \$data['paymentRequestId']; \$alipayPayQueryRequest = new AlipayPayQueryRequest(); \$alipayPayQueryRequest->setPaymentRequestId(\$paymentRequestId); try { \$startTime = microtime(true); error_log("inquiry payment request: " . json_encode(\$alipayPayQueryRequest)); \$alipayPayQueryResponse = self::\$CLIENT->execute(\$alipayPayQueryRequest); error_log("inquiry payment response: " . json_encode(\$alipayPayQueryResponse)); error_log("inquiry payment request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$paymentRequestId, \$alipayPayQueryResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, \$e); } } `] }, `server-PHP-ELEMENT-code4`), _jsx(AntomChunk, { language: `php`, steps: [`receive-payment-notification`], chunks: [` /** * receive notify */ public function receiveNotify(\$request, \$notifyBody) { // retrieve the required parameters from http request \$requestUri = \$request->getResourceUri(); \$requestMethod = \$request->getMethod(); // retrieve the required parameters from request header \$requestTime = \$request->headers('request-time'); \$clientId = \$request->headers('client-id'); \$signature = \$request->headers('signature'); try { // verify the signature of notification if (empty(\$signature)) { throw new RuntimeException("Invalid notify signature"); } else { \$parts = explode("signature=", \$signature); if (count(\$parts) > 1) { \$realSignature = \$parts[1]; } } \$verifyResult = SignatureTool::verify( \$requestMethod, \$requestUri, \$clientId, \$requestTime, \$notifyBody, \$realSignature, self::ANTOM_PUBLIC_KEY ); if (!\$verifyResult) { throw new RuntimeException("Invalid notify signature"); } // deserialize the notification body \$paymentNotify = json_decode(\$notifyBody, true); if (\$paymentNotify && \$paymentNotify['result']['resultCode'] === 'SUCCESS') { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. error_log("receive payment notify: " . json_encode(\$paymentNotify)); return array( 'resultCode' => 'SUCCESS', 'resultMessage' => 'success.', 'resultStatus' => 'S' ); } } catch (Exception \$e) { return array( 'resultCode' => 'FAIL', 'resultMessage' => 'fail.', 'resultStatus' => 'F' ); } return array( 'resultCode' => 'SYSTEM_ERROR', 'resultMessage' => 'system error.', 'resultStatus' => 'F' ); } `] }, `server-PHP-ELEMENT-code5`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` private function apiResponse(\$paymentRequestId, \$data) { if (\$data instanceof Exception) { return array( 'status' => 'error', 'paymentRequestId' => \$paymentRequestId, 'message' => \$data->getMessage() ); } return array( 'status' => 'success', 'paymentRequestId' => \$paymentRequestId, 'data' => \$data ); } } // Slim Framework routes setup \$app = new \\Slim\\Slim(array( 'base.path' => '' )); // Add CORS middleware \$app->response->headers->set('Access-Control-Allow-Origin', '*'); \$app->response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); \$app->response->headers->set('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization'); // Add OPTIONS request handler \$app->options('/(:path+)', function () use (\$app) { \$app->response->setStatus(200); }); \$paymentServer = new PaymentServer(); \$app->post('/payment/createSession', function () use (\$app, \$paymentServer) { \$payment = \$app->request->getBody(); \$payment = json_decode(\$payment, true); \$response = \$paymentServer->createPaymentSession(\$payment); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/inquiryPayment', function () use (\$app, \$paymentServer) { \$data = \$app->request->getBody(); \$data = json_decode(\$data, true); \$response = \$paymentServer->inquiryPayment(\$data); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/receiveNotify', function () use (\$app, \$paymentServer) { \$notifyBody = \$app->request->getBody(); \$response = \$paymentServer->receiveNotify(\$app->request, \$notifyBody); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->run(); `] }, `server-PHP-ELEMENT-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/go/server.go', when: { server: 'Go', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `go`, filename: 'server.go', downloadOnly: false, steps: [`get-integration-resources`, `initiate-a-payment-request`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`package main import ( "encoding/json" "fmt" "github.com/Rhymond/go-money" "github.com/alipay/global-open-sdk-go/com/alipay/api/model" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/notify" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/pay" "github.com/alipay/global-open-sdk-go/com/alipay/api/response" "github.com/alipay/global-open-sdk-go/com/alipay/api/tools" "io" "log" "net/http" "strconv" "time" defaultAlipayClient "github.com/alipay/global-open-sdk-go/com/alipay/api" "github.com/google/uuid" ) `] }, `server-Go-API-other1`), _jsx(AntomChunk, { language: `go`, steps: [`get-integration-resources`], chunks: [`const ( /* replace with your client id
find your client id here: quickStart */ ClientID = "your_client_id" /* replace with your antom public key (used to verify signature)
find your antom public key here: quickStart */ AntomPublicKey = "antom_public_key" /* replace with your private key (used to sign)
please ensure the secure storage of your private key to prevent leakage */ MerchantPrivateKey = "your_private_key" ) // Initialize global client var client *defaultAlipayClient.DefaultAlipayClient func init() { client = defaultAlipayClient.NewDefaultAlipayClient( "https://open-sea-global.alipay.com", ClientID, MerchantPrivateKey, AntomPublicKey) } `] }, `server-Go-API-code1`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func main() { // Register routes http.HandleFunc("/payment/pay", enableCORS(handlePay)) http.HandleFunc("/payment/inquiryPayment", enableCORS(handleInquiryPayment)) http.HandleFunc("/payment/receivePaymentNotify", enableCORS(handleReceivePaymentNotify)) fmt.Println("Open your browser and visit: http://localhost:8080") log.Fatal(http.ListenAndServe(":8080", nil)) } `] }, `server-Go-API-other2`), _jsx(AntomChunk, { language: `go`, steps: [`initiate-a-payment-request`], chunks: [`func handlePay(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var payment PaymentVO json.NewDecoder(r.Body).Decode(&payment) // Set default terminal type if not provided if payment.TerminalType == "" { payment.TerminalType = "WEB" } request, payRequest := pay.NewAlipayPayRequest() payRequest.ProductCode = model.CASHIER_PAYMENT // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object parseFloat, _ := strconv.ParseFloat(payment.AmountValue, 64) amountValue := money.NewFromFloat(parseFloat, payment.Currency).Amount() // set amount amount := &model.Amount{Value: strconv.FormatInt(amountValue, 10), Currency: payment.Currency} payRequest.PaymentAmount = amount // replace with your paymentRequestId paymentRequestId := uuid.New().String() payRequest.PaymentRequestId = paymentRequestId // set paymentMethod payRequest.PaymentMethod = &model.PaymentMethod{PaymentMethodType: payment.PaymentMethodType} // when paymentMethodType is CARD, need to set authorization if payment.PaymentMethodType == "CARD" { payRequest.PaymentFactor = &model.PaymentFactor{IsAuthorization: true} } buyer := &model.Buyer{ReferenceBuyerId: "yourBuyerId"} // replace with your orderId orderId := uuid.New().String() order := &model.Order{ReferenceOrderId: orderId, OrderDescription: "antom api testing order", OrderAmount: amount, Buyer: buyer} payRequest.Order = order // set env info terminal := model.TerminalType(payment.TerminalType) env := &model.Env{TerminalType: terminal, ClientIp: "1.2.3.4"} if terminal != model.WEB && payment.OsType != "" { env.OsType = model.OsType(payment.OsType) } payRequest.Env = env // replace with your notify url // or configure your notify url here: Notification URL payRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receivePaymentNotify" `] }, `server-Go-API-code2`), _jsx(AntomChunk, { language: `go`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url payRequest.PaymentRedirectUrl = "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId `] }, `server-Go-API-code3`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [` startTime := time.Now() payRequestJson, _ := json.Marshal(payRequest) log.Printf("payment request: %s", payRequestJson) response, err := client.Execute(request) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestId, Message: err.Error(), }) return } log.Printf("payment response: %+v", response) log.Printf("payment request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestId, Data: response, }) } `] }, `server-Go-API-other3`), _jsx(AntomChunk, { language: `go`, steps: [`inquire-payment-result`], chunks: [`func handleInquiryPayment(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var requestMap map[string]string json.NewDecoder(r.Body).Decode(&requestMap) paymentRequestID := requestMap["paymentRequestId"] queryRequest, request := pay.NewAlipayPayQueryRequest() request.PaymentRequestId = paymentRequestID startTime := time.Now() log.Printf("inquiry payment request: %+v", request) // Execute inquiry request response, err := client.Execute(queryRequest) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestID, Message: err.Error(), }) return } log.Printf("inquiry payment response: %+v", response) log.Printf("inquiry payment request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestID, Data: response, }) } `] }, `server-Go-API-code4`), _jsx(AntomChunk, { language: `go`, steps: [`receive-payment-notification`], chunks: [`// receive payment notify func handleReceivePaymentNotify(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } rawBody, err := io.ReadAll(r.Body) if err != nil { sendJSONResponse(w, http.StatusBadRequest, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } notifyBody := string(rawBody) // retrieve the required parameters from http request requestURI := r.RequestURI requestMethod := r.Method // retrieve the required parameters from request header requestTime := r.Header.Get("request-time") clientID := r.Header.Get("client-id") signature := r.Header.Get("signature") // verify the signature of notification checkSignature, err := tools.CheckSignature(requestURI, requestMethod, clientID, requestTime, notifyBody, signature, AntomPublicKey) if err != nil || !checkSignature { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } // deserialize the notification body var paymentNotify notify.AlipayPayResultNotify if err := json.Unmarshal(rawBody, &paymentNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if paymentNotify.Result.ResultCode == "SUCCESS" { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. log.Printf("receive payment notify: %s", notifyBody) sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SUCCESS", ResultMessage: "success.", ResultStatus: "S", }) return } sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SYSTEM_ERROR", ResultMessage: "system error.", ResultStatus: "F", }) } `] }, `server-Go-API-code5`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func enableCORS(handler http.HandlerFunc) http.HandlerFunc { return func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Access-Control-Allow-Origin", "*") w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS") w.Header().Set("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Authorization") if r.Method == "OPTIONS" { w.WriteHeader(http.StatusOK) return } handler(w, r) } } func sendJSONResponse(w http.ResponseWriter, statusCode int, data interface{}) { w.Header().Set("Content-Type", "application/json") w.WriteHeader(statusCode) json.NewEncoder(w).Encode(data) } // PaymentVO represents payment request data type PaymentVO struct {`, ' AmountValue string `json:"amountValue"`', ' Currency string `json:"currency"`', ' PaymentMethodType string `json:"paymentMethodType"`', ' TerminalType string `json:"terminalType"`', ' OsType string `json:"osType"`', `} // ApiResponse represents API response structure type ApiResponse struct {`, ' Status string `json:"status"`', ' PaymentRequestID string `json:"paymentRequestId"`', ' Message string `json:"message,omitempty"`', ' Data interface{} `json:"data,omitempty"`', `} `] }, `server-Go-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/go/server.go', when: { server: 'Go', integration_type: 'SDK' }, children: _jsxs(AntomFile, { language: `go`, filename: 'server.go', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`package main import ( "encoding/json" "fmt" "github.com/Rhymond/go-money" "github.com/alipay/global-open-sdk-go/com/alipay/api/model" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/notify" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/pay" "github.com/alipay/global-open-sdk-go/com/alipay/api/response" "github.com/alipay/global-open-sdk-go/com/alipay/api/tools" "io" "log" "net/http" "strconv" "time" defaultAlipayClient "github.com/alipay/global-open-sdk-go/com/alipay/api" "github.com/google/uuid" ) `] }, `server-Go-SDK-other1`), _jsx(AntomChunk, { language: `go`, steps: [`get-integration-resources`], chunks: [`const ( /* replace with your client id
find your client id here: quickStart */ ClientID = "your_client_id" /* replace with your antom public key (used to verify signature)
find your antom public key here: quickStart */ AntomPublicKey = "antom_public_key" /* replace with your private key (used to sign)
please ensure the secure storage of your private key to prevent leakage */ MerchantPrivateKey = "your_private_key" ) // Initialize global client var client *defaultAlipayClient.DefaultAlipayClient func init() { client = defaultAlipayClient.NewDefaultAlipayClient( "https://open-sea-global.alipay.com", ClientID, MerchantPrivateKey, AntomPublicKey) } `] }, `server-Go-SDK-code1`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func main() { // Register routes http.HandleFunc("/payment/createSession", enableCORS(handleCreateSession)) http.HandleFunc("/payment/inquiryPayment", enableCORS(handleInquiryPayment)) http.HandleFunc("/payment/receivePaymentNotify", enableCORS(handleReceivePaymentNotify)) fmt.Println("Open your browser and visit: http://localhost:8080") log.Fatal(http.ListenAndServe(":8080", nil)) } `] }, `server-Go-SDK-other2`), _jsx(AntomChunk, { language: `go`, steps: [`create-a-payment-session`], chunks: [`func handleCreateSession(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var payment PaymentVO json.NewDecoder(r.Body).Decode(&payment) request, sessionRequest := pay.NewAlipayPaymentSessionRequest() sessionRequest.ProductCode = model.CASHIER_PAYMENT // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object parseFloat, _ := strconv.ParseFloat(payment.AmountValue, 64) amountValue := money.NewFromFloat(parseFloat, payment.Currency).Amount() // set amount amount := &model.Amount{Value: strconv.FormatInt(amountValue, 10), Currency: payment.Currency} sessionRequest.PaymentAmount = amount // replace with your paymentRequestId paymentRequestId := uuid.New().String() sessionRequest.PaymentRequestId = paymentRequestId // set paymentMethod sessionRequest.PaymentMethod = &model.PaymentMethod{PaymentMethodType: payment.PaymentMethodType} // when paymentMethodType is CARD, need to set authorization if payment.PaymentMethodType == "CARD" { sessionRequest.PaymentFactor = &model.PaymentFactor{IsAuthorization: true} } // set buyer info buyer := &model.Buyer{ReferenceBuyerId: "yourBuyerId"} // replace with your orderId orderId := uuid.New().String() // set order info order := &model.Order{ ReferenceOrderId: orderId, OrderDescription: "antom sdk testing order", OrderAmount: amount, Buyer: buyer, } sessionRequest.Order = order // replace with your notify url // or configure your notify url here: Notification URL sessionRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receivePaymentNotify" `] }, `server-Go-SDK-code2`), _jsx(AntomChunk, { language: `go`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url sessionRequest.PaymentRedirectUrl = "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId `] }, `server-Go-SDK-code3`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [` startTime := time.Now() sessionRequestJson, _ := json.Marshal(sessionRequest) log.Printf("paymentSession request: %s", sessionRequestJson) response, err := client.Execute(request) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestId, Message: err.Error(), }) return } log.Printf("paymentSession response: %+v", response) log.Printf("paymentSession request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestId, Data: response, }) } `] }, `server-Go-SDK-other3`), _jsx(AntomChunk, { language: `go`, steps: [`inquire-payment-result`], chunks: [`func handleInquiryPayment(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var requestMap map[string]string json.NewDecoder(r.Body).Decode(&requestMap) paymentRequestID := requestMap["paymentRequestId"] queryRequest, request := pay.NewAlipayPayQueryRequest() request.PaymentRequestId = paymentRequestID startTime := time.Now() log.Printf("inquiry payment request: %+v", request) response, err := client.Execute(queryRequest) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestID, Message: err.Error(), }) return } log.Printf("inquiry payment response: %+v", response) log.Printf("inquiry payment request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestID, Data: response, }) } `] }, `server-Go-SDK-code4`), _jsx(AntomChunk, { language: `go`, steps: [`receive-payment-notification`], chunks: [`func handleReceivePaymentNotify(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } rawBody, err := io.ReadAll(r.Body) if err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } notifyBody := string(rawBody) // retrieve the required parameters from http request requestURI := r.RequestURI requestMethod := r.Method // retrieve the required parameters from request header requestTime := r.Header.Get("request-time") clientID := r.Header.Get("client-id") signature := r.Header.Get("signature") // verify the signature of notification checkSignature, err := tools.CheckSignature(requestURI, requestMethod, clientID, requestTime, notifyBody, signature, AntomPublicKey) if err != nil || !checkSignature { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } var paymentNotify notify.AlipayPayResultNotify if err := json.Unmarshal(rawBody, &paymentNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if paymentNotify.Result.ResultCode == "SUCCESS" { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. log.Printf("receive payment notify: %s", notifyBody) sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SUCCESS", ResultMessage: "success.", ResultStatus: "S", }) return } sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SYSTEM_ERROR", ResultMessage: "system error.", ResultStatus: "F", }) } `] }, `server-Go-SDK-code5`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func enableCORS(handler http.HandlerFunc) http.HandlerFunc { return func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Access-Control-Allow-Origin", "*") w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS") w.Header().Set("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Authorization") if r.Method == "OPTIONS" { w.WriteHeader(http.StatusOK) return } handler(w, r) } } func sendJSONResponse(w http.ResponseWriter, statusCode int, data interface{}) { w.Header().Set("Content-Type", "application/json") w.WriteHeader(statusCode) json.NewEncoder(w).Encode(data) } // PaymentVO represents payment request data type PaymentVO struct {`, ' AmountValue string `json:"amountValue"`', ' Currency string `json:"currency"`', ' PaymentMethodType string `json:"paymentMethodType"`', `} // ApiResponse represents API response structure type ApiResponse struct {`, ' Status string `json:"status"`', ' PaymentRequestID string `json:"paymentRequestId"`', ' Message string `json:"message,omitempty"`', ' Data interface{} `json:"data,omitempty"`', `} `] }, `server-Go-SDK-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/go/server.go', when: { server: 'Go', integration_type: 'Embedded CKP' }, children: _jsxs(AntomFile, { language: `go`, filename: 'server.go', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`package main import ( "encoding/json" "fmt" "github.com/Rhymond/go-money" "github.com/alipay/global-open-sdk-go/com/alipay/api/model" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/notify" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/pay" "github.com/alipay/global-open-sdk-go/com/alipay/api/response" "github.com/alipay/global-open-sdk-go/com/alipay/api/tools" "io" "log" "net/http" "strconv" "time" defaultAlipayClient "github.com/alipay/global-open-sdk-go/com/alipay/api" "github.com/google/uuid" ) `] }, `server-Go-CKP_EMBEDDED-other1`), _jsx(AntomChunk, { language: `go`, steps: [`get-integration-resources`], chunks: [`const ( /* replace with your client id
find your client id here: quickStart */ ClientID = "your_client_id" /* replace with your antom public key (used to verify signature)
find your antom public key here: quickStart */ AntomPublicKey = "antom_public_key" /* replace with your private key (used to sign)
please ensure the secure storage of your private key to prevent leakage */ MerchantPrivateKey = "your_private_key" ) // Initialize global client var client *defaultAlipayClient.DefaultAlipayClient func init() { client = defaultAlipayClient.NewDefaultAlipayClient( "https://open-sea-global.alipay.com", ClientID, MerchantPrivateKey, AntomPublicKey) } `] }, `server-Go-CKP_EMBEDDED-code1`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func main() { // Register routes http.HandleFunc("/payment/createSession", enableCORS(handleCreateSession)) http.HandleFunc("/payment/inquiryPayment", enableCORS(handleInquiryPayment)) http.HandleFunc("/payment/receiveNotify", enableCORS(handleReceiveNotify)) fmt.Println("Open your browser and visit: http://localhost:8080") log.Fatal(http.ListenAndServe(":8080", nil)) } `] }, `server-Go-CKP_EMBEDDED-other2`), _jsx(AntomChunk, { language: `go`, steps: [`create-a-payment-session`], chunks: [`func handleCreateSession(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var payment PaymentVO json.NewDecoder(r.Body).Decode(&payment) request, sessionRequest := pay.NewAlipayPaymentSessionRequest() sessionRequest.ProductCode = model.CASHIER_PAYMENT sessionRequest.ProductScene = "CHECKOUT_PAYMENT" // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object parseFloat, _ := strconv.ParseFloat(payment.AmountValue, 64) amountValue := money.NewFromFloat(parseFloat, payment.Currency).Amount() // set amount amount := &model.Amount{Value: strconv.FormatInt(amountValue, 10), Currency: payment.Currency} sessionRequest.PaymentAmount = amount // replace with your paymentRequestId paymentRequestId := uuid.New().String() sessionRequest.PaymentRequestId = paymentRequestId // replace with your orderId orderId := uuid.New().String() // set buyer info buyer := &model.Buyer{ReferenceBuyerId: "yourBuyerId"} // set goods info goods := model.Goods{ GoodsBrand: "Antom Brand", GoodsCategory: "outdoor goods/bag", GoodsName: "Classic Woman Bag", GoodsQuantity: "1", GoodsSkuName: "Black", GoodsImageUrl: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ", GoodsUnitAmount: amount, GoodsUrl: "https://yourGoodsUrl", ReferenceGoodsId: "yourGoodsId", } // set order info order := &model.Order{ ReferenceOrderId: orderId, OrderDescription: "antom ckp testing order", OrderAmount: amount, Buyer: buyer, Goods: []model.Goods{goods}, } sessionRequest.Order = order // replace with your notify url // or configure your notify url here: Notification URL sessionRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receiveNotify" `] }, `server-Go-CKP_EMBEDDED-code2`), _jsx(AntomChunk, { language: `go`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url sessionRequest.PaymentRedirectUrl = "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId `] }, `server-Go-CKP_EMBEDDED-code3`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [` startTime := time.Now() sessionRequestJson, _ := json.Marshal(sessionRequest) log.Printf("paymentSession request: %s", sessionRequestJson) response, err := client.Execute(request) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestId, Message: err.Error(), }) return } log.Printf("paymentSession response: %+v", response) log.Printf("paymentSession request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestId, Data: response, }) } `] }, `server-Go-CKP_EMBEDDED-other3`), _jsx(AntomChunk, { language: `go`, steps: [`inquire-payment-result`], chunks: [`func handleInquiryPayment(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var requestMap map[string]string json.NewDecoder(r.Body).Decode(&requestMap) paymentRequestID := requestMap["paymentRequestId"] queryRequest, request := pay.NewAlipayPayQueryRequest() request.PaymentRequestId = paymentRequestID startTime := time.Now() log.Printf("inquiry payment request: %+v", request) response, err := client.Execute(queryRequest) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestID, Message: err.Error(), }) return } log.Printf("inquiry payment response: %+v", response) log.Printf("inquiry payment request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestID, Data: response, }) } `] }, `server-Go-CKP_EMBEDDED-code4`), _jsx(AntomChunk, { language: `go`, steps: [`receive-payment-notification`], chunks: [`func handleReceiveNotify(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } rawBody, err := io.ReadAll(r.Body) if err != nil { sendJSONResponse(w, http.StatusBadRequest, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } notifyBody := string(rawBody) // retrieve the required parameters from http request requestURI := r.RequestURI requestMethod := r.Method // retrieve the required parameters from request header requestTime := r.Header.Get("request-time") clientID := r.Header.Get("client-id") signature := r.Header.Get("signature") // verify the signature of notification checkSignature, err := tools.CheckSignature(requestURI, requestMethod, clientID, requestTime, notifyBody, signature, AntomPublicKey) if err != nil || !checkSignature { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } var jsonObject map[string]interface{} if err := json.Unmarshal(rawBody, &jsonObject); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } notifyType, _ := jsonObject["notifyType"].(string) if notifyType == "PAYMENT_RESULT" { var paymentNotify notify.AlipayPayResultNotify if err := json.Unmarshal(rawBody, &paymentNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if paymentNotify.Result.ResultCode == "SUCCESS" { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. log.Printf("receive payment notify: %s", notifyBody) sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SUCCESS", ResultMessage: "success.", ResultStatus: "S", }) return } } else if notifyType == "CAPTURE_RESULT" { var captureNotify notify.AlipayCaptureResultNotify if err := json.Unmarshal(rawBody, &captureNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if captureNotify.Result.ResultCode == "SUCCESS" { // handle your own business logic. log.Printf("receive capture notify: %+v", captureNotify) sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SUCCESS", ResultMessage: "success.", ResultStatus: "S", }) return } } sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SYSTEM_ERROR", ResultMessage: "system error.", ResultStatus: "F", }) } `] }, `server-Go-CKP_EMBEDDED-code5`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func enableCORS(handler http.HandlerFunc) http.HandlerFunc { return func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Access-Control-Allow-Origin", "*") w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS") w.Header().Set("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Authorization") if r.Method == "OPTIONS" { w.WriteHeader(http.StatusOK) return } handler(w, r) } } func sendJSONResponse(w http.ResponseWriter, statusCode int, data interface{}) { w.Header().Set("Content-Type", "application/json") w.WriteHeader(statusCode) json.NewEncoder(w).Encode(data) } // PaymentVO represents payment request data type PaymentVO struct {`, ' AmountValue string `json:"amountValue"`', ' Currency string `json:"currency"`', `} // ApiResponse represents API response structure type ApiResponse struct {`, ' Status string `json:"status"`', ' PaymentRequestID string `json:"paymentRequestId"`', ' Message string `json:"message,omitempty"`', ' Data interface{} `json:"data,omitempty"`', `} `] }, `server-Go-CKP_EMBEDDED-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/go/server.go', when: { server: 'Go', integration_type: 'Hosted CKP' }, children: _jsxs(AntomFile, { language: `go`, filename: 'server.go', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`package main import ( "encoding/json" "fmt" "github.com/Rhymond/go-money" "github.com/alipay/global-open-sdk-go/com/alipay/api/model" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/notify" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/pay" "github.com/alipay/global-open-sdk-go/com/alipay/api/response" "github.com/alipay/global-open-sdk-go/com/alipay/api/tools" "io" "log" "net/http" "strconv" "time" defaultAlipayClient "github.com/alipay/global-open-sdk-go/com/alipay/api" "github.com/google/uuid" ) `] }, `server-Go-CKP_HOST-other1`), _jsx(AntomChunk, { language: `go`, steps: [`get-integration-resources`], chunks: [`const ( /* replace with your client id
find your client id here: quickStart */ ClientID = "your_client_id" /* replace with your antom public key (used to verify signature)
find your antom public key here: quickStart */ AntomPublicKey = "antom_public_key" /* replace with your private key (used to sign)
please ensure the secure storage of your private key to prevent leakage */ MerchantPrivateKey = "your_private_key" ) // Initialize global client var client *defaultAlipayClient.DefaultAlipayClient func init() { client = defaultAlipayClient.NewDefaultAlipayClient( "https://open-sea-global.alipay.com", ClientID, MerchantPrivateKey, AntomPublicKey) } `] }, `server-Go-CKP_HOST-code1`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func main() { // Register routes http.HandleFunc("/payment/createSession", enableCORS(handleCreateSession)) http.HandleFunc("/payment/inquiryPayment", enableCORS(handleInquiryPayment)) http.HandleFunc("/payment/receiveNotify", enableCORS(handleReceiveNotify)) fmt.Println("Open your browser and visit: http://localhost:8080") log.Fatal(http.ListenAndServe(":8080", nil)) } `] }, `server-Go-CKP_HOST-other2`), _jsx(AntomChunk, { language: `go`, steps: [`create-a-payment-session`], chunks: [`func handleCreateSession(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var payment PaymentVO json.NewDecoder(r.Body).Decode(&payment) request, sessionRequest := pay.NewAlipayPaymentSessionRequest() sessionRequest.ProductCode = model.CASHIER_PAYMENT sessionRequest.ProductScene = "CHECKOUT_PAYMENT" // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object parseFloat, _ := strconv.ParseFloat(payment.AmountValue, 64) amountValue := money.NewFromFloat(parseFloat, payment.Currency).Amount() // set amount amount := &model.Amount{Value: strconv.FormatInt(amountValue, 10), Currency: payment.Currency} sessionRequest.PaymentAmount = amount // replace with your paymentRequestId paymentRequestId := uuid.New().String() sessionRequest.PaymentRequestId = paymentRequestId // replace with your orderId orderId := uuid.New().String() // set buyer info buyer := &model.Buyer{ReferenceBuyerId: "yourBuyerId"} // set goods info goods := model.Goods{ GoodsBrand: "Antom Brand", GoodsCategory: "outdoor goods/bag", GoodsName: "Classic Woman Bag", GoodsQuantity: "1", GoodsSkuName: "Black", GoodsImageUrl: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ", GoodsUnitAmount: amount, GoodsUrl: "https://yourGoodsUrl", ReferenceGoodsId: "yourGoodsId", } // set order info order := &model.Order{ ReferenceOrderId: orderId, OrderDescription: "antom ckp testing order", OrderAmount: amount, Buyer: buyer, Goods: []model.Goods{goods}, } sessionRequest.Order = order // replace with your notify url // or configure your notify url here: Notification URL sessionRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receiveNotify" `] }, `server-Go-CKP_HOST-code2`), _jsx(AntomChunk, { language: `go`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url sessionRequest.PaymentRedirectUrl = "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId `] }, `server-Go-CKP_HOST-code3`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [` startTime := time.Now() sessionRequestJson, _ := json.Marshal(sessionRequest) log.Printf("paymentSession request: %s", sessionRequestJson) response, err := client.Execute(request) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestId, Message: err.Error(), }) return } log.Printf("paymentSession response: %+v", response) log.Printf("paymentSession request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestId, Data: response, }) } `] }, `server-Go-CKP_HOST-other3`), _jsx(AntomChunk, { language: `go`, steps: [`inquire-payment-result`], chunks: [`func handleInquiryPayment(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var requestMap map[string]string json.NewDecoder(r.Body).Decode(&requestMap) paymentRequestID := requestMap["paymentRequestId"] queryRequest, request := pay.NewAlipayPayQueryRequest() request.PaymentRequestId = paymentRequestID startTime := time.Now() log.Printf("inquiry payment request: %+v", request) response, err := client.Execute(queryRequest) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestID, Message: err.Error(), }) return } log.Printf("inquiry payment response: %+v", response) log.Printf("inquiry payment request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestID, Data: response, }) } `] }, `server-Go-CKP_HOST-code4`), _jsx(AntomChunk, { language: `go`, steps: [`receive-payment-notification`], chunks: [`func handleReceiveNotify(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } rawBody, err := io.ReadAll(r.Body) if err != nil { sendJSONResponse(w, http.StatusBadRequest, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } notifyBody := string(rawBody) // retrieve the required parameters from http request requestURI := r.RequestURI requestMethod := r.Method // retrieve the required parameters from request header requestTime := r.Header.Get("request-time") clientID := r.Header.Get("client-id") signature := r.Header.Get("signature") // verify the signature of notification checkSignature, err := tools.CheckSignature(requestURI, requestMethod, clientID, requestTime, notifyBody, signature, AntomPublicKey) if err != nil || !checkSignature { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } var jsonObject map[string]interface{} if err := json.Unmarshal(rawBody, &jsonObject); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } notifyType, _ := jsonObject["notifyType"].(string) if notifyType == "PAYMENT_RESULT" { var paymentNotify notify.AlipayPayResultNotify if err := json.Unmarshal(rawBody, &paymentNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if paymentNotify.Result.ResultCode == "SUCCESS" { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. log.Printf("receive payment notify: %s", notifyBody) sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SUCCESS", ResultMessage: "success.", ResultStatus: "S", }) return } } else if notifyType == "CAPTURE_RESULT" { var captureNotify notify.AlipayCaptureResultNotify if err := json.Unmarshal(rawBody, &captureNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if captureNotify.Result.ResultCode == "SUCCESS" { // handle your own business logic. log.Printf("receive capture notify: %+v", captureNotify) sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SUCCESS", ResultMessage: "success.", ResultStatus: "S", }) return } } sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SYSTEM_ERROR", ResultMessage: "system error.", ResultStatus: "F", }) } `] }, `server-Go-CKP_HOST-code5`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func enableCORS(handler http.HandlerFunc) http.HandlerFunc { return func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Access-Control-Allow-Origin", "*") w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS") w.Header().Set("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Authorization") if r.Method == "OPTIONS" { w.WriteHeader(http.StatusOK) return } handler(w, r) } } func sendJSONResponse(w http.ResponseWriter, statusCode int, data interface{}) { w.Header().Set("Content-Type", "application/json") w.WriteHeader(statusCode) json.NewEncoder(w).Encode(data) } // PaymentVO represents payment request data type PaymentVO struct {`, ' AmountValue string `json:"amountValue"`', ' Currency string `json:"currency"`', `} // ApiResponse represents API response structure type ApiResponse struct {`, ' Status string `json:"status"`', ' PaymentRequestID string `json:"paymentRequestId"`', ' Message string `json:"message,omitempty"`', ' Data interface{} `json:"data,omitempty"`', `} `] }, `server-Go-CKP_HOST-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/go/server.go', when: { server: 'Go', integration_type: 'Payment Element' }, children: _jsxs(AntomFile, { language: `go`, filename: 'server.go', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`package main import ( "encoding/json" "fmt" "github.com/Rhymond/go-money" "github.com/alipay/global-open-sdk-go/com/alipay/api/model" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/notify" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/pay" "github.com/alipay/global-open-sdk-go/com/alipay/api/response" "github.com/alipay/global-open-sdk-go/com/alipay/api/tools" "io" "log" "net/http" "strconv" "time" defaultAlipayClient "github.com/alipay/global-open-sdk-go/com/alipay/api" "github.com/google/uuid" ) `] }, `server-Go-ELEMENT-other1`), _jsx(AntomChunk, { language: `go`, steps: [`get-integration-resources`], chunks: [`const ( /* replace with your client id
find your client id here: quickStart */ ClientID = "your_client_id" /* replace with your antom public key (used to verify signature)
find your antom public key here: quickStart */ AntomPublicKey = "antom_public_key" /* replace with your private key (used to sign)
please ensure the secure storage of your private key to prevent leakage */ MerchantPrivateKey = "your_private_key" /* replace with your domain
find your domain here: quickStart */ Domain = "https://open-sea-global.alipay.com" ) // Initialize global client var client *defaultAlipayClient.DefaultAlipayClient func init() { client = defaultAlipayClient.NewDefaultAlipayClient( Domain, ClientID, MerchantPrivateKey, AntomPublicKey) } `] }, `server-Go-ELEMENT-code1`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func main() { // Register routes http.HandleFunc("/payment/createSession", enableCORS(handleCreateSession)) http.HandleFunc("/payment/inquiryPayment", enableCORS(handleInquiryPayment)) http.HandleFunc("/payment/receiveNotify", enableCORS(handleReceiveNotify)) fmt.Println("Open your browser and visit: http://localhost:8080") log.Fatal(http.ListenAndServe(":8080", nil)) } `] }, `server-Go-ELEMENT-other2`), _jsx(AntomChunk, { language: `go`, steps: [`create-a-payment-session`], chunks: [`func handleCreateSession(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var payment PaymentVO json.NewDecoder(r.Body).Decode(&payment) request, sessionRequest := pay.NewAlipayPaymentSessionRequest() sessionRequest.ProductCode = model.CASHIER_PAYMENT sessionRequest.ProductScene = "ELEMENT_PAYMENT" // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object parseFloat, _ := strconv.ParseFloat(payment.AmountValue, 64) amountValue := money.NewFromFloat(parseFloat, payment.Currency).Amount() // set amount amount := &model.Amount{Value: strconv.FormatInt(amountValue, 10), Currency: payment.Currency} sessionRequest.PaymentAmount = amount // replace with your paymentRequestId paymentRequestId := uuid.New().String() sessionRequest.PaymentRequestId = paymentRequestId // replace with your orderId orderId := uuid.New().String() // set buyer info buyer := &model.Buyer{ReferenceBuyerId: "yourBuyerId"} // set order info order := &model.Order{ ReferenceOrderId: orderId, OrderDescription: "antom element testing order", OrderAmount: amount, Buyer: buyer, } sessionRequest.Order = order // replace with your settlementCurrency // you can query your settlementCurrency here: Settlement overview strategy := &model.SettlementStrategy{ SettlementCurrency: "SGD", } sessionRequest.SettlementStrategy = strategy // replace with your notify url // or configure your notify url here: Notification URL sessionRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receiveNotify" `] }, `server-Go-ELEMENT-code2`), _jsx(AntomChunk, { language: `go`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url sessionRequest.PaymentRedirectUrl = "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId `] }, `server-Go-ELEMENT-code3`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [` startTime := time.Now() sessionRequestJson, _ := json.Marshal(sessionRequest) log.Printf("paymentSession request: %s", sessionRequestJson) response, err := client.Execute(request) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestId, Message: err.Error(), }) return } log.Printf("paymentSession response: %+v", response) log.Printf("paymentSession request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestId, Data: response, }) } `] }, `server-Go-ELEMENT-other3`), _jsx(AntomChunk, { language: `go`, steps: [`inquire-payment-result`], chunks: [`func handleInquiryPayment(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var requestMap map[string]string json.NewDecoder(r.Body).Decode(&requestMap) paymentRequestID := requestMap["paymentRequestId"] queryRequest, request := pay.NewAlipayPayQueryRequest() request.PaymentRequestId = paymentRequestID startTime := time.Now() log.Printf("inquiry payment request: %+v", request) response, err := client.Execute(queryRequest) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestID, Message: err.Error(), }) return } log.Printf("inquiry payment response: %+v", response) log.Printf("inquiry payment request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestID, Data: response, }) } `] }, `server-Go-ELEMENT-code4`), _jsx(AntomChunk, { language: `go`, steps: [`receive-payment-notification`], chunks: [`func handleReceiveNotify(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } rawBody, err := io.ReadAll(r.Body) if err != nil { sendJSONResponse(w, http.StatusBadRequest, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } notifyBody := string(rawBody) // retrieve the required parameters from http request requestURI := r.RequestURI requestMethod := r.Method // retrieve the required parameters from request header requestTime := r.Header.Get("request-time") clientID := r.Header.Get("client-id") signature := r.Header.Get("signature") // verify the signature of notification checkSignature, err := tools.CheckSignature(requestURI, requestMethod, clientID, requestTime, notifyBody, signature, AntomPublicKey) if err != nil || !checkSignature { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } var jsonObject map[string]interface{} if err := json.Unmarshal(rawBody, &jsonObject); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } notifyType, _ := jsonObject["notifyType"].(string) if notifyType == "PAYMENT_RESULT" { var paymentNotify notify.AlipayPayResultNotify if err := json.Unmarshal(rawBody, &paymentNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if paymentNotify.Result.ResultCode == "SUCCESS" { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. log.Printf("receive payment notify: %s", notifyBody) sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SUCCESS", ResultMessage: "success.", ResultStatus: "S", }) return } } else if notifyType == "CAPTURE_RESULT" { var captureNotify notify.AlipayCaptureResultNotify if err := json.Unmarshal(rawBody, &captureNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if captureNotify.Result.ResultCode == "SUCCESS" { // handle your own business logic. log.Printf("receive capture notify: %+v", captureNotify) sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SUCCESS", ResultMessage: "success.", ResultStatus: "S", }) return } } sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "SYSTEM_ERROR", ResultMessage: "system error.", ResultStatus: "F", }) } `] }, `server-Go-ELEMENT-code5`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func enableCORS(handler http.HandlerFunc) http.HandlerFunc { return func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Access-Control-Allow-Origin", "*") w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS") w.Header().Set("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Authorization") if r.Method == "OPTIONS" { w.WriteHeader(http.StatusOK) return } handler(w, r) } } func sendJSONResponse(w http.ResponseWriter, statusCode int, data interface{}) { w.Header().Set("Content-Type", "application/json") w.WriteHeader(statusCode) json.NewEncoder(w).Encode(data) } // PaymentVO represents payment request data type PaymentVO struct {`, ' AmountValue string `json:"amountValue"`', ' Currency string `json:"currency"`', `} // ApiResponse represents API response structure type ApiResponse struct {`, ' Status string `json:"status"`', ' PaymentRequestID string `json:"paymentRequestId"`', ' Message string `json:"message,omitempty"`', ' Data interface{} `json:"data,omitempty"`', `} `] }, `server-Go-ELEMENT-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/.net/server.cs', when: { server: '.NET', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `dotnet`, filename: 'server.cs', downloadOnly: false, steps: [`get-integration-resources`, `initiate-a-payment-request`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [`using System.Diagnostics; using Microsoft.AspNetCore; using Microsoft.AspNetCore.Mvc; using com.alipay.ams.api.request; using com.alipay.ams.api; using com.alipay.ams.api.entities; using com.alipay.ams.api.request.notify; using com.alipay.ams.util; using Newtonsoft.Json; using NMoneys; namespace antom_online_payment_sample_dotnet.api.checkout { /** * sample payment server using Antom API integration mode */ public class Server {`] }, `server-.NET-API-other1`), _jsx(AntomChunk, { language: `dotnet`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id * find your client id here: quickStart */ public static readonly string CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature) * find your antom public key here: quickStart */ public static readonly string ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign) * please ensure the secure storage of your private key to prevent leakage */ public static readonly string MERCHANT_PRIVATE_KEY = "your_private_key"; public static DefaultAlipayClient defaultAlipayClient = new DefaultAlipayClient("https://open-sea-global.alipay.com", CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY); `] }, `server-.NET-API-code1`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` public static void Main(string[] args) { WebHost.CreateDefaultBuilder(args) .UseUrls("http://0.0.0.0:8080") .UseWebRoot("client") .UseStartup() .Build() .Run(); } } public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc().AddNewtonsoftJson(); // Add the Cors service services.AddCors(options => { options.AddPolicy("AllowAllOrigins", builder => { builder.AllowAnyOrigin(); builder.AllowAnyMethod(); builder.AllowAnyHeader(); }); }); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) app.UseDeveloperExceptionPage(); app.UseCors("AllowAllOrigins"); app.UseRouting(); app.UseStaticFiles(); app.UseEndpoints(endpoints => endpoints.MapControllers()); } } [ApiController] [Route("[controller]")] [Produces("application/json")] [ApiConventionType(typeof(DefaultApiConventions))] public class PaymentController : Controller {`] }, `server-.NET-API-other2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`initiate-a-payment-request`], chunks: [` [HttpPost("pay")] public IActionResult Pay([FromBody] PaymentVO paymentVO) { var paymentCreateRequest = new PaymentCreateRequest(); paymentCreateRequest.ProductCode = ProductCodeType.CASHIER_PAYMENT; // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object var minorIntegralAmount = new Money(decimal.Parse(paymentVO.AmountValue), Currency.Get(paymentVO.Currency)) .MinorIntegralAmount; // set amount var amount = new Amount() { Currency = paymentVO.Currency, Value = minorIntegralAmount.ToString() }; paymentCreateRequest.PaymentAmount = amount; // replace with your paymentRequestId var paymentRequestId = Guid.NewGuid().ToString(); paymentCreateRequest.PaymentRequestId = paymentRequestId; // set paymentMethod var paymentMethod = new PaymentMethod(paymentVO.PaymentMethodType); paymentCreateRequest.PaymentMethod = paymentMethod; // when paymentMethodType is CARD, need to set authorization if ("CARD".Equals(paymentVO.PaymentMethodType)) { paymentCreateRequest.PaymentFactor = new PaymentFactor() { IsAuthorization = true }; } // set buyer info var buyer = new Buyer() { ReferenceBuyerId = "yourBuyerId" }; // replace with your orderId var orderId = Guid.NewGuid().ToString(); // set order info paymentCreateRequest.Order = new Order() { ReferenceOrderId = orderId, OrderDescription = "antom api testing order", OrderAmount = amount, Buyer = buyer }; // set env info Enum.TryParse(paymentVO.TerminalType, out TerminalType terminalType); var env = new Env() { TerminalType = terminalType, ClientIp = "1.2.3.4", }; if (!terminalType.Equals(TerminalType.WEB) && !string.IsNullOrWhiteSpace(paymentVO.OsType) && Enum.TryParse(paymentVO.OsType, out OsType osType)) { env.OsType = osType; } paymentCreateRequest.Env = env; // replace with your notify url // or configure your notify url here: Notification URL paymentCreateRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receivePaymentNotify"; `] }, `server-.NET-API-code2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url paymentCreateRequest.PaymentRedirectUrl = "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId; `] }, `server-.NET-API-code3`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("payment request: " + JsonConvert.SerializeObject(paymentCreateRequest, Formatting.Indented)); var paymentCreateResponse = Server.defaultAlipayClient.Execute(paymentCreateRequest); Console.WriteLine("payment response: " + JsonConvert.SerializeObject(paymentCreateResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("payment request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(paymentRequestId, paymentCreateResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } } `] }, `server-.NET-API-other3`), _jsx(AntomChunk, { language: `dotnet`, steps: [`inquire-payment-result`], chunks: [` [HttpPost("inquiryPayment")] public IActionResult InquiryPayment([FromBody] IDictionary map) { var inquiryPaymentRequest = new PaymentInquiryRequest(); map.TryGetValue("paymentRequestId", out var paymentRequestId); inquiryPaymentRequest.PaymentRequestId = paymentRequestId; PaymentInquiryResponse paymentInquiryResponse; try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("inquiry payment request: " + JsonConvert.SerializeObject(inquiryPaymentRequest, Formatting.Indented)); paymentInquiryResponse = Server.defaultAlipayClient.Execute( inquiryPaymentRequest); Console.WriteLine("inquiry payment response: " + JsonConvert.SerializeObject(paymentInquiryResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("inquiry payment request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } return Ok(new ApiResponse(paymentRequestId, paymentInquiryResponse)); } `] }, `server-.NET-API-code4`), _jsx(AntomChunk, { language: `dotnet`, steps: [`receive-payment-notification`], chunks: [` ///

/// receive payment notify ///

/// [HttpPost("receivePaymentNotify")] public async Task ReceivePaymentNotify() { // retrieve the required parameters from http request string requestUri = HttpContext.Request.Path; string notifyBody; using (var reader = new StreamReader(Request.Body)) { notifyBody = await reader.ReadToEndAsync(); } // retrieve the required parameters from request header string requestTime = HttpContext.Request.Headers["request-time"]; string clientId = HttpContext.Request.Headers["client-id"]; string signature = HttpContext.Request.Headers["signature"]; try { // verify the signature of notification var realSignature=""; if (string.IsNullOrWhiteSpace(signature)) { throw new Exception("empty notify signature"); } var parts = signature.Split("signature="); if (parts.Length > 1) { realSignature = parts[1]; } var verifyResult = SignatureUtil.verify(requestUri, clientId, requestTime, Server.ANTOM_PUBLIC_KEY, notifyBody, realSignature); if (!verifyResult) { throw new Exception("Invalid notify signature"); } // deserialize the notification body var alipayPayResultNotify = JsonConvert.DeserializeObject(notifyBody); if (alipayPayResultNotify != null && "SUCCESS".Equals(alipayPayResultNotify.Result.ResultCode)) { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. Console.WriteLine("receive payment notify: " + JsonConvert.SerializeObject(alipayPayResultNotify, Formatting.Indented)); return Ok(new Result() { ResultCode = "SUCCESS", ResultMessage = "success.", ResultStatus = ResultStatusType.S }); } } catch (Exception e) { return Ok(new Result() { ResultCode = "FAIL", ResultMessage = "fail.", ResultStatus = ResultStatusType.F }); } return Ok(new Result() { ResultCode = "SYSTEM_ERROR", ResultMessage = "system error.", ResultStatus = ResultStatusType.F }); }`] }, `server-.NET-API-code5`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` } public class ApiResponse { public string Status { get; set; } = "success"; public string PaymentRequestId { get; set; } public string Message { get; set; } public object Data { get; set; } public ApiResponse(string paymentRequestId, object data) { PaymentRequestId = paymentRequestId; Data = data; } public ApiResponse(string paymentRequestId, Exception e) { PaymentRequestId = paymentRequestId; Status = "error"; Message = e.Message; } } public class PaymentVO { public string AmountValue { get; set; } public string Currency { get; set; } public string PaymentMethodType { get; set; } public string TerminalType { get; set; } = "WEB"; public string? OsType { get; set; } } } `] }, `server-.NET-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/.net/server.cs', when: { server: '.NET', integration_type: 'SDK' }, children: _jsxs(AntomFile, { language: `dotnet`, filename: 'server.cs', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [`using System.Diagnostics; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore; using com.alipay.ams.api; using com.alipay.ams.api.entities; using com.alipay.ams.api.request; using com.alipay.ams.api.request.notify; using com.alipay.ams.api.request.pay; using com.alipay.ams.api.response.pay; using com.alipay.ams.util; using Newtonsoft.Json; using NMoneys; namespace antom_online_payment_sample_dotnet.checkout.sdk { /** * sample payment server using Antom SDK integration mode */ public class Server {`] }, `server-.NET-SDK-other1`), _jsx(AntomChunk, { language: `dotnet`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id * find your client id here: quickStart */ public static readonly string CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature) * find your antom public key here: quickStart */ public static readonly string ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign) * please ensure the secure storage of your private key to prevent leakage */ public static readonly string MERCHANT_PRIVATE_KEY = "your_private_key"; public static DefaultAlipayClient defaultAlipayClient = new DefaultAlipayClient("https://open-sea-global.alipay.com", CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY); `] }, `server-.NET-SDK-code1`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` public static void Main(string[] args) { WebHost.CreateDefaultBuilder(args) .UseUrls("http://0.0.0.0:8080") .UseWebRoot("client") .UseStartup() .Build() .Run(); } } public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc().AddNewtonsoftJson(); // Add the Cors service services.AddCors(options => { options.AddPolicy("AllowAllOrigins", builder => { builder.AllowAnyOrigin(); builder.AllowAnyMethod(); builder.AllowAnyHeader(); }); }); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) app.UseDeveloperExceptionPage(); app.UseCors("AllowAllOrigins"); app.UseRouting(); app.UseStaticFiles(); app.UseEndpoints(endpoints => endpoints.MapControllers()); } } [ApiController] [Route("[controller]")] [Produces("application/json")] [ApiConventionType(typeof(DefaultApiConventions))] public class PaymentController : ControllerBase {`] }, `server-.NET-SDK-other2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`create-a-payment-session`], chunks: [` [HttpPost("createSession")] public IActionResult CreatePaymentSession([FromBody] PaymentVO payment) { var alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); alipayPaymentSessionRequest.ProductCode = ProductCodeType.CASHIER_PAYMENT; // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object var minorIntegralAmount = new Money(decimal.Parse(payment.AmountValue), Currency.Get(payment.Currency)) .MinorIntegralAmount; // set amount var amount = new Amount() { Currency = payment.Currency, Value = minorIntegralAmount.ToString() }; alipayPaymentSessionRequest.PaymentAmount = amount; // replace with your paymentRequestId var paymentRequestId = Guid.NewGuid().ToString(); alipayPaymentSessionRequest.PaymentRequestId = paymentRequestId; // set paymentMethod var paymentMethod = new PaymentMethod(payment.PaymentMethodType); alipayPaymentSessionRequest.PaymentMethod = paymentMethod; // when paymentMethodType is CARD, need to set authorization if ("CARD".Equals(payment.PaymentMethodType)) { alipayPaymentSessionRequest.PaymentFactor = new PaymentFactor() { IsAuthorization = true }; } // set buyer info var buyer = new Buyer() { ReferenceBuyerId = "yourBuyerId" }; // replace with your orderId var orderId = Guid.NewGuid().ToString(); // set order info alipayPaymentSessionRequest.Order = new Order() { ReferenceOrderId = orderId, OrderDescription = "antom sdk testing order", OrderAmount = amount, Buyer = buyer }; // replace with your notify url // or configure your notify url here: Notification URL alipayPaymentSessionRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receivePaymentNotify"; `] }, `server-.NET-SDK-code2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url alipayPaymentSessionRequest.PaymentRedirectUrl = "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId; `] }, `server-.NET-SDK-code3`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("paymentSession request: " + JsonConvert.SerializeObject(alipayPaymentSessionRequest, Formatting.Indented)); var alipayPaymentSessionResponse = Server.defaultAlipayClient.Execute(alipayPaymentSessionRequest); Console.WriteLine("paymentSession response: " + JsonConvert.SerializeObject(alipayPaymentSessionResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("paymentSession request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(paymentRequestId, alipayPaymentSessionResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } } `] }, `server-.NET-SDK-other3`), _jsx(AntomChunk, { language: `dotnet`, steps: [`inquire-payment-result`], chunks: [` [HttpPost("inquiryPayment")] public IActionResult InquiryPayment([FromBody] Dictionary map) { map.TryGetValue("paymentRequestId", out var paymentRequestId); var alipayPayQueryRequest = new PaymentInquiryRequest(); alipayPayQueryRequest.PaymentRequestId = paymentRequestId; try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("inquiry payment request: " + JsonConvert.SerializeObject(alipayPayQueryRequest, Formatting.Indented)); var alipayPayQueryResponse = Server.defaultAlipayClient.Execute(alipayPayQueryRequest); Console.WriteLine("inquiry payment response: " + JsonConvert.SerializeObject(alipayPayQueryResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("inquiry payment request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(paymentRequestId, alipayPayQueryResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } } `] }, `server-.NET-SDK-code4`), _jsx(AntomChunk, { language: `dotnet`, steps: [`receive-payment-notification`], chunks: [` ///

/// receive payment notify ///

/// notify body /// Result [HttpPost("receivePaymentNotify")] public async Task ReceivePaymentNotify() { // retrieve the required parameters from http request string requestUri = HttpContext.Request.Path; string notifyBody; using (var reader = new StreamReader(Request.Body)) { notifyBody = await reader.ReadToEndAsync(); } // retrieve the required parameters from request header string requestTime = HttpContext.Request.Headers["request-time"]; string clientId = HttpContext.Request.Headers["client-id"]; string signature = HttpContext.Request.Headers["signature"]; try { // verify the signature of notification var realSignature = ""; if (string.IsNullOrWhiteSpace(signature)) { throw new Exception("empty notify signature"); } var parts = signature.Split("signature="); if (parts.Length > 1) { realSignature = parts[1]; } var verifyResult = SignatureUtil.verify(requestUri, clientId, requestTime, Server.ANTOM_PUBLIC_KEY, notifyBody, realSignature); if (!verifyResult) { throw new Exception("Invalid notify signature"); } // deserialize the notification body var paymentNotify = JsonConvert.DeserializeObject(notifyBody); if (paymentNotify != null && "SUCCESS".Equals(paymentNotify.Result.ResultCode)) { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. Console.WriteLine("receive payment notify: " + JsonConvert.SerializeObject(paymentNotify, Formatting.Indented)); return Ok(new Result() { ResultCode = "SUCCESS", ResultMessage = "success.", ResultStatus = ResultStatusType.S }); } } catch (Exception) { return Ok(new Result() { ResultCode = "FAIL", ResultMessage = "fail.", ResultStatus = ResultStatusType.F }); } return Ok(new Result() { ResultCode = "SYSTEM_ERROR", ResultMessage = "system error.", ResultStatus = ResultStatusType.F }); }`] }, `server-.NET-SDK-code5`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` } public class PaymentVO { public string AmountValue { get; set; } public string Currency { get; set; } public string PaymentMethodType { get; set; } } public class ApiResponse { public string Status { get; set; } = "success"; public string PaymentRequestId { get; set; } public string Message { get; set; } public object Data { get; set; } public ApiResponse(string paymentRequestId, object data) { PaymentRequestId = paymentRequestId; Data = data; } public ApiResponse(string paymentRequestId, Exception e) { PaymentRequestId = paymentRequestId; Status = "error"; Message = e.Message; } } } `] }, `server-.NET-SDK-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/.net/server.cs', when: { server: '.NET', integration_type: 'Embedded CKP' }, children: _jsxs(AntomFile, { language: `dotnet`, filename: 'server.cs', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [`using System.Diagnostics; using ams_dotnet.com.alipay.ams.api.response.pay; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore; using com.alipay.ams.api; using com.alipay.ams.api.entities; using com.alipay.ams.api.request; using com.alipay.ams.api.request.notify; using com.alipay.ams.util; using Newtonsoft.Json; using NMoneys; namespace antom_online_payment_sample_dotnet.checkout.ckp { /** * sample payment server using Antom CKP integration mode */ public class Server {`] }, `server-.NET-CKP_EMBEDDED-other1`), _jsx(AntomChunk, { language: `dotnet`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id * find your client id here: quickStart */ public static readonly string CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature) * find your antom public key here: quickStart */ public static readonly string ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign) * please ensure the secure storage of your private key to prevent leakage */ public static readonly string MERCHANT_PRIVATE_KEY = "your_private_key"; public static DefaultAlipayClient defaultAlipayClient = new DefaultAlipayClient("https://open-sea-global.alipay.com", CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY); `] }, `server-.NET-CKP_EMBEDDED-code1`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` public static void Main(string[] args) { WebHost.CreateDefaultBuilder(args) .UseUrls("http://0.0.0.0:8080") .UseWebRoot("client") .UseStartup() .Build() .Run(); } } public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc().AddNewtonsoftJson(); // Add the Cors service services.AddCors(options => { options.AddPolicy("AllowAllOrigins", builder => { builder.AllowAnyOrigin(); builder.AllowAnyMethod(); builder.AllowAnyHeader(); }); }); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) app.UseDeveloperExceptionPage(); app.UseCors("AllowAllOrigins"); app.UseRouting(); app.UseStaticFiles(); app.UseEndpoints(endpoints => endpoints.MapControllers()); } } [ApiController] [Route("[controller]")] [Produces("application/json")] [ApiConventionType(typeof(DefaultApiConventions))] public class PaymentController : ControllerBase {`] }, `server-.NET-CKP_EMBEDDED-other2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`create-a-payment-session`], chunks: [` [HttpPost("createSession")] public IActionResult CreatePaymentSession([FromBody] PaymentVO payment) { var alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); alipayPaymentSessionRequest.ProductCode = ProductCodeType.CASHIER_PAYMENT; alipayPaymentSessionRequest.ProductScene = "CHECKOUT_PAYMENT"; // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object var minorIntegralAmount = new Money(decimal.Parse(payment.AmountValue), Currency.Get(payment.Currency)) .MinorIntegralAmount; // set amount var amount = new Amount() { Currency = payment.Currency, Value = minorIntegralAmount.ToString() }; alipayPaymentSessionRequest.PaymentAmount = amount; // replace with your paymentRequestId var paymentRequestId = Guid.NewGuid().ToString(); alipayPaymentSessionRequest.PaymentRequestId = paymentRequestId; // set buyer info var buyer = new Buyer() { ReferenceBuyerId = "yourBuyerId" }; // set goods info var goods = new Goods() { GoodsBrand = "Antom Brand", GoodsCategory = "outdoor goods/bag", GoodsName = "Classic Woman Bag", GoodsQuantity = "1", GoodsSkuName = "Black", GoodsImageUrl = "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ", GoodsUnitAmount = amount, GoodsUrl = "https://yourGoodsUrl", ReferenceGoodsId = "yourGoodsId" }; // replace with your orderId var orderId = Guid.NewGuid().ToString(); // set order info alipayPaymentSessionRequest.Order = new Order() { ReferenceOrderId = orderId, OrderDescription = "antom ckp testing order", OrderAmount = amount, Buyer = buyer, Goods = [goods] }; // replace with your notify url // or configure your notify url here: Notification URL alipayPaymentSessionRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receivePaymentNotify"; `] }, `server-.NET-CKP_EMBEDDED-code2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url alipayPaymentSessionRequest.PaymentRedirectUrl = "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId; `] }, `server-.NET-CKP_EMBEDDED-code3`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("paymentSession request: " + JsonConvert.SerializeObject(alipayPaymentSessionRequest, Formatting.Indented)); var alipayPaymentSessionResponse = Server.defaultAlipayClient.Execute(alipayPaymentSessionRequest); Console.WriteLine("paymentSession response: " + JsonConvert.SerializeObject(alipayPaymentSessionResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("paymentSession request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(paymentRequestId, alipayPaymentSessionResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } } `] }, `server-.NET-CKP_EMBEDDED-other3`), _jsx(AntomChunk, { language: `dotnet`, steps: [`inquire-payment-result`], chunks: [` [HttpPost("inquiryPayment")] public IActionResult InquiryPayment([FromBody] Dictionary map) { map.TryGetValue("paymentRequestId", out var paymentRequestId); var alipayPayQueryRequest = new PaymentInquiryRequest(); alipayPayQueryRequest.PaymentRequestId = paymentRequestId; try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("inquiry payment request: " + JsonConvert.SerializeObject(alipayPayQueryRequest, Formatting.Indented)); var alipayPayQueryResponse = Server.defaultAlipayClient.Execute(alipayPayQueryRequest); Console.WriteLine("inquiry payment response: " + JsonConvert.SerializeObject(alipayPayQueryResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("inquiry payment request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(paymentRequestId, alipayPayQueryResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } } `] }, `server-.NET-CKP_EMBEDDED-code4`), _jsx(AntomChunk, { language: `dotnet`, steps: [`receive-payment-notification`], chunks: [` ///

/// receive notify ///

[HttpPost("receiveNotify")] public async Task ReceiveNotify() { // retrieve the required parameters from http request string requestUri = HttpContext.Request.Path; string notifyBody; using (var reader = new StreamReader(Request.Body)) { notifyBody = await reader.ReadToEndAsync(); } // retrieve the required parameters from request header string requestTime = HttpContext.Request.Headers["request-time"]; string clientId = HttpContext.Request.Headers["client-id"]; string signature = HttpContext.Request.Headers["signature"]; try { // verify the signature of notification var realSignature = ""; if (string.IsNullOrWhiteSpace(signature)) { throw new Exception("empty notify signature"); } var parts = signature.Split("signature="); if (parts.Length > 1) { realSignature = parts[1]; } var verifyResult = SignatureUtil.verify(requestUri, clientId, requestTime, Server.ANTOM_PUBLIC_KEY, notifyBody, realSignature); if (!verifyResult) { throw new Exception("Invalid notify signature"); } // deserialize the notification body dynamic jsonObject = JsonConvert.DeserializeObject(notifyBody); string notifyType = jsonObject.notifyType; if ("PAYMENT_RESULT".Equals(notifyType)) { var paymentNotify = JsonConvert.DeserializeObject(notifyBody); if (paymentNotify != null && "SUCCESS".Equals(paymentNotify.Result.ResultCode)) { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. Console.WriteLine("receive payment notify: " + JsonConvert.SerializeObject(paymentNotify, Formatting.Indented)); return Ok(new Result() { ResultCode = "SUCCESS", ResultMessage = "success.", ResultStatus = "S" }); } } else if ("CAPTURE_RESULT".Equals(notifyType)) { var captureNotify = JsonConvert.DeserializeObject(notifyBody); if (captureNotify != null && "SUCCESS".Equals(captureNotify.Result.ResultCode)) { // handle your own business logic. Console.WriteLine("receive capture notify: " + JsonConvert.SerializeObject(captureNotify, Formatting.Indented)); return Ok(new Result() { ResultCode = "SUCCESS", ResultMessage = "success.", ResultStatus = "S" }); } } } catch (Exception) { return Ok(new Result() { ResultCode = "FAIL", ResultMessage = "fail.", ResultStatus = "F" }); } return Ok(new Result() { ResultCode = "SYSTEM_ERROR", ResultMessage = "system error.", ResultStatus = "F" }); }`] }, `server-.NET-CKP_EMBEDDED-code5`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` } public class PaymentVO { public string AmountValue { get; set; } public string Currency { get; set; } } public class ApiResponse { public string Status { get; set; } = "success"; public string PaymentRequestId { get; set; } public string Message { get; set; } public object Data { get; set; } public ApiResponse(string paymentRequestId, object data) { PaymentRequestId = paymentRequestId; Data = data; } public ApiResponse(string paymentRequestId, Exception e) { PaymentRequestId = paymentRequestId; Status = "error"; Message = e.Message; } } } `] }, `server-.NET-CKP_EMBEDDED-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/.net/server.cs', when: { server: '.NET', integration_type: 'Hosted CKP' }, children: _jsxs(AntomFile, { language: `dotnet`, filename: 'server.cs', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [`using System.Diagnostics; using ams_dotnet.com.alipay.ams.api.response.pay; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore; using com.alipay.ams.api; using com.alipay.ams.api.entities; using com.alipay.ams.api.request; using com.alipay.ams.api.request.notify; using com.alipay.ams.util; using Newtonsoft.Json; using NMoneys; namespace antom_online_payment_sample_dotnet.checkout.ckp { /** * sample payment server using Antom CKP integration mode */ public class Server {`] }, `server-.NET-CKP_HOST-other1`), _jsx(AntomChunk, { language: `dotnet`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id * find your client id here: quickStart */ public static readonly string CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature) * find your antom public key here: quickStart */ public static readonly string ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign) * please ensure the secure storage of your private key to prevent leakage */ public static readonly string MERCHANT_PRIVATE_KEY = "your_private_key"; public static DefaultAlipayClient defaultAlipayClient = new DefaultAlipayClient("https://open-sea-global.alipay.com", CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY); `] }, `server-.NET-CKP_HOST-code1`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` public static void Main(string[] args) { WebHost.CreateDefaultBuilder(args) .UseUrls("http://0.0.0.0:8080") .UseWebRoot("client") .UseStartup() .Build() .Run(); } } public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc().AddNewtonsoftJson(); // Add the Cors service services.AddCors(options => { options.AddPolicy("AllowAllOrigins", builder => { builder.AllowAnyOrigin(); builder.AllowAnyMethod(); builder.AllowAnyHeader(); }); }); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) app.UseDeveloperExceptionPage(); app.UseCors("AllowAllOrigins"); app.UseRouting(); app.UseStaticFiles(); app.UseEndpoints(endpoints => endpoints.MapControllers()); } } [ApiController] [Route("[controller]")] [Produces("application/json")] [ApiConventionType(typeof(DefaultApiConventions))] public class PaymentController : ControllerBase {`] }, `server-.NET-CKP_HOST-other2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`create-a-payment-session`], chunks: [` [HttpPost("createSession")] public IActionResult CreatePaymentSession([FromBody] PaymentVO payment) { var alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); alipayPaymentSessionRequest.ProductCode = ProductCodeType.CASHIER_PAYMENT; alipayPaymentSessionRequest.ProductScene = "CHECKOUT_PAYMENT"; // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object var minorIntegralAmount = new Money(decimal.Parse(payment.AmountValue), Currency.Get(payment.Currency)) .MinorIntegralAmount; // set amount var amount = new Amount() { Currency = payment.Currency, Value = minorIntegralAmount.ToString() }; alipayPaymentSessionRequest.PaymentAmount = amount; // replace with your paymentRequestId var paymentRequestId = Guid.NewGuid().ToString(); alipayPaymentSessionRequest.PaymentRequestId = paymentRequestId; // set buyer info var buyer = new Buyer() { ReferenceBuyerId = "yourBuyerId" }; // set goods info var goods = new Goods() { GoodsBrand = "Antom Brand", GoodsCategory = "outdoor goods/bag", GoodsName = "Classic Woman Bag", GoodsQuantity = "1", GoodsSkuName = "Black", GoodsImageUrl = "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*H8M9RrxlArAAAAAAAAAAAAAAAQAAAQ", GoodsUnitAmount = amount, GoodsUrl = "https://yourGoodsUrl", ReferenceGoodsId = "yourGoodsId" }; // replace with your orderId var orderId = Guid.NewGuid().ToString(); // set order info alipayPaymentSessionRequest.Order = new Order() { ReferenceOrderId = orderId, OrderDescription = "antom ckp testing order", OrderAmount = amount, Buyer = buyer, Goods = [goods] }; // replace with your notify url // or configure your notify url here: Notification URL alipayPaymentSessionRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receivePaymentNotify"; `] }, `server-.NET-CKP_HOST-code2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url alipayPaymentSessionRequest.PaymentRedirectUrl = "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId; `] }, `server-.NET-CKP_HOST-code3`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("paymentSession request: " + JsonConvert.SerializeObject(alipayPaymentSessionRequest, Formatting.Indented)); var alipayPaymentSessionResponse = Server.defaultAlipayClient.Execute(alipayPaymentSessionRequest); Console.WriteLine("paymentSession response: " + JsonConvert.SerializeObject(alipayPaymentSessionResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("paymentSession request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(paymentRequestId, alipayPaymentSessionResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } } `] }, `server-.NET-CKP_HOST-other3`), _jsx(AntomChunk, { language: `dotnet`, steps: [`inquire-payment-result`], chunks: [` [HttpPost("inquiryPayment")] public IActionResult InquiryPayment([FromBody] Dictionary map) { map.TryGetValue("paymentRequestId", out var paymentRequestId); var alipayPayQueryRequest = new PaymentInquiryRequest(); alipayPayQueryRequest.PaymentRequestId = paymentRequestId; try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("inquiry payment request: " + JsonConvert.SerializeObject(alipayPayQueryRequest, Formatting.Indented)); var alipayPayQueryResponse = Server.defaultAlipayClient.Execute(alipayPayQueryRequest); Console.WriteLine("inquiry payment response: " + JsonConvert.SerializeObject(alipayPayQueryResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("inquiry payment request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(paymentRequestId, alipayPayQueryResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } } `] }, `server-.NET-CKP_HOST-code4`), _jsx(AntomChunk, { language: `dotnet`, steps: [`receive-payment-notification`], chunks: [` ///

/// receive notify ///

[HttpPost("receiveNotify")] public async Task ReceiveNotify() { // retrieve the required parameters from http request string requestUri = HttpContext.Request.Path; string notifyBody; using (var reader = new StreamReader(Request.Body)) { notifyBody = await reader.ReadToEndAsync(); } // retrieve the required parameters from request header string requestTime = HttpContext.Request.Headers["request-time"]; string clientId = HttpContext.Request.Headers["client-id"]; string signature = HttpContext.Request.Headers["signature"]; try { // verify the signature of notification var realSignature = ""; if (string.IsNullOrWhiteSpace(signature)) { throw new Exception("empty notify signature"); } var parts = signature.Split("signature="); if (parts.Length > 1) { realSignature = parts[1]; } var verifyResult = SignatureUtil.verify(requestUri, clientId, requestTime, Server.ANTOM_PUBLIC_KEY, notifyBody, realSignature); if (!verifyResult) { throw new Exception("Invalid notify signature"); } // deserialize the notification body dynamic jsonObject = JsonConvert.DeserializeObject(notifyBody); string notifyType = jsonObject.notifyType; if ("PAYMENT_RESULT".Equals(notifyType)) { var paymentNotify = JsonConvert.DeserializeObject(notifyBody); if (paymentNotify != null && "SUCCESS".Equals(paymentNotify.Result.ResultCode)) { // handle your own business logic. // e.g. The relationship between payment information and users is kept in the database. Console.WriteLine("receive payment notify: " + JsonConvert.SerializeObject(paymentNotify, Formatting.Indented)); return Ok(new Result() { ResultCode = "SUCCESS", ResultMessage = "success.", ResultStatus = "S" }); } } else if ("CAPTURE_RESULT".Equals(notifyType)) { var captureNotify = JsonConvert.DeserializeObject(notifyBody); if (captureNotify != null && "SUCCESS".Equals(captureNotify.Result.ResultCode)) { // handle your own business logic. Console.WriteLine("receive capture notify: " + JsonConvert.SerializeObject(captureNotify, Formatting.Indented)); return Ok(new Result() { ResultCode = "SUCCESS", ResultMessage = "success.", ResultStatus = "S" }); } } } catch (Exception) { return Ok(new Result() { ResultCode = "FAIL", ResultMessage = "fail.", ResultStatus = "F" }); } return Ok(new Result() { ResultCode = "SYSTEM_ERROR", ResultMessage = "system error.", ResultStatus = "F" }); }`] }, `server-.NET-CKP_HOST-code5`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` } public class PaymentVO { public string AmountValue { get; set; } public string Currency { get; set; } } public class ApiResponse { public string Status { get; set; } = "success"; public string PaymentRequestId { get; set; } public string Message { get; set; } public object Data { get; set; } public ApiResponse(string paymentRequestId, object data) { PaymentRequestId = paymentRequestId; Data = data; } public ApiResponse(string paymentRequestId, Exception e) { PaymentRequestId = paymentRequestId; Status = "error"; Message = e.Message; } } } `] }, `server-.NET-CKP_HOST-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/server/.net/server.cs', when: { server: '.NET', integration_type: 'Payment Element' }, children: _jsxs(AntomFile, { language: `dotnet`, filename: 'server.cs', downloadOnly: false, steps: [`get-integration-resources`, `create-a-payment-session`, `specify-the-payment-redirect-url`, `inquire-payment-result`, `receive-payment-notification`], children: [_jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [`using System.Diagnostics; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore; using com.alipay.ams.api; using com.alipay.ams.api.entities; using com.alipay.ams.api.request; using com.alipay.ams.api.request.notify; using com.alipay.ams.api.request.pay; using com.alipay.ams.api.response.pay; using com.alipay.ams.util; using Newtonsoft.Json; using NMoneys; namespace antom_online_payment_sample_dotnet.checkout.ele { /** * sample payment server using Antom ELEMENT integration mode */ public class Server {`] }, `server-.NET-ELEMENT-other1`), _jsx(AntomChunk, { language: `dotnet`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id * find your client id here: quickStart */ public static readonly string CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature) * find your antom public key here: quickStart */ public static readonly string ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign) * please ensure the secure storage of your private key to prevent leakage */ public static readonly string MERCHANT_PRIVATE_KEY = "your_private_key"; /** * replace with your domain * find your domain here: quickStart */ public static readonly string DOMAIN = "https://open-sea-global.alipay.com"; public static DefaultAlipayClient defaultAlipayClient = new DefaultAlipayClient(DOMAIN, CLIENT_ID, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY); `] }, `server-.NET-ELEMENT-code1`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` public static void Main(string[] args) { WebHost.CreateDefaultBuilder(args) .UseUrls("http://0.0.0.0:8080") .UseWebRoot("client") .UseStartup() .Build() .Run(); } } public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc().AddNewtonsoftJson(); // Add the Cors service services.AddCors(options => { options.AddPolicy("AllowAllOrigins", builder => { builder.AllowAnyOrigin(); builder.AllowAnyMethod(); builder.AllowAnyHeader(); }); }); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) app.UseDeveloperExceptionPage(); app.UseCors("AllowAllOrigins"); app.UseRouting(); app.UseStaticFiles(); app.UseEndpoints(endpoints => endpoints.MapControllers()); } } [ApiController] [Route("[controller]")] [Produces("application/json")] [ApiConventionType(typeof(DefaultApiConventions))] public class PaymentController : ControllerBase {`] }, `server-.NET-ELEMENT-other2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`create-a-payment-session`], chunks: [` [HttpPost("createSession")] public IActionResult CreatePaymentSession([FromBody] PaymentVO payment) { var alipayPaymentSessionRequest = new AlipayPaymentSessionRequest(); alipayPaymentSessionRequest.ProductCode = ProductCodeType.CASHIER_PAYMENT; alipayPaymentSessionRequest.ProductScene = "ELEMENT_PAYMENT"; // convert amount unit (in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object var minorIntegralAmount = new Money(decimal.Parse(payment.AmountValue), Currency.Get(payment.Currency)) .MinorIntegralAmount; // set amount var amount = new Amount() { Currency = payment.Currency, Value = minorIntegralAmount.ToString() }; alipayPaymentSessionRequest.PaymentAmount = amount; // replace with your paymentRequestId var paymentRequestId = Guid.NewGuid().ToString(); alipayPaymentSessionRequest.PaymentRequestId = paymentRequestId; // set buyer info var buyer = new Buyer() { ReferenceBuyerId = "yourBuyerId" }; // replace with your orderId var orderId = Guid.NewGuid().ToString(); // set order info alipayPaymentSessionRequest.Order = new Order() { ReferenceOrderId = orderId, OrderDescription = "antom element testing order", OrderAmount = amount, Buyer = buyer }; // replace with your settlementCurrency // you can query your settlementCurrency here: Settlement overview var settlementStrategy = new SettlementStrategy() { SettlementCurrency = "SGD" }; alipayPaymentSessionRequest.SettlementStrategy = settlementStrategy; // replace with your notify url // or configure your notify url here: Notification URL alipayPaymentSessionRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com/payment/receivePaymentNotify"; `] }, `server-.NET-ELEMENT-code2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`specify-the-payment-redirect-url`], chunks: [` // replace with your redirect url alipayPaymentSessionRequest.PaymentRedirectUrl = "http://localhost:8080/index.html?paymentRequestId=" + paymentRequestId; `] }, `server-.NET-ELEMENT-code3`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("paymentSession request: " + JsonConvert.SerializeObject(alipayPaymentSessionRequest, Formatting.Indented)); var alipayPaymentSessionResponse = Server.defaultAlipayClient.Execute(alipayPaymentSessionRequest); Console.WriteLine("paymentSession response: " + JsonConvert.SerializeObject(alipayPaymentSessionResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("paymentSession request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(paymentRequestId, alipayPaymentSessionResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } } `] }, `server-.NET-ELEMENT-other3`), _jsx(AntomChunk, { language: `dotnet`, steps: [`inquire-payment-result`], chunks: [` [HttpPost("inquiryPayment")] public IActionResult InquiryPayment([FromBody] Dictionary map) { map.TryGetValue("paymentRequestId", out var paymentRequestId); var alipayPayQueryRequest = new PaymentInquiryRequest(); alipayPayQueryRequest.PaymentRequestId = paymentRequestId; try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("inquiry payment request: " + JsonConvert.SerializeObject(alipayPayQueryRequest, Formatting.Indented)); var alipayPayQueryResponse = Server.defaultAlipayClient.Execute(alipayPayQueryRequest); Console.WriteLine("inquiry payment response: " + JsonConvert.SerializeObject(alipayPayQueryResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("inquiry payment request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(paymentRequestId, alipayPayQueryResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, e)); } } `] }, `server-.NET-ELEMENT-code4`), _jsx(AntomChunk, { language: `dotnet`, steps: [`receive-payment-notification`], chunks: [` ///

/// receive notify ///

Checkout Demo

Test Demo

Total to pay

JPY 6000

Order summary

Classic Black Cotton T-shirt, extra-soft feel.

JPY 3000

Black L size

Qty 1

Classic Woman Bag

JPY 3000

Black

Qty 1

Total

JPY 6000

choose your payment method

`] }, `Web-HTML-API-code1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', server: 'Java', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'src/main/resources/static/index.js', downloadOnly: false, steps: [`get-payment-continuation-link`, `handle-the-redirection`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`/** * The integration method of the Antom API. */ window.selectedPaymentOptionId = "PAYPAY"; window.amount = { currency: "JPY", value: "6000", mul: 1 }; const paymentOptions = [ { class: "JP", label: "PayPay", value: "PAYPAY", icon: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*mfRjRoV-rL4AAAAAAAAAAAAAAQAAAQ", }, { class: "JP", label: "Konbini", value: "KONBINI", icon: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*MfnBTYHOr5cAAAAAAAAAAAAAAQAAAQ", }, { class: "JP", label: "Pay-easy", value: "BANKTRANSFER_PAYEASY", icon: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*VhfgTLFuYOgAAAAAAAAAAAAAAQAAAQ", }, ]; // Step 1: Get payment session data from the endpoint and rediret to external pages.`] }, `Web-HTML-API-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-payment-continuation-link`], chunks: [`async function handleSubmit() { async function doPayment() { setBtnLoading(true); if (!window.selectedPaymentOptionId) { showAlert("Waring", "Please select a payment method!", "warning"); return; } // Define the URL for your backend endpoint const url = "http://localhost:8080/payment/pay"; const config = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ // in practice, amount should be calculated on your server side amountValue: window.amount.value, currency: window.amount.currency, paymentMethodType: window.selectedPaymentOptionId, }), }; try { const response = await fetch(url, config); if (!response.ok) { throw new Error("HTTP error! Status: " + response.status); } const res = await response.json(); if (res.status === "success") return res; throw new Error(res.message || "Invalid response format"); } catch (error) { showAlert( "Error", error.message || "Failed to fetch payment normalUrl data", "error" ); return null; } finally { setBtnLoading(false); } }`] }, `Web-HTML-API-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` try { const paymentResponse = await doPayment();`] }, `Web-HTML-API-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`handle-the-redirection`], chunks: [` window.top.location.href = paymentResponse.data.normalUrl;`] }, `Web-HTML-API-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` } catch (error) { showAlert(error.code, error.message || "Failed to process payment", "error"); } } // Step 2: Call inquiryPayment endpoint to get the payment status.`] }, `Web-HTML-API-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-payment-result`], chunks: [`async function inquiryPayment(paymentRequestId) { // Define the URL for your backend endpoint const url = "http://localhost:8080/payment/inquiryPayment"; const config = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ paymentRequestId }), }; const response = await fetch(url, config); if (!response.ok) throw new Error("Network response was not ok"); const res = await response.json(); return res.status === "success" ? res.data.paymentStatus : "ERROR"; }`] }, `Web-HTML-API-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` // Step 3: Create Polling mechanism to retrieve the payment result. async function pollPaymentResult() { const paymentRequestId = new URLSearchParams(window.location.search).get( "paymentRequestId" ); if (!paymentRequestId) return; const poll = async () => { let status = "PROCESSING"; let retries = 0; const maxRetries = 5; while (retries < maxRetries) { try { const statusResult = await inquiryPayment(paymentRequestId); status = statusResult ?? "ERROR"; } catch (error) { status = "ERROR"; } retries += 1; if (status === "SUCCESS" || retries === maxRetries) { return handlePaymentStatus(status); } await new Promise((resolve) => setTimeout(resolve, 2000)); } }; poll(); } // Step 3: Bind handleSubmit function to submit button. document.getElementById("submit").addEventListener("click", handleSubmit); // Step 4: Render payment options & check start polling result. document.addEventListener("DOMContentLoaded", () => { appendPaymentOptions(paymentOptions); pollPaymentResult(); }); // ------- User Interaction Section ------- function appendPaymentOptions(options) { const paymentOptionsContainer = document.getElementById("checkout-box"); paymentOptionsContainer.innerHTML = ""; const frag = document.createDocumentFragment(); options.forEach((option) => { const label = document.createElement("label"); label.className = "payment-option " + option.class; const input = document.createElement("input"); input.type = "radio"; input.className = "radio-input"; input.name = "radio"; input.value = option.value; input.checked = option.value === window.selectedPaymentOptionId; if (input.checked) { label.classList.add("selected"); } input.addEventListener("change", selectPaymentOption); const span = document.createElement("span"); span.className = "radio-button"; const icon = document.createElement("img"); icon.src = option.icon; icon.className = "payment-icon"; const textNode = document.createTextNode(option.label); label.append(input, span, icon, textNode); frag.appendChild(label); }); paymentOptionsContainer.appendChild(frag); } function selectPaymentOption(event) { const targetValue = event.target.value; if (targetValue) { document .querySelectorAll(".payment-option") .forEach((label) => label.classList.remove("selected")); const selectedLabel = event.target.parentElement; selectedLabel.classList.add("selected"); window.selectedPaymentOptionId = targetValue; } } function handlePaymentStatus(status) { switch (status) { case "SUCCESS": showPaymentResult( "Payment Successful", "Thank you for your payment! We will ship out your order as soon as possible.", "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ", "#e5f7f1", "#b7e9d9" ); break; case "FAIL": showPaymentResult( "Payment Failed", "Please return to the merchant order page and resubmit your payment.", "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ", "rgba(255, 91, 77, 0.10)", "rgba(255, 91, 77, 0.20)" ); break; case "ERROR": showPaymentResult( "Error", "An error occurred while checking the payment status. Please try again or contact support.", "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ", "rgba(255, 91, 77, 0.10)", "rgba(255, 91, 77, 0.20)" ); break; default: showPaymentResult( "Payment Processing", "Please return to the merchant order page and resubmit your payment.", "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ", "rgba(255, 159, 26, 0.10)", "rgba(255, 159, 26, 0.20) " ); } } function showPaymentResult(title, message, icon, bgColor, borderColor) { const messageContainer = document.querySelector("#result-container"); if (!messageContainer) return; messageContainer.classList.remove("hidden"); messageContainer.style.backgroundColor = bgColor; messageContainer.style.borderColor = borderColor; document.getElementById("message").innerText = title; document.getElementById("content").innerText = message; document.getElementById("resultIcon").setAttribute("src", icon); setTimeout(() => { messageContainer.classList.add("hidden"); messageContainer.style.backgroundColor = ""; messageContainer.style.borderColor = ""; document.getElementById("message").innerText = ""; document.getElementById("content").innerText = ""; document.getElementById("resultIcon").setAttribute("src", ""); window.location.href = "./index.html"; }, 8000); } function setBtnLoading(isLoading) { const submitElement = document.getElementById("submit"); submitElement.disabled = isLoading; submitElement.classList.toggle("disabled", isLoading); } function showAlert(title, subTitle, type) { const icons = { warning: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ", error: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ", success: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ", }; const containerDesktop = document.getElementById("container-desktop"); const mockup = document.getElementById("mockup"); const alertIcon = document.getElementById("alert-icon"); const containerTitle = document.getElementById("container-title"); const containerSubTitle = document.getElementById("container-subTitle"); containerDesktop.style.display = "block"; mockup.style.display = "block"; alertIcon.src = icons[type] || ""; containerTitle.textContent = title || ""; containerSubTitle.textContent = subTitle || ""; alertIcon.style.display = icons[type] ? "block" : "none"; containerTitle.style.display = title ? "block" : "none"; containerSubTitle.style.display = subTitle ? "block" : "none"; } function closeAlert() { document.getElementById("container-desktop").style.display = "none"; document.getElementById("mockup").style.display = "none"; } document.getElementById("alert-ok-btn").addEventListener("click", closeAlert); `] }, `Web-HTML-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.css', when: { client: 'HTML', server: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `css`, filename: 'src/main/resources/static/index.css', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `css`, steps: [``], chunks: [`body { margin: 0; padding: 0; font-family: 'PingFang SC'; display: flex; flex-direction: column; height: 100vh; margin: 0 auto; } .antom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } header { width: 100%; height: 72px; background: #fdfdfd; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header-content { margin: 0 auto; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-start; } .header-content-img { width: 120px; } .header-content .subtitle { margin-left: 28px; color: #bcbcbc; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .content { display: flex; flex-direction: column; position: relative; overflow: hidden; margin-top: 82px; width: 1280px; height: 800px; flex-shrink: 0; border-radius: 40px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .headerContent { display: flex; align-items: center; justify-content: flex-start; } .headerContent .logo { margin: 0 10px; } .headerContent .testDemo { width: 62px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.4); font-size: 8px; font-weight: 400; } .checkout-container { margin: 0 auto; width: 100%; display: flex; flex-grow: 1; } .container-left { flex: 1; background-color: #f0f6ff; display: flex; justify-content: flex-end; } .leftContent { width: 620px; padding: 100px 56px 232px 64px; box-sizing: border-box; } .leftContent .order { margin-top: 32px; padding-left: 36px; } .orderTotal .totals { color: #7c8ca3; font-size: 14px; font-weight: 400; line-height: 20px; } .orderTotal .money { color: #2a3a52; font-size: 24px; font-weight: 500; line-height: 36px; } .container-left .order-title { margin-top: 32px; color: #2a3a52; font-size: 18px; font-style: normal; font-weight: 500; line-height: 28px; } .container-left .product-details { display: flex; text-align: center; margin-top: 24px; } .product-details .details-left { width: 80px; height: 80px; padding: 12px; box-sizing: border-box; } .product-details .details-left img { width: 100%; height: 100%; vertical-align: middle; } .product-details .details-right { margin-left: 16px; flex: 1; } .product-details .details-right p { margin: 0; text-align: left; color: #2a3a52; font-size: 14px; font-weight: 400; line-height: 20px; } .product-details .details-right .details-shop-content { display: flex; flex-direction: row; justify-content: space-between; } .product-details .details-right .details-shop-content-text { color: #2a3a52; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; width: 218px; } .details-right-shop-message { color: #abb9cc !important; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin: 4px 0 !important; display: flex; align-items: center; } .line { margin: 0 8px; width: 1px; height: 12px; background-color: rgba(0, 0, 0, 0.04); } .total { border-top: 1px solid rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; margin-left: 130px; color: #2a3a52; font-size: 14px; font-weight: 500; line-height: 20px; } .total .money { font-size: 20px; font-weight: 500; line-height: 32px; } .details-right-shop-qty { color: #2a3a52; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin-top: 4px; } .container-right { flex: 1; } .container-right .rightContent { width: 660px; height: 100%; padding: 162px 64px 76px 56px; box-sizing: border-box; } .rightContent p { display: inline-flex; align-items: center; gap: 10px; color: #2a3a52; } .payment-option { border: 2px solid #000; padding: 10px; margin-bottom: 20px; display: none; cursor: pointer; } .payment-option.selected { border-color: #1650ff; } .show { display: block; } .submit { width: 100%; height: 56px; border-radius: 12px; background: #1650ff; color: #fff; border: none; text-decoration: none; cursor: pointer; font-size: 16px; display: block; margin-top: 32px; } .radio-group { display: flex; flex-direction: column; } .radio-group label { display: flex; align-items: center; margin-bottom: 8px; padding: 8px 16px; border: 1px solid #ebebeb; background: #fff; border-radius: 12px; color: #2a3a52; font-size: 16px; font-weight: 400; line-height: 24px; } .radio-group label.show { display: flex; } .radio-input { display: none; } .radio-button { width: 14px; height: 14px; border: 1px solid #abb9cc; margin-right: 8px; border-radius: 50%; } .radio-input:checked + .radio-button { border: 4px solid #1650ff; width: 8px; height: 8px; } .payment-icon { vertical-align: middle; display: flex; width: 32px; height: 32px; margin: 0 12px; padding: 4px 4.001px 3.996px 3.999px; justify-content: center; align-items: center; border-radius: 8px; border: 0.5px solid #f5f5f5; background: #fcfcfc; } .disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; } /* Result */ .hidden { display: none; } #result-container { display: flex; flex-direction: column; margin-top: 14px; align-items: flex-start; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0); padding: 12px 16px; color: #2a3a52; font-size: 13px; font-weight: 500; line-height: 20px; } .result-title { display: flex; align-items: center; } .result-title img { width: 20px; margin-right: 12px; } #content { color: #7c8ca3; text-align: center; font-size: 12px; font-weight: 400; line-height: 18px; margin-top: 8px; padding-left: 32px; } /* The Modal (background) */ .mockup { display: none; z-index: 1000; width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.6); } /* Modal Content/Box */ .container-desktop { display: none; width: 370px; height: 248px; position: fixed; top: 50%; left: 50%; z-index: 1001; border-radius: 12px; overflow: hidden; transform-origin: 50% 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); padding: 40px 0px 24px 0px; background-color: #fff; } @keyframes container-zoom-in { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .desktop-animation { animation: container-zoom-in 0.3s ease-in-out; animation-fill-mode: forwards; } .container-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .container-content img { width: 64px; height: 64px; } .container-title { color: var(--Content-Primary, #2a3a52); text-align: center; font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .container-subTitle { color: #7c8ca3; text-align: center; font-size: 14px; font-weight: 400; line-height: 20px; margin-top: 24px; } .container-btn { display: flex; width: 338px; height: 48px; padding: 0px 24px; justify-content: center; align-items: center; border-radius: var(---Button, 12px); background: var(--Action-Normal, #1650ff); border: none; cursor: pointer; color: var(--Content-Quaternary, #fff); font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .footer { display: flex; justify-content: center; margin-top: 20px; color: #bcbcbc; font-size: 16px; font-weight: 500; line-height: 24px; } .gotoTest { color: #1650ff; margin: 0 4px; text-decoration: none; } `] }, `Web-HTML-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.html', when: { client: 'HTML', integration_type: 'API' }, unless: { server: 'Java' }, children: _jsx(AntomFile, { language: `html`, filename: 'client/index.html', downloadOnly: false, steps: [`build-the-checkout-page`], children: _jsx(AntomChunk, { language: `html`, steps: [`build-the-checkout-page`], chunks: [` Antom Demo Checkout

Checkout Demo

Test Demo

Total to pay

JPY 6000

Order summary

Classic Black Cotton T-shirt, extra-soft feel.

JPY 3000

Black L size

Qty 1

Classic Woman Bag

JPY 3000

Black

Qty 1

Total

JPY 6000

choose your payment method

`] }, `Web-HTML-API-code1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', integration_type: 'API' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/index.js', downloadOnly: false, steps: [`get-payment-continuation-link`, `handle-the-redirection`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`/** * The integration method of the Antom API. */ window.selectedPaymentOptionId = "PAYPAY"; window.amount = { currency: "JPY", value: "6000", mul: 1 }; const paymentOptions = [ { class: "JP", label: "PayPay", value: "PAYPAY", icon: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*mfRjRoV-rL4AAAAAAAAAAAAAAQAAAQ", }, { class: "JP", label: "Konbini", value: "KONBINI", icon: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*MfnBTYHOr5cAAAAAAAAAAAAAAQAAAQ", }, { class: "JP", label: "Pay-easy", value: "BANKTRANSFER_PAYEASY", icon: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*VhfgTLFuYOgAAAAAAAAAAAAAAQAAAQ", }, ]; // Step 1: Get payment session data from the endpoint and rediret to external pages.`] }, `Web-HTML-API-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-payment-continuation-link`], chunks: [`async function handleSubmit() { async function doPayment() { setBtnLoading(true); if (!window.selectedPaymentOptionId) { showAlert("Waring", "Please select a payment method!", "warning"); return; } // Define the URL for your backend endpoint const url = "http://localhost:8080/payment/pay"; const config = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ // in practice, amount should be calculated on your server side amountValue: window.amount.value, currency: window.amount.currency, paymentMethodType: window.selectedPaymentOptionId, }), }; try { const response = await fetch(url, config); if (!response.ok) { throw new Error("HTTP error! Status: " + response.status); } const res = await response.json(); if (res.status === "success") return res; throw new Error(res.message || "Invalid response format"); } catch (error) { showAlert( "Error", error.message || "Failed to fetch payment normalUrl data", "error" ); return null; } finally { setBtnLoading(false); } }`] }, `Web-HTML-API-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` try { const paymentResponse = await doPayment();`] }, `Web-HTML-API-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`handle-the-redirection`], chunks: [` window.top.location.href = paymentResponse.data.normalUrl;`] }, `Web-HTML-API-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` } catch (error) { showAlert(error.code, error.message || "Failed to process payment", "error"); } } // Step 2: Call inquiryPayment endpoint to get the payment status.`] }, `Web-HTML-API-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-payment-result`], chunks: [`async function inquiryPayment(paymentRequestId) { // Define the URL for your backend endpoint const url = "http://localhost:8080/payment/inquiryPayment"; const config = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ paymentRequestId }), }; const response = await fetch(url, config); if (!response.ok) throw new Error("Network response was not ok"); const res = await response.json(); return res.status === "success" ? res.data.paymentStatus : "ERROR"; }`] }, `Web-HTML-API-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` // Step 3: Create Polling mechanism to retrieve the payment result. async function pollPaymentResult() { const paymentRequestId = new URLSearchParams(window.location.search).get( "paymentRequestId" ); if (!paymentRequestId) return; const poll = async () => { let status = "PROCESSING"; let retries = 0; const maxRetries = 5; while (retries < maxRetries) { try { const statusResult = await inquiryPayment(paymentRequestId); status = statusResult ?? "ERROR"; } catch (error) { status = "ERROR"; } retries += 1; if (status === "SUCCESS" || retries === maxRetries) { return handlePaymentStatus(status); } await new Promise((resolve) => setTimeout(resolve, 2000)); } }; poll(); } // Step 3: Bind handleSubmit function to submit button. document.getElementById("submit").addEventListener("click", handleSubmit); // Step 4: Render payment options & check start polling result. document.addEventListener("DOMContentLoaded", () => { appendPaymentOptions(paymentOptions); pollPaymentResult(); }); // ------- User Interaction Section ------- function appendPaymentOptions(options) { const paymentOptionsContainer = document.getElementById("checkout-box"); paymentOptionsContainer.innerHTML = ""; const frag = document.createDocumentFragment(); options.forEach((option) => { const label = document.createElement("label"); label.className = "payment-option " + option.class; const input = document.createElement("input"); input.type = "radio"; input.className = "radio-input"; input.name = "radio"; input.value = option.value; input.checked = option.value === window.selectedPaymentOptionId; if (input.checked) { label.classList.add("selected"); } input.addEventListener("change", selectPaymentOption); const span = document.createElement("span"); span.className = "radio-button"; const icon = document.createElement("img"); icon.src = option.icon; icon.className = "payment-icon"; const textNode = document.createTextNode(option.label); label.append(input, span, icon, textNode); frag.appendChild(label); }); paymentOptionsContainer.appendChild(frag); } function selectPaymentOption(event) { const targetValue = event.target.value; if (targetValue) { document .querySelectorAll(".payment-option") .forEach((label) => label.classList.remove("selected")); const selectedLabel = event.target.parentElement; selectedLabel.classList.add("selected"); window.selectedPaymentOptionId = targetValue; } } function handlePaymentStatus(status) { switch (status) { case "SUCCESS": showPaymentResult( "Payment Successful", "Thank you for your payment! We will ship out your order as soon as possible.", "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ", "#e5f7f1", "#b7e9d9" ); break; case "FAIL": showPaymentResult( "Payment Failed", "Please return to the merchant order page and resubmit your payment.", "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ", "rgba(255, 91, 77, 0.10)", "rgba(255, 91, 77, 0.20)" ); break; case "ERROR": showPaymentResult( "Error", "An error occurred while checking the payment status. Please try again or contact support.", "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ", "rgba(255, 91, 77, 0.10)", "rgba(255, 91, 77, 0.20)" ); break; default: showPaymentResult( "Payment Processing", "Please return to the merchant order page and resubmit your payment.", "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ", "rgba(255, 159, 26, 0.10)", "rgba(255, 159, 26, 0.20) " ); } } function showPaymentResult(title, message, icon, bgColor, borderColor) { const messageContainer = document.querySelector("#result-container"); if (!messageContainer) return; messageContainer.classList.remove("hidden"); messageContainer.style.backgroundColor = bgColor; messageContainer.style.borderColor = borderColor; document.getElementById("message").innerText = title; document.getElementById("content").innerText = message; document.getElementById("resultIcon").setAttribute("src", icon); setTimeout(() => { messageContainer.classList.add("hidden"); messageContainer.style.backgroundColor = ""; messageContainer.style.borderColor = ""; document.getElementById("message").innerText = ""; document.getElementById("content").innerText = ""; document.getElementById("resultIcon").setAttribute("src", ""); window.location.href = "./index.html"; }, 8000); } function setBtnLoading(isLoading) { const submitElement = document.getElementById("submit"); submitElement.disabled = isLoading; submitElement.classList.toggle("disabled", isLoading); } function showAlert(title, subTitle, type) { const icons = { warning: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ", error: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ", success: "https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ", }; const containerDesktop = document.getElementById("container-desktop"); const mockup = document.getElementById("mockup"); const alertIcon = document.getElementById("alert-icon"); const containerTitle = document.getElementById("container-title"); const containerSubTitle = document.getElementById("container-subTitle"); containerDesktop.style.display = "block"; mockup.style.display = "block"; alertIcon.src = icons[type] || ""; containerTitle.textContent = title || ""; containerSubTitle.textContent = subTitle || ""; alertIcon.style.display = icons[type] ? "block" : "none"; containerTitle.style.display = title ? "block" : "none"; containerSubTitle.style.display = subTitle ? "block" : "none"; } function closeAlert() { document.getElementById("container-desktop").style.display = "none"; document.getElementById("mockup").style.display = "none"; } document.getElementById("alert-ok-btn").addEventListener("click", closeAlert); `] }, `Web-HTML-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.css', when: { client: 'HTML', integration_type: 'API' }, unless: { server: 'Java' }, children: _jsx(AntomFile, { language: `css`, filename: 'client/index.css', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `css`, steps: [``], chunks: [`body { margin: 0; padding: 0; font-family: 'PingFang SC'; display: flex; flex-direction: column; height: 100vh; margin: 0 auto; } .antom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } header { width: 100%; height: 72px; background: #fdfdfd; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header-content { margin: 0 auto; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-start; } .header-content-img { width: 120px; } .header-content .subtitle { margin-left: 28px; color: #bcbcbc; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .content { display: flex; flex-direction: column; position: relative; overflow: hidden; margin-top: 82px; width: 1280px; height: 800px; flex-shrink: 0; border-radius: 40px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .headerContent { display: flex; align-items: center; justify-content: flex-start; } .headerContent .logo { margin: 0 10px; } .headerContent .testDemo { width: 62px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.4); font-size: 8px; font-weight: 400; } .checkout-container { margin: 0 auto; width: 100%; display: flex; flex-grow: 1; } .container-left { flex: 1; background-color: #f0f6ff; display: flex; justify-content: flex-end; } .leftContent { width: 620px; padding: 100px 56px 232px 64px; box-sizing: border-box; } .leftContent .order { margin-top: 32px; padding-left: 36px; } .orderTotal .totals { color: #7c8ca3; font-size: 14px; font-weight: 400; line-height: 20px; } .orderTotal .money { color: #2a3a52; font-size: 24px; font-weight: 500; line-height: 36px; } .container-left .order-title { margin-top: 32px; color: #2a3a52; font-size: 18px; font-style: normal; font-weight: 500; line-height: 28px; } .container-left .product-details { display: flex; text-align: center; margin-top: 24px; } .product-details .details-left { width: 80px; height: 80px; padding: 12px; box-sizing: border-box; } .product-details .details-left img { width: 100%; height: 100%; vertical-align: middle; } .product-details .details-right { margin-left: 16px; flex: 1; } .product-details .details-right p { margin: 0; text-align: left; color: #2a3a52; font-size: 14px; font-weight: 400; line-height: 20px; } .product-details .details-right .details-shop-content { display: flex; flex-direction: row; justify-content: space-between; } .product-details .details-right .details-shop-content-text { color: #2a3a52; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; width: 218px; } .details-right-shop-message { color: #abb9cc !important; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin: 4px 0 !important; display: flex; align-items: center; } .line { margin: 0 8px; width: 1px; height: 12px; background-color: rgba(0, 0, 0, 0.04); } .total { border-top: 1px solid rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; margin-left: 130px; color: #2a3a52; font-size: 14px; font-weight: 500; line-height: 20px; } .total .money { font-size: 20px; font-weight: 500; line-height: 32px; } .details-right-shop-qty { color: #2a3a52; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin-top: 4px; } .container-right { flex: 1; } .container-right .rightContent { width: 660px; height: 100%; padding: 162px 64px 76px 56px; box-sizing: border-box; } .rightContent p { display: inline-flex; align-items: center; gap: 10px; color: #2a3a52; } .payment-option { border: 2px solid #000; padding: 10px; margin-bottom: 20px; display: none; cursor: pointer; } .payment-option.selected { border-color: #1650ff; } .show { display: block; } .submit { width: 100%; height: 56px; border-radius: 12px; background: #1650ff; color: #fff; border: none; text-decoration: none; cursor: pointer; font-size: 16px; display: block; margin-top: 32px; } .radio-group { display: flex; flex-direction: column; } .radio-group label { display: flex; align-items: center; margin-bottom: 8px; padding: 8px 16px; border: 1px solid #ebebeb; background: #fff; border-radius: 12px; color: #2a3a52; font-size: 16px; font-weight: 400; line-height: 24px; } .radio-group label.show { display: flex; } .radio-input { display: none; } .radio-button { width: 14px; height: 14px; border: 1px solid #abb9cc; margin-right: 8px; border-radius: 50%; } .radio-input:checked + .radio-button { border: 4px solid #1650ff; width: 8px; height: 8px; } .payment-icon { vertical-align: middle; display: flex; width: 32px; height: 32px; margin: 0 12px; padding: 4px 4.001px 3.996px 3.999px; justify-content: center; align-items: center; border-radius: 8px; border: 0.5px solid #f5f5f5; background: #fcfcfc; } .disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; } /* Result */ .hidden { display: none; } #result-container { display: flex; flex-direction: column; margin-top: 14px; align-items: flex-start; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0); padding: 12px 16px; color: #2a3a52; font-size: 13px; font-weight: 500; line-height: 20px; } .result-title { display: flex; align-items: center; } .result-title img { width: 20px; margin-right: 12px; } #content { color: #7c8ca3; text-align: center; font-size: 12px; font-weight: 400; line-height: 18px; margin-top: 8px; padding-left: 32px; } /* The Modal (background) */ .mockup { display: none; z-index: 1000; width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.6); } /* Modal Content/Box */ .container-desktop { display: none; width: 370px; height: 248px; position: fixed; top: 50%; left: 50%; z-index: 1001; border-radius: 12px; overflow: hidden; transform-origin: 50% 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); padding: 40px 0px 24px 0px; background-color: #fff; } @keyframes container-zoom-in { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .desktop-animation { animation: container-zoom-in 0.3s ease-in-out; animation-fill-mode: forwards; } .container-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .container-content img { width: 64px; height: 64px; } .container-title { color: var(--Content-Primary, #2a3a52); text-align: center; font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .container-subTitle { color: #7c8ca3; text-align: center; font-size: 14px; font-weight: 400; line-height: 20px; margin-top: 24px; } .container-btn { display: flex; width: 338px; height: 48px; padding: 0px 24px; justify-content: center; align-items: center; border-radius: var(---Button, 12px); background: var(--Action-Normal, #1650ff); border: none; cursor: pointer; color: var(--Content-Quaternary, #fff); font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .footer { display: flex; justify-content: center; margin-top: 20px; color: #bcbcbc; font-size: 16px; font-weight: 500; line-height: 24px; } .gotoTest { color: #1650ff; margin: 0 4px; text-decoration: none; } `] }, `Web-HTML-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.html', when: { client: 'HTML', server: 'Java', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `html`, filename: 'src/main/resources/static/index.html', downloadOnly: false, steps: [`build-the-checkout-page`], children: _jsx(AntomChunk, { language: `html`, steps: [`build-the-checkout-page`], chunks: [` Antom Demo Checkout

Checkout Demo

Test Demo

Total to pay

JPY 6000

Order summary

Classic Black Cotton T-shirt, extra-soft feel.

JPY 3000

Black L size

Qty 1

Classic Woman Bag

JPY 3000

Black

Qty 1

Total

JPY 6000

choose your payment method

`] }, `Web-HTML-SDK-code1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', server: 'Java', integration_type: 'SDK' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'src/main/resources/static/index.js', downloadOnly: false, steps: [`initialize-instantiate-the-sdk`, `get-a-payment-session`, `invoke-the-sdk`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`/** * The integration method of the Antom SDK. */ window.selectedPaymentOptionId = 'PAYPAY'; window.amount = { currency: 'JPY', value: '6000', mul: 1 }; const paymentOptions = [ { label: 'PayPay', value: 'PAYPAY', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*mfRjRoV-rL4AAAAAAAAAAAAAAQAAAQ', }, { label: 'Konbini', value: 'KONBINI', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*MfnBTYHOr5cAAAAAAAAAAAAAAQAAAQ', }, { label: 'Pay-easy', value: 'BANKTRANSFER_PAYEASY', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*VhfgTLFuYOgAAAAAAAAAAAAAAQAAAQ', }, ]; // Step 1: Create an SDK instance.`] }, `Web-HTML-SDK-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`initialize-instantiate-the-sdk`], chunks: [`const checkoutApp = new window.AMSCashierPayment({ environment: 'sandbox', locale: 'en_US', onEventCallback, }); `] }, `Web-HTML-SDK-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 2: create onEventCallback Handler`] }, `Web-HTML-SDK-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-payment-result`], chunks: [`function onEventCallback({ code, result }) { switch (code) { // Event codes provided by the SDK case 'SDK_PAYMENT_SUCCESSFUL': console.log('Payment was successful.'); break; case 'SDK_PAYMENT_PROCESSING': console.log( 'Payment was being processed. Confirm the payment result with server.' ); pollPaymentResult(); break; case 'SDK_PAYMENT_FAIL': console.log( 'Payment failed. Check the value of result.paymentResultCode in the onEventCallback result data for details. Guide buyers to retry the payment based on the provided information.' ); break; case 'SDK_PAYMENT_CANCEL': console.log( 'Guide buyers to retry the payment. You can reuse the paymentSessionData within its validity period to recall the SDK. If it has expired, you need to request new paymentSessionData.' ); break; case 'SDK_PAYMENT_ERROR': console.log( 'The payment status was abnormal. Confirm the payment result with server.' ); pollPaymentResult(); break; default: console.log(code); } }; `] }, `Web-HTML-SDK-code4`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 3: Create the Checkout payment rendering component.`] }, `Web-HTML-SDK-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`invoke-the-sdk`], chunks: [`async function createPopupCheckout(paymentSessionData) { try { await checkoutApp.createComponent({ sessionData: paymentSessionData, notRedirectAfterComplete: false, }); } catch (error) { showAlert(error.code, error.message || "Invalid response format", "error"); } } `] }, `Web-HTML-SDK-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 4: Get payment session data from the endpoint. async function handleSubmit() { try { const paymentResponse = await getPaymentSessionData(); if ( paymentResponse && paymentResponse?.data?.result?.resultStatus === 'S' && paymentResponse?.data?.paymentSessionData !== null ) { await createPopupCheckout(paymentResponse.data.paymentSessionData); } else if (paymentResponse?.paymentRequestId) { console.error(paymentResponse); } } catch (error) { showAlert('Error', error.message || 'Failed to process payment', 'error'); } } // Step 5: Call createPaymentSession endpoint.`] }, `Web-HTML-SDK-other4`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-a-payment-session`], chunks: [`async function getPaymentSessionData() { setBtnLoading(true); if (!window.selectedPaymentOptionId) { showAlert('Warning', 'Please select a payment method!', 'warning'); setBtnLoading(false); return null; } // Define the URL for your backend endpoint const url = 'http://localhost:8080/payment/createSession'; try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ // in practice, amount should be calculated on your server side amountValue: window.amount.value, currency: window.amount.currency, paymentMethodType: window.selectedPaymentOptionId, }), }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } const res = await response.json(); if (res.status === 'success') return res; throw new Error(res.message || 'Invalid response format'); } catch (error) { showAlert( 'Error', error.message || 'Failed to fetch payment session data', 'error' ); return null; } finally { setBtnLoading(false); } } `] }, `Web-HTML-SDK-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 6: Call inquiryPayment to get the payment status. async function inquiryPayment(paymentRequestId) { // Define the URL for your backend endpoint const baseUrl = 'http://localhost:8080/payment/inquiryPayment'; const config = { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ paymentRequestId }), }; const response = await fetch(baseUrl, config); if (!response.ok) throw new Error('Network response was not ok'); const res = await response.json(); return res.status === 'success' ? res.data.paymentStatus : 'ERROR'; } // Step 7: Create Polling mechanism to retrieve the payment result. async function pollPaymentResult() { const paymentRequestId = new URLSearchParams(window.location.search).get( 'paymentRequestId' ); if (!paymentRequestId) return; const poll = async () => { let status = "PROCESSING"; let retries = 0; const maxRetries = 5; while (retries < maxRetries) { try { const statusResult = await inquiryPayment(paymentRequestId); status = statusResult ?? "ERROR"; } catch (error) { status = "ERROR"; } retries += 1; if (status === "SUCCESS" || retries === maxRetries) { return handlePaymentStatus(status); } await new Promise((resolve) => setTimeout(resolve, 2000)); } }; poll(); } // Step 8: Bind handleSubmit function to submit button. document.getElementById('submit').addEventListener('click', handleSubmit); // Step 9: Render payment options & check run polling result. document.addEventListener('DOMContentLoaded', () => { appendPaymentOptions(paymentOptions); }); // ------- User Interaction Section ------- function appendPaymentOptions(options) { const paymentOptionsContainer = document.getElementById('checkout-box'); paymentOptionsContainer.innerHTML = ''; const frag = document.createDocumentFragment(); options.forEach(option => { const label = document.createElement('label'); label.className = 'payment-option'; const input = document.createElement('input'); input.type = 'radio'; input.className = 'radio-input'; input.name = 'radio'; input.value = option.value; input.checked = option.value === window.selectedPaymentOptionId; if (input.checked) { label.classList.add('selected'); } input.addEventListener('change', selectPaymentOption); const span = document.createElement('span'); span.className = 'radio-button'; const icon = document.createElement('img'); icon.src = option.icon; icon.className = 'payment-icon'; const textNode = document.createTextNode(option.label); label.append(input, span, icon, textNode); frag.appendChild(label); }); paymentOptionsContainer.appendChild(frag); } function selectPaymentOption(event) { const targetValue = event.target.value; if (targetValue) { document .querySelectorAll('.payment-option') .forEach(label => label.classList.remove('selected')); const selectedLabel = event.target.parentElement; selectedLabel.classList.add('selected'); window.selectedPaymentOptionId = targetValue; } } function handlePaymentStatus(status) { switch (status) { case 'SUCCESS': showPaymentResult( 'Payment Successful', 'Thank you for your payment! We will ship out your order as soon as possible.', 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ', '#e5f7f1', '#b7e9d9' ); break; case 'FAIL': showPaymentResult( 'Payment Failed', 'Please return to the merchant order page and resubmit your payment.', 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', 'rgba(255, 91, 77, 0.10)', 'rgba(255, 91, 77, 0.20)' ); break; case 'ERROR': showPaymentResult( 'Error', 'An error occurred while checking the payment status. Please try again or contact support.', 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', 'rgba(255, 91, 77, 0.10)', 'rgba(255, 91, 77, 0.20)' ); break; default: showPaymentResult( 'Payment Processing', 'Please return to the merchant order page and resubmit your payment.', 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ', 'rgba(255, 159, 26, 0.10)', 'rgba(255, 159, 26, 0.20) ' ); } } function setBtnLoading(isLoading) { const submitElement = document.getElementById('submit'); submitElement.disabled = isLoading; submitElement.classList.toggle('disabled', isLoading); } function showPaymentResult(title, message, icon, bgColor, borderColor) { const messageContainer = document.querySelector('#result-container'); if (!messageContainer) return; messageContainer.classList.remove('hidden'); messageContainer.style.backgroundColor = bgColor; messageContainer.style.borderColor = borderColor; document.getElementById('message').innerText = title; document.getElementById('content').innerText = message; document.getElementById('resultIcon').setAttribute('src', icon); setTimeout(() => { messageContainer.classList.add('hidden'); messageContainer.style.backgroundColor = ''; messageContainer.style.borderColor = ''; document.getElementById('message').innerText = ''; document.getElementById('content').innerText = ''; document.getElementById('resultIcon').setAttribute('src', ''); window.location.href = './index.html'; }, 8000); } function showAlert(title, subTitle, type) { const icons = { warning: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ', error: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', success: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ', }; const containerDesktop = document.getElementById('container-desktop'); const mockup = document.getElementById('mockup'); const alertIcon = document.getElementById('alert-icon'); const containerTitle = document.getElementById('container-title'); const containerSubTitle = document.getElementById('container-subTitle'); containerDesktop.style.display = 'block'; mockup.style.display = 'block'; alertIcon.src = icons[type] || ''; containerTitle.textContent = title || ''; containerSubTitle.textContent = subTitle || ''; alertIcon.style.display = icons[type] ? 'block' : 'none'; containerTitle.style.display = title ? 'block' : 'none'; containerSubTitle.style.display = subTitle ? 'block' : 'none'; } function closeAlert() { document.getElementById('container-desktop').style.display = 'none'; document.getElementById('mockup').style.display = 'none'; } document.getElementById('alert-ok-btn').addEventListener('click', closeAlert); `] }, `Web-HTML-SDK-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.css', when: { client: 'HTML', server: 'Java', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `css`, filename: 'src/main/resources/static/index.css', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `css`, steps: [``], chunks: [`body { margin: 0; padding: 0; font-family: 'PingFang SC'; display: flex; flex-direction: column; height: 100vh; margin: 0 auto; } .antom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } header { width: 100%; height: 72px; background: #fdfdfd; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header-content { margin: 0 auto; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-start; } .header-content-img { width: 120px; } .header-content .subtitle { margin-left: 28px; color: #bcbcbc; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .content { display: flex; flex-direction: column; position: relative; overflow: hidden; margin-top: 82px; width: 1280px; height: 800px; flex-shrink: 0; border-radius: 40px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .headerContent { display: flex; align-items: center; justify-content: flex-start; } .headerContent .logo { margin: 0 10px; } .headerContent .testDemo { width: 62px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.4); font-size: 8px; font-weight: 400; } .checkout-container { margin: 0 auto; width: 100%; display: flex; flex-grow: 1; } .container-left { flex: 1; background-color: #f0f6ff; display: flex; justify-content: flex-end; } .leftContent { width: 620px; padding: 100px 56px 232px 64px; box-sizing: border-box; } .leftContent .order { margin-top: 32px; padding-left: 36px; } .orderTotal .totals { color: #7c8ca3; font-size: 14px; font-weight: 400; line-height: 20px; } .orderTotal .money { color: #2a3a52; font-size: 24px; font-weight: 500; line-height: 36px; } .container-left .order-title { margin-top: 32px; color: #2a3a52; font-size: 18px; font-style: normal; font-weight: 500; line-height: 28px; } .container-left .product-details { display: flex; text-align: center; margin-top: 24px; } .product-details .details-left { width: 80px; height: 80px; padding: 12px; box-sizing: border-box; } .product-details .details-left img { width: 100%; height: 100%; vertical-align: middle; } .product-details .details-right { margin-left: 16px; flex: 1; } .product-details .details-right p { margin: 0; text-align: left; color: #2a3a52; font-size: 14px; font-weight: 400; line-height: 20px; } .product-details .details-right .details-shop-content { display: flex; flex-direction: row; justify-content: space-between; } .product-details .details-right .details-shop-content-text { color: #2a3a52; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; width: 218px; } .details-right-shop-message { color: #abb9cc !important; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin: 4px 0 !important; display: flex; align-items: center; } .line { margin: 0 8px; width: 1px; height: 12px; background-color: rgba(0, 0, 0, 0.04); } .total { border-top: 1px solid rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; margin-left: 130px; color: #2a3a52; font-size: 14px; font-weight: 500; line-height: 20px; } .total .money { font-size: 20px; font-weight: 500; line-height: 32px; } .details-right-shop-qty { color: #2a3a52; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin-top: 4px; } .container-right { flex: 1; } .container-right .rightContent { width: 660px; height: 100%; padding: 162px 64px 76px 56px; box-sizing: border-box; } .rightContent p { display: inline-flex; align-items: center; gap: 10px; color: #2a3a52; } .payment-option { border: 2px solid #000; padding: 10px; margin-bottom: 20px; display: none; cursor: pointer; } .payment-option.selected { border-color: #1650ff; } .show { display: block; } .submit { width: 100%; height: 56px; border-radius: 12px; background: #1650ff; color: #fff; border: none; text-decoration: none; cursor: pointer; font-size: 16px; display: block; margin-top: 32px; } .radio-group { display: flex; flex-direction: column; } .radio-group label { display: flex; align-items: center; margin-bottom: 8px; padding: 8px 16px; border: 1px solid #ebebeb; background: #fff; border-radius: 12px; color: #2a3a52; font-size: 16px; font-weight: 400; line-height: 24px; } .radio-group label.show { display: flex; } .radio-input { display: none; } .radio-button { width: 14px; height: 14px; border: 1px solid #abb9cc; margin-right: 8px; border-radius: 50%; } .radio-input:checked + .radio-button { border: 4px solid #1650ff; width: 8px; height: 8px; } .payment-icon { vertical-align: middle; display: flex; width: 32px; height: 32px; margin: 0 12px; padding: 4px 4.001px 3.996px 3.999px; justify-content: center; align-items: center; border-radius: 8px; border: 0.5px solid #f5f5f5; background: #fcfcfc; } .disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; } /* Result */ .hidden { display: none; } #result-container { display: flex; flex-direction: column; margin-top: 14px; align-items: flex-start; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0); padding: 12px 16px; color: #2a3a52; font-size: 13px; font-weight: 500; line-height: 20px; } .result-title { display: flex; align-items: center; } .result-title img { width: 20px; margin-right: 12px; } #content { color: #7c8ca3; text-align: center; font-size: 12px; font-weight: 400; line-height: 18px; margin-top: 8px; padding-left: 32px; } /* The Modal (background) */ .mockup { display: none; z-index: 1000; width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.6); } /* Modal Content/Box */ .container-desktop { display: none; width: 370px; height: 248px; position: fixed; top: 50%; left: 50%; z-index: 1001; border-radius: 12px; overflow: hidden; transform-origin: 50% 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); padding: 40px 0px 24px 0px; background-color: #fff; } @keyframes container-zoom-in { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .desktop-animation { animation: container-zoom-in 0.3s ease-in-out; animation-fill-mode: forwards; } .container-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .container-content img { width: 64px; height: 64px; } .container-title { color: var(--Content-Primary, #2a3a52); text-align: center; font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .container-subTitle { color: #7c8ca3; text-align: center; font-size: 14px; font-weight: 400; line-height: 20px; margin-top: 24px; } .container-btn { display: flex; width: 338px; height: 48px; padding: 0px 24px; justify-content: center; align-items: center; border-radius: var(---Button, 12px); background: var(--Action-Normal, #1650ff); border: none; cursor: pointer; color: var(--Content-Quaternary, #fff); font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .footer { display: flex; justify-content: center; margin-top: 20px; color: #bcbcbc; font-size: 16px; font-weight: 500; line-height: 24px; } .gotoTest { color: #1650ff; margin: 0 4px; text-decoration: none; } `] }, `Web-HTML-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.html', when: { client: 'HTML', integration_type: 'SDK' }, unless: { server: 'Java' }, children: _jsx(AntomFile, { language: `html`, filename: 'client/index.html', downloadOnly: false, steps: [`build-the-checkout-page`], children: _jsx(AntomChunk, { language: `html`, steps: [`build-the-checkout-page`], chunks: [` Antom Demo Checkout

Checkout Demo

Test Demo

Total to pay

JPY 6000

Order summary

Classic Black Cotton T-shirt, extra-soft feel.

JPY 3000

Black L size

Qty 1

Classic Woman Bag

JPY 3000

Black

Qty 1

Total

JPY 6000

choose your payment method

`] }, `Web-HTML-SDK-code1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', integration_type: 'SDK' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/index.js', downloadOnly: false, steps: [`initialize-instantiate-the-sdk`, `get-a-payment-session`, `invoke-the-sdk`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`/** * The integration method of the Antom SDK. */ window.selectedPaymentOptionId = 'PAYPAY'; window.amount = { currency: 'JPY', value: '6000', mul: 1 }; const paymentOptions = [ { label: 'PayPay', value: 'PAYPAY', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*mfRjRoV-rL4AAAAAAAAAAAAAAQAAAQ', }, { label: 'Konbini', value: 'KONBINI', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*MfnBTYHOr5cAAAAAAAAAAAAAAQAAAQ', }, { label: 'Pay-easy', value: 'BANKTRANSFER_PAYEASY', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*VhfgTLFuYOgAAAAAAAAAAAAAAQAAAQ', }, ]; // Step 1: Create an SDK instance.`] }, `Web-HTML-SDK-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`initialize-instantiate-the-sdk`], chunks: [`const checkoutApp = new window.AMSCashierPayment({ environment: 'sandbox', locale: 'en_US', onEventCallback, }); `] }, `Web-HTML-SDK-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 2: create onEventCallback Handler`] }, `Web-HTML-SDK-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-payment-result`], chunks: [`function onEventCallback({ code, result }) { switch (code) { // Event codes provided by the SDK case 'SDK_PAYMENT_SUCCESSFUL': console.log('Payment was successful.'); break; case 'SDK_PAYMENT_PROCESSING': console.log( 'Payment was being processed. Confirm the payment result with server.' ); pollPaymentResult(); break; case 'SDK_PAYMENT_FAIL': console.log( 'Payment failed. Check the value of result.paymentResultCode in the onEventCallback result data for details. Guide buyers to retry the payment based on the provided information.' ); break; case 'SDK_PAYMENT_CANCEL': console.log( 'Guide buyers to retry the payment. You can reuse the paymentSessionData within its validity period to recall the SDK. If it has expired, you need to request new paymentSessionData.' ); break; case 'SDK_PAYMENT_ERROR': console.log( 'The payment status was abnormal. Confirm the payment result with server.' ); pollPaymentResult(); break; default: console.log(code); } }; `] }, `Web-HTML-SDK-code4`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 3: Create the Checkout payment rendering component.`] }, `Web-HTML-SDK-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`invoke-the-sdk`], chunks: [`async function createPopupCheckout(paymentSessionData) { try { await checkoutApp.createComponent({ sessionData: paymentSessionData, notRedirectAfterComplete: false, }); } catch (error) { showAlert(error.code, error.message || "Invalid response format", "error"); } } `] }, `Web-HTML-SDK-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 4: Get payment session data from the endpoint. async function handleSubmit() { try { const paymentResponse = await getPaymentSessionData(); if ( paymentResponse && paymentResponse?.data?.result?.resultStatus === 'S' && paymentResponse?.data?.paymentSessionData !== null ) { await createPopupCheckout(paymentResponse.data.paymentSessionData); } else if (paymentResponse?.paymentRequestId) { console.error(paymentResponse); } } catch (error) { showAlert('Error', error.message || 'Failed to process payment', 'error'); } } // Step 5: Call createPaymentSession endpoint.`] }, `Web-HTML-SDK-other4`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-a-payment-session`], chunks: [`async function getPaymentSessionData() { setBtnLoading(true); if (!window.selectedPaymentOptionId) { showAlert('Warning', 'Please select a payment method!', 'warning'); setBtnLoading(false); return null; } // Define the URL for your backend endpoint const url = 'http://localhost:8080/payment/createSession'; try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ // in practice, amount should be calculated on your server side amountValue: window.amount.value, currency: window.amount.currency, paymentMethodType: window.selectedPaymentOptionId, }), }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } const res = await response.json(); if (res.status === 'success') return res; throw new Error(res.message || 'Invalid response format'); } catch (error) { showAlert( 'Error', error.message || 'Failed to fetch payment session data', 'error' ); return null; } finally { setBtnLoading(false); } } `] }, `Web-HTML-SDK-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 6: Call inquiryPayment to get the payment status. async function inquiryPayment(paymentRequestId) { // Define the URL for your backend endpoint const baseUrl = 'http://localhost:8080/payment/inquiryPayment'; const config = { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ paymentRequestId }), }; const response = await fetch(baseUrl, config); if (!response.ok) throw new Error('Network response was not ok'); const res = await response.json(); return res.status === 'success' ? res.data.paymentStatus : 'ERROR'; } // Step 7: Create Polling mechanism to retrieve the payment result. async function pollPaymentResult() { const paymentRequestId = new URLSearchParams(window.location.search).get( 'paymentRequestId' ); if (!paymentRequestId) return; const poll = async () => { let status = "PROCESSING"; let retries = 0; const maxRetries = 5; while (retries < maxRetries) { try { const statusResult = await inquiryPayment(paymentRequestId); status = statusResult ?? "ERROR"; } catch (error) { status = "ERROR"; } retries += 1; if (status === "SUCCESS" || retries === maxRetries) { return handlePaymentStatus(status); } await new Promise((resolve) => setTimeout(resolve, 2000)); } }; poll(); } // Step 8: Bind handleSubmit function to submit button. document.getElementById('submit').addEventListener('click', handleSubmit); // Step 9: Render payment options & check run polling result. document.addEventListener('DOMContentLoaded', () => { appendPaymentOptions(paymentOptions); }); // ------- User Interaction Section ------- function appendPaymentOptions(options) { const paymentOptionsContainer = document.getElementById('checkout-box'); paymentOptionsContainer.innerHTML = ''; const frag = document.createDocumentFragment(); options.forEach(option => { const label = document.createElement('label'); label.className = 'payment-option'; const input = document.createElement('input'); input.type = 'radio'; input.className = 'radio-input'; input.name = 'radio'; input.value = option.value; input.checked = option.value === window.selectedPaymentOptionId; if (input.checked) { label.classList.add('selected'); } input.addEventListener('change', selectPaymentOption); const span = document.createElement('span'); span.className = 'radio-button'; const icon = document.createElement('img'); icon.src = option.icon; icon.className = 'payment-icon'; const textNode = document.createTextNode(option.label); label.append(input, span, icon, textNode); frag.appendChild(label); }); paymentOptionsContainer.appendChild(frag); } function selectPaymentOption(event) { const targetValue = event.target.value; if (targetValue) { document .querySelectorAll('.payment-option') .forEach(label => label.classList.remove('selected')); const selectedLabel = event.target.parentElement; selectedLabel.classList.add('selected'); window.selectedPaymentOptionId = targetValue; } } function handlePaymentStatus(status) { switch (status) { case 'SUCCESS': showPaymentResult( 'Payment Successful', 'Thank you for your payment! We will ship out your order as soon as possible.', 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ', '#e5f7f1', '#b7e9d9' ); break; case 'FAIL': showPaymentResult( 'Payment Failed', 'Please return to the merchant order page and resubmit your payment.', 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', 'rgba(255, 91, 77, 0.10)', 'rgba(255, 91, 77, 0.20)' ); break; case 'ERROR': showPaymentResult( 'Error', 'An error occurred while checking the payment status. Please try again or contact support.', 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', 'rgba(255, 91, 77, 0.10)', 'rgba(255, 91, 77, 0.20)' ); break; default: showPaymentResult( 'Payment Processing', 'Please return to the merchant order page and resubmit your payment.', 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ', 'rgba(255, 159, 26, 0.10)', 'rgba(255, 159, 26, 0.20) ' ); } } function setBtnLoading(isLoading) { const submitElement = document.getElementById('submit'); submitElement.disabled = isLoading; submitElement.classList.toggle('disabled', isLoading); } function showPaymentResult(title, message, icon, bgColor, borderColor) { const messageContainer = document.querySelector('#result-container'); if (!messageContainer) return; messageContainer.classList.remove('hidden'); messageContainer.style.backgroundColor = bgColor; messageContainer.style.borderColor = borderColor; document.getElementById('message').innerText = title; document.getElementById('content').innerText = message; document.getElementById('resultIcon').setAttribute('src', icon); setTimeout(() => { messageContainer.classList.add('hidden'); messageContainer.style.backgroundColor = ''; messageContainer.style.borderColor = ''; document.getElementById('message').innerText = ''; document.getElementById('content').innerText = ''; document.getElementById('resultIcon').setAttribute('src', ''); window.location.href = './index.html'; }, 8000); } function showAlert(title, subTitle, type) { const icons = { warning: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ', error: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', success: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ', }; const containerDesktop = document.getElementById('container-desktop'); const mockup = document.getElementById('mockup'); const alertIcon = document.getElementById('alert-icon'); const containerTitle = document.getElementById('container-title'); const containerSubTitle = document.getElementById('container-subTitle'); containerDesktop.style.display = 'block'; mockup.style.display = 'block'; alertIcon.src = icons[type] || ''; containerTitle.textContent = title || ''; containerSubTitle.textContent = subTitle || ''; alertIcon.style.display = icons[type] ? 'block' : 'none'; containerTitle.style.display = title ? 'block' : 'none'; containerSubTitle.style.display = subTitle ? 'block' : 'none'; } function closeAlert() { document.getElementById('container-desktop').style.display = 'none'; document.getElementById('mockup').style.display = 'none'; } document.getElementById('alert-ok-btn').addEventListener('click', closeAlert); `] }, `Web-HTML-SDK-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.css', when: { client: 'HTML', integration_type: 'SDK' }, unless: { server: 'Java' }, children: _jsx(AntomFile, { language: `css`, filename: 'client/index.css', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `css`, steps: [``], chunks: [`body { margin: 0; padding: 0; font-family: 'PingFang SC'; display: flex; flex-direction: column; height: 100vh; margin: 0 auto; } .antom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } header { width: 100%; height: 72px; background: #fdfdfd; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header-content { margin: 0 auto; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-start; } .header-content-img { width: 120px; } .header-content .subtitle { margin-left: 28px; color: #bcbcbc; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .content { display: flex; flex-direction: column; position: relative; overflow: hidden; margin-top: 82px; width: 1280px; height: 800px; flex-shrink: 0; border-radius: 40px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .headerContent { display: flex; align-items: center; justify-content: flex-start; } .headerContent .logo { margin: 0 10px; } .headerContent .testDemo { width: 62px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.4); font-size: 8px; font-weight: 400; } .checkout-container { margin: 0 auto; width: 100%; display: flex; flex-grow: 1; } .container-left { flex: 1; background-color: #f0f6ff; display: flex; justify-content: flex-end; } .leftContent { width: 620px; padding: 100px 56px 232px 64px; box-sizing: border-box; } .leftContent .order { margin-top: 32px; padding-left: 36px; } .orderTotal .totals { color: #7c8ca3; font-size: 14px; font-weight: 400; line-height: 20px; } .orderTotal .money { color: #2a3a52; font-size: 24px; font-weight: 500; line-height: 36px; } .container-left .order-title { margin-top: 32px; color: #2a3a52; font-size: 18px; font-style: normal; font-weight: 500; line-height: 28px; } .container-left .product-details { display: flex; text-align: center; margin-top: 24px; } .product-details .details-left { width: 80px; height: 80px; padding: 12px; box-sizing: border-box; } .product-details .details-left img { width: 100%; height: 100%; vertical-align: middle; } .product-details .details-right { margin-left: 16px; flex: 1; } .product-details .details-right p { margin: 0; text-align: left; color: #2a3a52; font-size: 14px; font-weight: 400; line-height: 20px; } .product-details .details-right .details-shop-content { display: flex; flex-direction: row; justify-content: space-between; } .product-details .details-right .details-shop-content-text { color: #2a3a52; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; width: 218px; } .details-right-shop-message { color: #abb9cc !important; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin: 4px 0 !important; display: flex; align-items: center; } .line { margin: 0 8px; width: 1px; height: 12px; background-color: rgba(0, 0, 0, 0.04); } .total { border-top: 1px solid rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; margin-left: 130px; color: #2a3a52; font-size: 14px; font-weight: 500; line-height: 20px; } .total .money { font-size: 20px; font-weight: 500; line-height: 32px; } .details-right-shop-qty { color: #2a3a52; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin-top: 4px; } .container-right { flex: 1; } .container-right .rightContent { width: 660px; height: 100%; padding: 162px 64px 76px 56px; box-sizing: border-box; } .rightContent p { display: inline-flex; align-items: center; gap: 10px; color: #2a3a52; } .payment-option { border: 2px solid #000; padding: 10px; margin-bottom: 20px; display: none; cursor: pointer; } .payment-option.selected { border-color: #1650ff; } .show { display: block; } .submit { width: 100%; height: 56px; border-radius: 12px; background: #1650ff; color: #fff; border: none; text-decoration: none; cursor: pointer; font-size: 16px; display: block; margin-top: 32px; } .radio-group { display: flex; flex-direction: column; } .radio-group label { display: flex; align-items: center; margin-bottom: 8px; padding: 8px 16px; border: 1px solid #ebebeb; background: #fff; border-radius: 12px; color: #2a3a52; font-size: 16px; font-weight: 400; line-height: 24px; } .radio-group label.show { display: flex; } .radio-input { display: none; } .radio-button { width: 14px; height: 14px; border: 1px solid #abb9cc; margin-right: 8px; border-radius: 50%; } .radio-input:checked + .radio-button { border: 4px solid #1650ff; width: 8px; height: 8px; } .payment-icon { vertical-align: middle; display: flex; width: 32px; height: 32px; margin: 0 12px; padding: 4px 4.001px 3.996px 3.999px; justify-content: center; align-items: center; border-radius: 8px; border: 0.5px solid #f5f5f5; background: #fcfcfc; } .disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; } /* Result */ .hidden { display: none; } #result-container { display: flex; flex-direction: column; margin-top: 14px; align-items: flex-start; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0); padding: 12px 16px; color: #2a3a52; font-size: 13px; font-weight: 500; line-height: 20px; } .result-title { display: flex; align-items: center; } .result-title img { width: 20px; margin-right: 12px; } #content { color: #7c8ca3; text-align: center; font-size: 12px; font-weight: 400; line-height: 18px; margin-top: 8px; padding-left: 32px; } /* The Modal (background) */ .mockup { display: none; z-index: 1000; width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.6); } /* Modal Content/Box */ .container-desktop { display: none; width: 370px; height: 248px; position: fixed; top: 50%; left: 50%; z-index: 1001; border-radius: 12px; overflow: hidden; transform-origin: 50% 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); padding: 40px 0px 24px 0px; background-color: #fff; } @keyframes container-zoom-in { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .desktop-animation { animation: container-zoom-in 0.3s ease-in-out; animation-fill-mode: forwards; } .container-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .container-content img { width: 64px; height: 64px; } .container-title { color: var(--Content-Primary, #2a3a52); text-align: center; font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .container-subTitle { color: #7c8ca3; text-align: center; font-size: 14px; font-weight: 400; line-height: 20px; margin-top: 24px; } .container-btn { display: flex; width: 338px; height: 48px; padding: 0px 24px; justify-content: center; align-items: center; border-radius: var(---Button, 12px); background: var(--Action-Normal, #1650ff); border: none; cursor: pointer; color: var(--Content-Quaternary, #fff); font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .footer { display: flex; justify-content: center; margin-top: 20px; color: #bcbcbc; font-size: 16px; font-weight: 500; line-height: 24px; } .gotoTest { color: #1650ff; margin: 0 4px; text-decoration: none; } `] }, `Web-HTML-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.html', when: { client: 'HTML', server: 'Java', integration_type: 'Embedded CKP' }, children: _jsxs(AntomFile, { language: `html`, filename: 'src/main/resources/static/index.html', downloadOnly: false, steps: [`build-the-checkout-page`], children: [_jsx(AntomChunk, { language: `html`, steps: [``], chunks: [` Antom Demo Checkout

Checkout Demo

`] }, `Web-HTML-CKP_EMBEDDED-other1`), _jsx(AntomChunk, { language: `html`, steps: [`build-the-checkout-page`], chunks: [`

`] }, `Web-HTML-CKP_EMBEDDED-code1`), _jsx(AntomChunk, { language: `html`, steps: [``], chunks: [`

`] }, `Web-HTML-CKP_EMBEDDED-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', server: 'Java', integration_type: 'Embedded CKP' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'src/main/resources/static/index.js', downloadOnly: false, steps: [`initialize-instantiate-the-sdk`, `get-a-payment-session`, `invoke-the-sdk`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`/** * The integration method of the Antom CKP. */ window.amount = { currency: 'USD', value: '6000' }; `] }, `Web-HTML-CKP_EMBEDDED-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`initialize-instantiate-the-sdk`], chunks: [`// Step 1: Create an SDK instance. const checkoutApp = new AMSCheckoutPage({ environment: 'sandbox', locale: 'en_US', onEventCallback, }); `] }, `Web-HTML-CKP_EMBEDDED-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 2: Create onEventCallback Handler /** * Event handler for SDK events. * @param {Object} event - The event object with a code property. */ function onEventCallback({ code, result}) { let message; switch (code) { case 'SDK_PAYMENT_SUCCESSFUL': message = 'Payment successful. We recommend redirecting you to the payment results page.'; break; case 'SDK_PAYMENT_FAIL': message = 'Payment failed. We recommend referring to the paymentResultCode error code for details and then guiding the user to retry the payment.'; break; case 'SDK_PAYMENT_CANCEL': message = "The buyer did not click to complete the payment and closed the payment window. You can use the paymentSessionData within its validity period to re-initiate the SDK. If it has expired, you'll need to request a new paymentSessionData."; break; case 'SDK_PAYMENT_CLICK_BACK_TO_MERCHANT': location.href = result.actionForm.redirectUrl; return; default: message = 'Unhandled event code. Redirecting to home page.'; location.href = './'; return; } console.log(message); } // Step 3: Create the Checkout payment rendering component. /** * Renders the checkout payment component in the specified wrapper. * @param {string} paymentSessionData - The session data for payment initialization. */`] }, `Web-HTML-CKP_EMBEDDED-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`invoke-the-sdk`], chunks: [`async function createPopupCheckout(paymentSessionData) { try { await checkoutApp.mountComponent( { sessionData: paymentSessionData, }, '#ckp-embed-wrapper' ); } catch (error) { console.error('Error mounting the checkout component:', error); } } `] }, `Web-HTML-CKP_EMBEDDED-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 4: Get payment session data from the endpoint. /** * Handles the form submission to get payment session data and render the payment component. */ async function handleSubmit() { try { const paymentResponse = await getPaymentSessionData(); if ( paymentResponse && paymentResponse.data && paymentResponse.data.result && paymentResponse.data.result.resultStatus === 'S' && paymentResponse.data.paymentSessionData ) { await createPopupCheckout(paymentResponse.data.paymentSessionData); } else { console.error('Error with payment response:', paymentResponse); } } catch (error) { console.error('Error submitting the payment request:', error); } } // Step 5: Call createPaymentSession endpoint. /** * Fetches payment session data from the backend endpoint. * @returns {Object} The response data from the backend if successful; otherwise an error. */`] }, `Web-HTML-CKP_EMBEDDED-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-a-payment-session`], chunks: [`async function getPaymentSessionData() { const url = 'http://localhost:8080/payment/createSession'; try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ // in practice, amount should be calculated on your server side amountValue: window.amount.value, currency: window.amount.currency, }), }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } const res = await response.json(); if (res.status === 'success') { return res; } throw new Error(res.message || 'Invalid response format'); } catch (error) { console.error('Error fetching payment session data:', error); } } `] }, `Web-HTML-CKP_EMBEDDED-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 6: Initialize the payment processing flow after the document content is fully loaded. document.addEventListener('DOMContentLoaded', () => { handleSubmit(); }); `] }, `Web-HTML-CKP_EMBEDDED-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.css', when: { client: 'HTML', server: 'Java', integration_type: 'Embedded CKP' }, children: _jsx(AntomFile, { language: `css`, filename: 'src/main/resources/static/index.css', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `css`, steps: [``], chunks: [`body { margin: 0; padding: 0; font-family: 'PingFang SC'; display: flex; flex-direction: column; height: 100vh; margin: 0 auto; } .antom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } header { width: 100%; height: 72px; background: #fdfdfd; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header-content { margin: 0 auto; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-start; } .header-content-img { width: 120px; } .header-content .subtitle { margin-left: 28px; color: #bcbcbc; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .content { display: flex; flex-direction: column; position: relative; overflow: hidden; margin-top: 82px; width: 1280px; height: 800px; flex-shrink: 0; border-radius: 40px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .checkout-container { margin: 0 auto; width: 100%; display: flex; flex-grow: 1; } .footer { display: flex; justify-content: center; margin-top: 20px; color: #bcbcbc; font-size: 16px; font-weight: 500; line-height: 24px; } .gotoTest { color: #1650ff; margin: 0 4px; text-decoration: none; } `] }, `Web-HTML-CKP_EMBEDDED-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.html', when: { client: 'HTML', integration_type: 'Embedded CKP' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `html`, filename: 'client/index.html', downloadOnly: false, steps: [`build-the-checkout-page`], children: [_jsx(AntomChunk, { language: `html`, steps: [``], chunks: [` Antom Demo Checkout

Checkout Demo

`] }, `Web-HTML-CKP_EMBEDDED-other1`), _jsx(AntomChunk, { language: `html`, steps: [`build-the-checkout-page`], chunks: [`

`] }, `Web-HTML-CKP_EMBEDDED-code1`), _jsx(AntomChunk, { language: `html`, steps: [``], chunks: [`

`] }, `Web-HTML-CKP_EMBEDDED-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', integration_type: 'Embedded CKP' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/index.js', downloadOnly: false, steps: [`initialize-instantiate-the-sdk`, `get-a-payment-session`, `invoke-the-sdk`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`/** * The integration method of the Antom CKP. */ window.amount = { currency: 'USD', value: '6000' }; `] }, `Web-HTML-CKP_EMBEDDED-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`initialize-instantiate-the-sdk`], chunks: [`// Step 1: Create an SDK instance. const checkoutApp = new AMSCheckoutPage({ environment: 'sandbox', locale: 'en_US', onEventCallback, }); `] }, `Web-HTML-CKP_EMBEDDED-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 2: Create onEventCallback Handler /** * Event handler for SDK events. * @param {Object} event - The event object with a code property. */ function onEventCallback({ code, result}) { let message; switch (code) { case 'SDK_PAYMENT_SUCCESSFUL': message = 'Payment successful. We recommend redirecting you to the payment results page.'; break; case 'SDK_PAYMENT_FAIL': message = 'Payment failed. We recommend referring to the paymentResultCode error code for details and then guiding the user to retry the payment.'; break; case 'SDK_PAYMENT_CANCEL': message = "The buyer did not click to complete the payment and closed the payment window. You can use the paymentSessionData within its validity period to re-initiate the SDK. If it has expired, you'll need to request a new paymentSessionData."; break; case 'SDK_PAYMENT_CLICK_BACK_TO_MERCHANT': location.href = result.actionForm.redirectUrl; return; default: message = 'Unhandled event code. Redirecting to home page.'; location.href = './'; return; } console.log(message); } // Step 3: Create the Checkout payment rendering component. /** * Renders the checkout payment component in the specified wrapper. * @param {string} paymentSessionData - The session data for payment initialization. */`] }, `Web-HTML-CKP_EMBEDDED-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`invoke-the-sdk`], chunks: [`async function createPopupCheckout(paymentSessionData) { try { await checkoutApp.mountComponent( { sessionData: paymentSessionData, }, '#ckp-embed-wrapper' ); } catch (error) { console.error('Error mounting the checkout component:', error); } } `] }, `Web-HTML-CKP_EMBEDDED-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 4: Get payment session data from the endpoint. /** * Handles the form submission to get payment session data and render the payment component. */ async function handleSubmit() { try { const paymentResponse = await getPaymentSessionData(); if ( paymentResponse && paymentResponse.data && paymentResponse.data.result && paymentResponse.data.result.resultStatus === 'S' && paymentResponse.data.paymentSessionData ) { await createPopupCheckout(paymentResponse.data.paymentSessionData); } else { console.error('Error with payment response:', paymentResponse); } } catch (error) { console.error('Error submitting the payment request:', error); } } // Step 5: Call createPaymentSession endpoint. /** * Fetches payment session data from the backend endpoint. * @returns {Object} The response data from the backend if successful; otherwise an error. */`] }, `Web-HTML-CKP_EMBEDDED-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-a-payment-session`], chunks: [`async function getPaymentSessionData() { const url = 'http://localhost:8080/payment/createSession'; try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ // in practice, amount should be calculated on your server side amountValue: window.amount.value, currency: window.amount.currency, }), }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } const res = await response.json(); if (res.status === 'success') { return res; } throw new Error(res.message || 'Invalid response format'); } catch (error) { console.error('Error fetching payment session data:', error); } } `] }, `Web-HTML-CKP_EMBEDDED-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 6: Initialize the payment processing flow after the document content is fully loaded. document.addEventListener('DOMContentLoaded', () => { handleSubmit(); }); `] }, `Web-HTML-CKP_EMBEDDED-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.css', when: { client: 'HTML', integration_type: 'Embedded CKP' }, unless: { server: 'Java' }, children: _jsx(AntomFile, { language: `css`, filename: 'client/index.css', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `css`, steps: [``], chunks: [`body { margin: 0; padding: 0; font-family: 'PingFang SC'; display: flex; flex-direction: column; height: 100vh; margin: 0 auto; } .antom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } header { width: 100%; height: 72px; background: #fdfdfd; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header-content { margin: 0 auto; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-start; } .header-content-img { width: 120px; } .header-content .subtitle { margin-left: 28px; color: #bcbcbc; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .content { display: flex; flex-direction: column; position: relative; overflow: hidden; margin-top: 82px; width: 1280px; height: 800px; flex-shrink: 0; border-radius: 40px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .checkout-container { margin: 0 auto; width: 100%; display: flex; flex-grow: 1; } .footer { display: flex; justify-content: center; margin-top: 20px; color: #bcbcbc; font-size: 16px; font-weight: 500; line-height: 24px; } .gotoTest { color: #1650ff; margin: 0 4px; text-decoration: none; } `] }, `Web-HTML-CKP_EMBEDDED-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.html', when: { client: 'HTML', server: 'Java', integration_type: 'Hosted CKP' }, children: _jsxs(AntomFile, { language: `html`, filename: 'src/main/resources/static/index.html', downloadOnly: false, steps: [`build-the-checkout-page`], children: [_jsx(AntomChunk, { language: `html`, steps: [``], chunks: [` Antom Demo Checkout

Checkout Demo

`] }, `Web-HTML-CKP_HOST-other1`), _jsx(AntomChunk, { language: `html`, steps: [`build-the-checkout-page`], chunks: [`

`] }, `Web-HTML-CKP_HOST-code1`), _jsx(AntomChunk, { language: `html`, steps: [``], chunks: [`

`] }, `Web-HTML-CKP_HOST-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', server: 'Java', integration_type: 'Hosted CKP' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'src/main/resources/static/index.js', downloadOnly: false, steps: [`get-payment-continuation-link`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`/** * The integration method of the Antom CKP. */ const amount = { currency: 'USD', value: '6000' }; const PAYMENT_SESSION_URL = 'http://localhost:8080/payment/createSession'; // Step 1: Call createPaymentSession endpoint. /** * Fetches payment session data from the backend endpoint. * @returns {Object} The response data from the backend if successful; otherwise an error. */`] }, `Web-HTML-CKP_HOST-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-payment-continuation-link`], chunks: [`async function getPaymentSessionData() { try { const response = await fetch(PAYMENT_SESSION_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ amountValue: amount.value, currency: amount.currency, }), }); if (!response.ok) {`, ' throw new Error(`HTTP error! Status: \${response.status}`);', ` } const res = await response.json(); if (res.status === 'success') { return res; }`, ' throw new Error(`Invalid response format: \${res.message}`);', ` } catch (error) { handleError('Error fetching payment session data:', error); } } `] }, `Web-HTML-CKP_HOST-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 2: Get payment normalUrl from the endpoint. /** * Handles the form submission to get payment normalUrl and render the payment component. */ async function handleSubmit() { try { const { data } = await getPaymentSessionData(); if (data && data.result.resultStatus === 'S' && data.normalUrl) { iframe.src = data.normalUrl; } else {`, ' throw new Error(`Error with payment response: \${JSON.stringify(data)}`);', ` } } catch (error) { handleError('Error submitting the payment request:', error); } } // Step 3: Initialize the payment processing flow after the document content is fully loaded. document.addEventListener('DOMContentLoaded', () => { initializeIframe(); handleSubmit(); }); /** * Initializes the iframe and sets up the load event listener. */ function initializeIframe() { const iframe = document.getElementById('iframe'); iframe.addEventListener('load', () => { if (iframe.contentDocument) { location.href = iframe.contentWindow.location.href; } }); } /** * Handles errors by logging them to the console. * @param {string} message - The error message prefix. * @param {Error|Object} error - The error object or additional error information. */ function handleError(message, error) { console.error(`, ' `\${message} \${', ` error instanceof Error ? error.message : JSON.stringify(error)`, ' }`', ` ); } `] }, `Web-HTML-CKP_HOST-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.css', when: { client: 'HTML', server: 'Java', integration_type: 'Hosted CKP' }, children: _jsx(AntomFile, { language: `css`, filename: 'src/main/resources/static/index.css', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `css`, steps: [``], chunks: [`body { margin: 0; padding: 0; font-family: 'PingFang SC'; display: flex; flex-direction: column; height: 100vh; margin: 0 auto; } .antom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } header { width: 100%; height: 72px; background: #fdfdfd; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header-content { margin: 0 auto; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-start; } .header-content-img { width: 120px; } .header-content .subtitle { margin-left: 28px; color: #bcbcbc; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .content { display: flex; flex-direction: column; position: relative; overflow: hidden; margin-top: 82px; width: 1280px; height: 800px; flex-shrink: 0; border-radius: 40px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } #iframe { width: 100%; height: 100%; } .footer { display: flex; justify-content: center; margin-top: 20px; color: #bcbcbc; font-size: 16px; font-weight: 500; line-height: 24px; } .gotoTest { color: #1650ff; margin: 0 4px; text-decoration: none; } `] }, `Web-HTML-CKP_HOST-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.html', when: { client: 'HTML', integration_type: 'Hosted CKP' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `html`, filename: 'client/index.html', downloadOnly: false, steps: [`build-the-checkout-page`], children: [_jsx(AntomChunk, { language: `html`, steps: [``], chunks: [` Antom Demo Checkout

Checkout Demo

`] }, `Web-HTML-CKP_HOST-other1`), _jsx(AntomChunk, { language: `html`, steps: [`build-the-checkout-page`], chunks: [`

`] }, `Web-HTML-CKP_HOST-code1`), _jsx(AntomChunk, { language: `html`, steps: [``], chunks: [`

`] }, `Web-HTML-CKP_HOST-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', integration_type: 'Hosted CKP' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/index.js', downloadOnly: false, steps: [`get-payment-continuation-link`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`/** * The integration method of the Antom CKP. */ const amount = { currency: 'USD', value: '6000' }; const PAYMENT_SESSION_URL = 'http://localhost:8080/payment/createSession'; // Step 1: Call createPaymentSession endpoint. /** * Fetches payment session data from the backend endpoint. * @returns {Object} The response data from the backend if successful; otherwise an error. */`] }, `Web-HTML-CKP_HOST-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-payment-continuation-link`], chunks: [`async function getPaymentSessionData() { try { const response = await fetch(PAYMENT_SESSION_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ amountValue: amount.value, currency: amount.currency, }), }); if (!response.ok) {`, ' throw new Error(`HTTP error! Status: \${response.status}`);', ` } const res = await response.json(); if (res.status === 'success') { return res; }`, ' throw new Error(`Invalid response format: \${res.message}`);', ` } catch (error) { handleError('Error fetching payment session data:', error); } } `] }, `Web-HTML-CKP_HOST-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// Step 2: Get payment normalUrl from the endpoint. /** * Handles the form submission to get payment normalUrl and render the payment component. */ async function handleSubmit() { try { const { data } = await getPaymentSessionData(); if (data && data.result.resultStatus === 'S' && data.normalUrl) { iframe.src = data.normalUrl; } else {`, ' throw new Error(`Error with payment response: \${JSON.stringify(data)}`);', ` } } catch (error) { handleError('Error submitting the payment request:', error); } } // Step 3: Initialize the payment processing flow after the document content is fully loaded. document.addEventListener('DOMContentLoaded', () => { initializeIframe(); handleSubmit(); }); /** * Initializes the iframe and sets up the load event listener. */ function initializeIframe() { const iframe = document.getElementById('iframe'); iframe.addEventListener('load', () => { if (iframe.contentDocument) { location.href = iframe.contentWindow.location.href; } }); } /** * Handles errors by logging them to the console. * @param {string} message - The error message prefix. * @param {Error|Object} error - The error object or additional error information. */ function handleError(message, error) { console.error(`, ' `\${message} \${', ` error instanceof Error ? error.message : JSON.stringify(error)`, ' }`', ` ); } `] }, `Web-HTML-CKP_HOST-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.css', when: { client: 'HTML', integration_type: 'Hosted CKP' }, unless: { server: 'Java' }, children: _jsx(AntomFile, { language: `css`, filename: 'client/index.css', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `css`, steps: [``], chunks: [`body { margin: 0; padding: 0; font-family: 'PingFang SC'; display: flex; flex-direction: column; height: 100vh; margin: 0 auto; } .antom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } header { width: 100%; height: 72px; background: #fdfdfd; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header-content { margin: 0 auto; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-start; } .header-content-img { width: 120px; } .header-content .subtitle { margin-left: 28px; color: #bcbcbc; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .content { display: flex; flex-direction: column; position: relative; overflow: hidden; margin-top: 82px; width: 1280px; height: 800px; flex-shrink: 0; border-radius: 40px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } #iframe { width: 100%; height: 100%; } .footer { display: flex; justify-content: center; margin-top: 20px; color: #bcbcbc; font-size: 16px; font-weight: 500; line-height: 24px; } .gotoTest { color: #1650ff; margin: 0 4px; text-decoration: none; } `] }, `Web-HTML-CKP_HOST-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.html', when: { client: 'HTML', server: 'Java', integration_type: 'Payment Element' }, children: _jsxs(AntomFile, { language: `html`, filename: 'src/main/resources/static/index.html', downloadOnly: false, steps: [`build-the-checkout-page`], children: [_jsx(AntomChunk, { language: `html`, steps: [``], chunks: [` Checkout

ShopPay

Secure Checkout

Review Order

Please review your shipping and payment details.

Shipping Address

John Doe +1 (555) 123-4567 Default Work

123 Market Street, Suite 400
San Francisco, CA 94105, USA

Payment Method

`] }, `Web-HTML-ELEMENT-other1`), _jsx(AntomChunk, { language: `html`, steps: [`build-the-checkout-page`], chunks: [`

`] }, `Web-HTML-ELEMENT-code1`), _jsx(AntomChunk, { language: `html`, steps: [``], chunks: [`

Order Summary

Sony WH-1000XM5 Wireless Headphones

Black

Qty 1

\$349.00

Logitech MX Master 3S Mouse

Graphite

Qty 1

\$99.00

Subtotal \$448.00

Shipping Free

Discount -\$10.00

Total

Inc. Tax \$438.00

SSL Secure Payment

`] }, `Web-HTML-ELEMENT-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', server: 'Java', integration_type: 'Payment Element' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'src/main/resources/static/index.js', downloadOnly: false, steps: [`get-a-payment-session`, `initialize-instantiate-the-sdk`, `mount-element-component`, `invoke-the-sdk`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`(function () { /** * The integration method of the Antom CKP. */ const amount = { currency: "USD", value: "438.00" }; const PAYMENT_SESSION_URL = "http://localhost:8080/payment/createSession"; /** * Handles errors by logging them to the console. * @param {string} message - The error message prefix. * @param {Error|Object} error - The error object or additional error information. */ function handleError(message, error) { console.error(`, ' `\${message} \${', ` error instanceof Error ? error.message : JSON.stringify(error)`, ' }`', ` ); } `] }, `Web-HTML-ELEMENT-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-a-payment-session`], chunks: [` // Step 1: Call createPaymentSession endpoint. /** * Fetches payment session data from the backend endpoint. * @returns {Object} The response data from the backend if successful; otherwise an error. */ const getPaymentSessionData = async () => { try { const response = await fetch(PAYMENT_SESSION_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ amountValue: amount.value, currency: amount.currency, }), }); if (!response.ok) {`, ' throw new Error(`HTTP error! Status: \${response.status}`);', ` } const res = await response.json(); if (res.status === "success") { return res; }`, ' throw new Error(`Invalid response format: \${res.message}`);', ` } catch (error) { handleError("Error fetching payment session data:", error); } }; `] }, `Web-HTML-ELEMENT-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [`initialize-instantiate-the-sdk`], chunks: [` // Step 2: Call the mount API to render Payment Element const mountElement = (sessionData) => { return new Promise((resolve, reject) => { // Required: Create a Payment Element instance const elementPayment = new window.AMSElement({ environment: "sandbox", locale: "en_US", // Note: Use underscores for language symbols sessionData: sessionData, }); // Optional: Use the appearance parameter to customize the visual style and layout of the payment interface const appearance = { theme: "default", layout: { type: "accordion" }, variables: { "content-primary": "#2a3a52", "content-secondary": "#7c8ca3", "content-tertiary": "#abb9cc", "content-quaternary": "#ffffff", "background-primary": "#ffffff", "background-secondary": "#f9fafb", "background-disable": "#fcfcfc", "background-transparency": "#0000000a", "border-primary": "#cfd8e5", "border-secondary": "#ebebeb", "border-disable": "#f5f5f5", "action-normal": "#00b277", "action-hover": "#ff6060", "action-disable": "#a2b9ff", "action-secondary": "#f3f6ff", "state-failure": "#ff5b4d", "state-warning": "#ff9f1a", "state-success": "#00b277", "state-info": "#a2c9ff", "state-marketing": "#ff6060", "radius-backup": "4px", "radius-module": "12px", "radius-component": "8px", "radius-button": "12px", "wrapper-padding": "24px" }, }; `] }, `Web-HTML-ELEMENT-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [`mount-element-component`], chunks: [` // Optional: Before calling mount() method, set the outer container to its loading state first elementPayment ?.mount( { type: "payment", appearance: appearance, // Optional: Redirect to the merchant page processing logic notRedirectAfterComplete: false, }, "#element-container" ) .then((info) => { // mount error if (info?.error) { reject(info.error); } else { // mount success resolve(elementPayment); } });`] }, `Web-HTML-ELEMENT-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` }); }; `] }, `Web-HTML-ELEMENT-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`invoke-the-sdk`], chunks: [` // Step 3: Submit payment const handleSubmit = (elementInstance) => { if (!elementInstance) { return; } elementInstance?.submitPayment().then((info) => { const { error, status, userCanceled3D } = info || {}; if (error) { const { code, message } = error; // The buyer canceled 3DS authentication if (userCanceled3D) { } if (status === "PROCESSING") { // Status is unknown due to network anomalies or channel instability. It is recommended to poll the result from the server } else { // FAIL // Form validation failed. Antom has notified the buyer, and no further action required if (code === "FORM_INVALID") { return; } // Optional: show error message alert(message); // Optional: or implement custom logic based on the error code if (code) { // xxx } } return; } // Payment successful if (status === "SUCCESS") { // xxx } else if (status === "CANCELLED") { // xxx } else { // Optional: Other states can be monitored. } }); }; `] }, `Web-HTML-ELEMENT-code4`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` // Set the state of the submit button const setSubmitBtn = (valid) => { const submitBtn = document.getElementById("submitBtn"); if (valid) { submitBtn.disabled = false; submitBtn.className = "w-full py-4 px-6 rounded-xl text-white font-semibold text-lg shadow-lg shadow-[#1677ff]/30 flex justify-center items-center transition-all duration-200 bg-[#1677ff] hover:bg-[#1677ff]/90 hover:shadow-[#1677ff]/40 active:scale-[0.98]"; } else { submitBtn.disabled = true; submitBtn.className = "w-full py-4 px-6 rounded-xl text-white font-semibold text-lg shadow-lg shadow-[#ccc]/30 flex justify-center items-center transition-all duration-200 bg-[#ccc]"; } }; const init = async () => { const { data } = (await getPaymentSessionData()) || {}; mountElement(data?.paymentSessionData) .then((elementInstance) => { setSubmitBtn(true); const submitBtn = document.getElementById("submitBtn"); submitBtn.addEventListener("click", () => { handleSubmit(elementInstance); }); }) .catch((error) => { console.log(error); setSubmitBtn(false); }); }; init(); })(); `] }, `Web-HTML-ELEMENT-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.html', when: { client: 'HTML', integration_type: 'Payment Element' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `html`, filename: 'client/index.html', downloadOnly: false, steps: [`build-the-checkout-page`], children: [_jsx(AntomChunk, { language: `html`, steps: [``], chunks: [` Checkout

ShopPay

Secure Checkout

Review Order

Please review your shipping and payment details.

Shipping Address

John Doe +1 (555) 123-4567 Default Work

123 Market Street, Suite 400
San Francisco, CA 94105, USA

Payment Method

`] }, `Web-HTML-ELEMENT-other1`), _jsx(AntomChunk, { language: `html`, steps: [`build-the-checkout-page`], chunks: [`

`] }, `Web-HTML-ELEMENT-code1`), _jsx(AntomChunk, { language: `html`, steps: [``], chunks: [`

Order Summary

Sony WH-1000XM5 Wireless Headphones

Black

Qty 1

\$349.00

Logitech MX Master 3S Mouse

Graphite

Qty 1

\$99.00

Subtotal \$448.00

Shipping Free

Discount -\$10.00

Total

Inc. Tax \$438.00

SSL Secure Payment

`] }, `Web-HTML-ELEMENT-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/html/index.js', when: { client: 'HTML', integration_type: 'Payment Element' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/index.js', downloadOnly: false, steps: [`get-a-payment-session`, `initialize-instantiate-the-sdk`, `mount-element-component`, `invoke-the-sdk`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`(function () { /** * The integration method of the Antom CKP. */ const amount = { currency: "USD", value: "438.00" }; const PAYMENT_SESSION_URL = "http://localhost:8080/payment/createSession"; /** * Handles errors by logging them to the console. * @param {string} message - The error message prefix. * @param {Error|Object} error - The error object or additional error information. */ function handleError(message, error) { console.error(`, ' `\${message} \${', ` error instanceof Error ? error.message : JSON.stringify(error)`, ' }`', ` ); } `] }, `Web-HTML-ELEMENT-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-a-payment-session`], chunks: [` // Step 1: Call createPaymentSession endpoint. /** * Fetches payment session data from the backend endpoint. * @returns {Object} The response data from the backend if successful; otherwise an error. */ const getPaymentSessionData = async () => { try { const response = await fetch(PAYMENT_SESSION_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ amountValue: amount.value, currency: amount.currency, }), }); if (!response.ok) {`, ' throw new Error(`HTTP error! Status: \${response.status}`);', ` } const res = await response.json(); if (res.status === "success") { return res; }`, ' throw new Error(`Invalid response format: \${res.message}`);', ` } catch (error) { handleError("Error fetching payment session data:", error); } }; `] }, `Web-HTML-ELEMENT-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [`initialize-instantiate-the-sdk`], chunks: [` // Step 2: Call the mount API to render the Element const mountElement = (sessionData) => { return new Promise((resolve, reject) => { // Required: Create an element instance. const elementPayment = new window.AMSElement({ environment: "sandbox", locale: "en_US", // Note: Use underscores for language symbols. sessionData: sessionData, }); // Optional: Set custom style. const appearance = { theme: "default", layout: { type: "accordion" }, variables: { "content-primary": "#2a3a52", "content-secondary": "#7c8ca3", "content-tertiary": "#abb9cc", "content-quaternary": "#ffffff", "background-primary": "#ffffff", "background-secondary": "#f9fafb", "background-disable": "#fcfcfc", "background-transparency": "#0000000a", "border-primary": "#cfd8e5", "border-secondary": "#ebebeb", "border-disable": "#f5f5f5", "action-normal": "#00b277", "action-hover": "#ff6060", "action-disable": "#a2b9ff", "action-secondary": "#f3f6ff", "state-failure": "#ff5b4d", "state-warning": "#ff9f1a", "state-success": "#00b277", "state-info": "#a2c9ff", "state-marketing": "#ff6060", "radius-backup": "4px", "radius-module": "12px", "radius-component": "8px", "radius-button": "12px", "wrapper-padding": "24px" }, }; `] }, `Web-HTML-ELEMENT-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [`mount-element-component`], chunks: [` // Optional: When calling mount, first set the loading state of the outer container. elementPayment ?.mount( { type: "payment", appearance: appearance, // Optional: Redirect to the merchant page processing logic notRedirectAfterComplete: false, }, "#element-container" ) .then((info) => { // mount error if (info?.error) { reject(info.error); } else { // mount success resolve(elementPayment); } });`] }, `Web-HTML-ELEMENT-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` }); }; `] }, `Web-HTML-ELEMENT-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`invoke-the-sdk`], chunks: [` // Step 3: Submit payment. const handleSubmit = (elementInstance) => { if (!elementInstance) { return; } elementInstance?.submitPayment().then((info) => { const { error, status, userCanceled3D } = info || {}; if (error) { const { code, message } = error; // User canceled 3D. if (userCanceled3D) { } if (status === "PROCESSING") { // Status is unknown due to network anomalies or channel instability. It is recommended to poll the result from the server } else { // FAIL // Form validation failed. Antom has notified the buyer, and no further action required if (code === "FORM_INVALID") { return; } // Optional: show error message alert(message); // Optional: or implement custom logic based on the error code if (code) { // xxx } } return; } // Payment successful if (status === "SUCCESS") { // xxx } else if (status === "CANCELLED") { // xxx } else { // Optional: Other states can be monitored. } }); }; `] }, `Web-HTML-ELEMENT-code4`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` // Set the state of the submit button const setSubmitBtn = (valid) => { const submitBtn = document.getElementById("submitBtn"); if (valid) { submitBtn.disabled = false; submitBtn.className = "w-full py-4 px-6 rounded-xl text-white font-semibold text-lg shadow-lg shadow-[#1677ff]/30 flex justify-center items-center transition-all duration-200 bg-[#1677ff] hover:bg-[#1677ff]/90 hover:shadow-[#1677ff]/40 active:scale-[0.98]"; } else { submitBtn.disabled = true; submitBtn.className = "w-full py-4 px-6 rounded-xl text-white font-semibold text-lg shadow-lg shadow-[#ccc]/30 flex justify-center items-center transition-all duration-200 bg-[#ccc]"; } }; const init = async () => { const { data } = (await getPaymentSessionData()) || {}; mountElement(data?.paymentSessionData) .then((elementInstance) => { setSubmitBtn(true); const submitBtn = document.getElementById("submitBtn"); submitBtn.addEventListener("click", () => { handleSubmit(elementInstance); }); }) .catch((error) => { console.log(error); setSubmitBtn(false); }); }; init(); })(); `] }, `Web-HTML-ELEMENT-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/react/App.jsx', when: { platform: 'Web', client: 'React', integration_type: 'SDK' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/src/App.jsx', downloadOnly: false, steps: [`build-the-checkout-page`, `initialize-instantiate-the-sdk`, `get-a-payment-session`, `invoke-the-sdk`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`import './App.css'; import { useEffect, useRef, useState } from 'react'; import { AMSCashierPayment } from '@alipay/ams-checkout'; function App() { const amount = { currency: 'JPY', value: '6000', mul: 1 }; const [selectedPaymentOptionId, setSelectedPaymentOptionId] = useState('PAYPAY'); const [isBtnLoading, setBtnLoading] = useState(false); const [paymentResult, setPaymentResult] = useState({ title: '', message: '', icon: '', bgColor: '', borderColor: '', }); const [alert, setAlert] = useState({ title: '', subTitle: '', iconType: '', }); const checkoutAppRef = useRef(null); const paymentOptions = [ { label: 'PayPay', value: 'PAYPAY', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*mfRjRoV-rL4AAAAAAAAAAAAAAQAAAQ', }, { label: 'Konbini', value: 'KONBINI', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*MfnBTYHOr5cAAAAAAAAAAAAAAQAAAQ', }, { label: 'Pay-easy', value: 'BANKTRANSFER_PAYEASY', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*VhfgTLFuYOgAAAAAAAAAAAAAAQAAAQ', }, ]; const renderAlert = () => { if (!alert.title) return; const icons = { warning: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ', error: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', success: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ', }; return ( <>

{alert.title}

{alert.subTitle}

); }; const renderPaymentResult = () => { if (!paymentResult) return; const { title, message, icon, bgColor, borderColor } = paymentResult; return (

{title}

{message}

); }; const handlePaymentStatus = (status) => { setTimeout(() => { window.location.href = './index.html'; }, 8000); switch (status) { case 'SUCCESS': setPaymentResult({ title: 'Payment Successful', message: 'Thank you for your payment! We will ship out your order as soon as possible.', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ', bgColor: '#e5f7f1', borderColor: '#b7e9d9', }); break; case 'FAIL': setPaymentResult({ title: 'Payment Failed', message: 'Please return to the merchant order page and resubmit your payment.', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', bgColor: 'rgba(255, 91, 77, 0.10)', borderColor: 'rgba(255, 91, 77, 0.20)', }); break; case 'ERROR': setPaymentResult({ title: 'Error', message: 'An error occurred while checking the payment status. Please try again or contact support.', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', bgColor: 'rgba(255, 91, 77, 0.10)', borderColor: 'rgba(255, 91, 77, 0.20)', }); break; default: setPaymentResult({ title: 'Payment Processing', message: 'Please return to the merchant order page and resubmit your payment.', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ', bgColor: 'rgba(255, 159, 26, 0.10)', borderColor: 'rgba(255, 159, 26, 0.20) ', }); } }; // Step 6: Create Polling mechanism to retrieve the payment result. const pollPaymentResult = async () => { const paymentRequestId = new URLSearchParams( window.location.search ).get('paymentRequestId'); if (!paymentRequestId) return; const poll = async () => { let status = "PROCESSING"; let retries = 0; const maxRetries = 5; while (retries < maxRetries) { try { const statusResult = await inquiryPayment(paymentRequestId); status = statusResult ?? "ERROR"; } catch (error) { status = "ERROR"; } retries += 1; if (status === "SUCCESS" || retries === maxRetries) { return handlePaymentStatus(status); } await new Promise((resolve) => setTimeout(resolve, 2000)); } }; poll(); }; // Step 5: Call inquiryPayment to get the payment status. const inquiryPayment = async (paymentRequestId) => { // Define the URL for your backend endpoint const baseUrl = 'http://localhost:8080/payment/inquiryPayment'; const config = { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ paymentRequestId }), }; const response = await fetch(baseUrl, config); if (!response.ok) throw new Error('Network response was not ok'); const res = await response.json(); return res.status === 'success' ? res.data.paymentStatus : 'ERROR'; }; // Step 4: Get payment session data from the endpoint. const handleSubmit = async () => {`] }, `Web-React-SDK-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-a-payment-session`], chunks: [` const getPaymentSessionData = async () => { setBtnLoading(true); if (!selectedPaymentOptionId) { setAlert({ title: 'Warning', subTitle: 'Please select a payment method!', iconType: 'warning', }); setBtnLoading(false); return null; } try { // Define the URL for your backend endpoint const url = 'http://localhost:8080/payment/createSession'; const body = JSON.stringify({ currency: amount.currency, amountValue: amount.value, paymentMethodType: selectedPaymentOptionId, }); const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body, }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } const res = await response.json(); if (res.status === 'success') return res; throw new Error(res.message || 'Invalid response format'); } catch (error) { setAlert({ title: 'Error', subTitle: error.message || 'Failed to fetch payment session data', iconType: 'error', }); return null; } finally { setBtnLoading(false); } }; `] }, `Web-React-SDK-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` try { const paymentResponse = await getPaymentSessionData(); if ( paymentResponse && paymentResponse?.data?.result?.resultStatus === 'S' && paymentResponse?.data?.paymentSessionData !== null ) { await createPopupCheckout( paymentResponse.data.paymentSessionData ); } else if (paymentResponse?.paymentRequestId) { // exception handling console.error(paymentResponse); } } catch (error) { setAlert({ title: 'Error', subTitle: error.message || 'Failed to process payment', iconType: 'error', }); } }; // Step 3: Create the Checkout payment rendering component.`] }, `Web-React-SDK-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`invoke-the-sdk`], chunks: [` const createPopupCheckout = async (paymentSessionData) => { try { if (!checkoutAppRef.current) return; await checkoutAppRef.current.createComponent({ sessionData: paymentSessionData, notRedirectAfterComplete: false, }); } catch (error) { setAlert({ title: error.code, subTitle: error.message || 'Invalid response format', iconType: 'error', }); } }; `] }, `Web-React-SDK-code4`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` // Step 2: Create onEventCallback Handler`] }, `Web-React-SDK-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-payment-result`], chunks: [` const onEventCallback = ({ code, result }) => { switch (code) { // Event codes provided by the SDK. case 'SDK_PAYMENT_SUCCESSFUL': console.log( 'Payment was successful.' ); break; case 'SDK_PAYMENT_PROCESSING': console.log( 'Payment was being processed. Confirm the payment result with server.' ); pollPaymentResult(); break; case 'SDK_PAYMENT_FAIL': console.log( 'Payment failed. Check the value of result.paymentResultCode in the onEventCallback result data for details. Guide buyers to retry the payment based on the provided information.' ); break; case 'SDK_PAYMENT_CANCEL': console.log( 'Guide buyers to retry the payment. You can reuse the paymentSessionData within its validity period to recall the SDK. If it has expired, you need to request new paymentSessionData.' ); break; case 'SDK_PAYMENT_ERROR': console.log( 'The payment status was abnormal. Confirm the payment result with server.' ); pollPaymentResult(); break; default: console.log(code); } }; `] }, `Web-React-SDK-code5`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` useEffect(() => { // Step 1: Create an SDK instance.`] }, `Web-React-SDK-other4`), _jsx(AntomChunk, { language: `javascript`, steps: [`initialize-instantiate-the-sdk`], chunks: [` checkoutAppRef.current = new AMSCashierPayment({ environment: 'sandbox', locale: 'en_US', onEventCallback, });`] }, `Web-React-SDK-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` }, []); `] }, `Web-React-SDK-other5`), _jsx(AntomChunk, { language: `javascript`, steps: [`build-the-checkout-page`], chunks: [` return ( <>

Checkout Demo

Test Demo

Total to pay

JPY 6000

Order summary

Classic Black Cotton T-shirt, extra-soft feel.

JPY 3000

Black L size

Qty 1

Classic Woman Bag

JPY 3000

Black

Qty 1

Total

JPY 6000

choose your payment method

{paymentOptions.map( ({ label, value, icon }) => { return ( setSelectedPaymentOptionId( event.target .value ) } checked={ selectedPaymentOptionId === value } />

{label} ); } )}

{renderPaymentResult()}

{renderAlert()}

This page is used only for sandbox testing, for more testing information, please refer Testing resources

); } `] }, `Web-React-SDK-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`export default App; `] }, `Web-React-SDK-other6`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/react/App.css', when: { platform: 'Web', client: 'React', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/src/App.css', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`body { margin: 0; padding: 0; font-family: 'PingFang SC'; display: flex; flex-direction: column; height: 100vh; margin: 0 auto; } .antom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } header { width: 100%; height: 72px; background: #fdfdfd; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header-content { margin: 0 auto; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-start; } .header-content-img { width: 120px; } .header-content .subtitle { margin-left: 28px; color: #bcbcbc; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .content { display: flex; flex-direction: column; position: relative; overflow: hidden; margin-top: 82px; width: 1280px; height: 800px; flex-shrink: 0; border-radius: 40px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .headerContent { display: flex; align-items: center; justify-content: flex-start; } .headerContent .logo { margin: 0 10px; } .headerContent .testDemo { width: 62px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.4); font-size: 8px; font-weight: 400; } .checkout-container { margin: 0 auto; width: 100%; display: flex; flex-grow: 1; } .container-left { flex: 1; background-color: #f0f6ff; display: flex; justify-content: flex-end; } .leftContent { width: 620px; padding: 100px 56px 232px 64px; box-sizing: border-box; } .leftContent .order { margin-top: 32px; padding-left: 36px; } .orderTotal .totals { color: #7c8ca3; font-size: 14px; font-weight: 400; line-height: 20px; } .orderTotal .money { color: #2a3a52; font-size: 24px; font-weight: 500; line-height: 36px; } .container-left .order-title { margin-top: 32px; color: #2a3a52; font-size: 18px; font-style: normal; font-weight: 500; line-height: 28px; } .container-left .product-details { display: flex; text-align: center; margin-top: 24px; } .product-details .details-left { width: 80px; height: 80px; padding: 12px; box-sizing: border-box; } .product-details .details-left img { width: 100%; height: 100%; vertical-align: middle; } .product-details .details-right { margin-left: 16px; flex: 1; } .product-details .details-right p { margin: 0; text-align: left; color: #2a3a52; font-size: 14px; font-weight: 400; line-height: 20px; } .product-details .details-right .details-shop-content { display: flex; flex-direction: row; justify-content: space-between; } .product-details .details-right .details-shop-content-text { color: #2a3a52; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; width: 218px; } .details-right-shop-message { color: #abb9cc !important; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin: 4px 0 !important; display: flex; align-items: center; } .line { margin: 0 8px; width: 1px; height: 12px; background-color: rgba(0, 0, 0, 0.04); } .total { border-top: 1px solid rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; margin-left: 130px; color: #2a3a52; font-size: 14px; font-weight: 500; line-height: 20px; } .total .money { font-size: 20px; font-weight: 500; line-height: 32px; } .details-right-shop-qty { color: #2a3a52; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin-top: 4px; } .container-right { flex: 1; } .container-right .rightContent { width: 660px; height: 100%; padding: 162px 64px 76px 56px; box-sizing: border-box; } .rightContent p { display: inline-flex; align-items: center; gap: 10px; color: #2a3a52; } .payment-option { border: 2px solid #000; padding: 10px; margin-bottom: 20px; display: none; cursor: pointer; } .payment-option.selected { border-color: #1650ff; } .show { display: block; } .submit { width: 100%; height: 56px; border-radius: 12px; background: #1650ff; color: #fff; border: none; text-decoration: none; cursor: pointer; font-size: 16px; display: block; margin-top: 32px; } .radio-group { display: flex; flex-direction: column; } .radio-group label { display: flex; align-items: center; margin-bottom: 8px; padding: 8px 16px; border: 1px solid #ebebeb; background: #fff; border-radius: 12px; color: #2a3a52; font-size: 16px; font-weight: 400; line-height: 24px; } .radio-group label.show { display: flex; } .radio-input { display: none; } .radio-button { width: 14px; height: 14px; border: 1px solid #abb9cc; margin-right: 8px; border-radius: 50%; } .radio-input:checked + .radio-button { border: 4px solid #1650ff; width: 8px; height: 8px; } .payment-icon { vertical-align: middle; display: flex; width: 32px; height: 32px; margin: 0 12px; padding: 4px 4.001px 3.996px 3.999px; justify-content: center; align-items: center; border-radius: 8px; border: 0.5px solid #f5f5f5; background: #fcfcfc; } .disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; } /* Result */ .hidden { display: none; } #result-container { display: flex; flex-direction: column; margin-top: 14px; align-items: flex-start; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0); padding: 12px 16px; color: #2a3a52; font-size: 13px; font-weight: 500; line-height: 20px; } .result-title { display: flex; align-items: center; } .result-title img { width: 20px; margin-right: 12px; } #content { color: #7c8ca3; text-align: center; font-size: 12px; font-weight: 400; line-height: 18px; margin-top: 8px; padding-left: 32px; } /* The Modal (background) */ .mockup { /* display: none; */ z-index: 1000; width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.6); } /* Modal Content/Box */ .container-desktop { /* display: none; */ width: 370px; height: 248px; position: fixed; top: 50%; left: 50%; z-index: 1001; border-radius: 12px; overflow: hidden; transform-origin: 50% 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); padding: 40px 0px 24px 0px; background-color: #fff; } @keyframes container-zoom-in { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .desktop-animation { animation: container-zoom-in 0.3s ease-in-out; animation-fill-mode: forwards; } .container-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .container-content img { width: 64px; height: 64px; } .container-title { color: var(--Content-Primary, #2a3a52); text-align: center; font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .container-subTitle { color: #7c8ca3; text-align: center; font-size: 14px; font-weight: 400; line-height: 20px; margin-top: 24px; } .container-btn { display: flex; width: 338px; height: 48px; padding: 0px 24px; justify-content: center; align-items: center; border-radius: var(---Button, 12px); background: var(--Action-Normal, #1650ff); border: none; cursor: pointer; color: var(--Content-Quaternary, #fff); font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 24px; } .footer { display: flex; justify-content: center; margin-top: 20px; color: #bcbcbc; font-size: 16px; font-weight: 500; line-height: 24px; } .gotoTest { color: #1650ff; margin: 0 4px; text-decoration: none; } `] }, `Web-React-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/react/main.jsx', when: { platform: 'Web', client: 'React', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/src/main.jsx', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.jsx'; createRoot(document.getElementById('root')).render( ); `] }, `Web-React-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/react/index.html', when: { platform: 'Web', client: 'React', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/index.html', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` Antom Demo Checkout

`] }, `Web-React-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/react/package.json', when: { platform: 'Web', client: 'React', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/package.json', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`{ "name": "antom-sdk-merchant-react-client", "author": "rongzhao.lee", "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "format": "prettier --write .", "lint": "eslint ." }, "dependencies": { "@alipay/ams-checkout": "^1.18.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.26.0" }, "devDependencies": { "@eslint/js": "^9.8.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^9.8.0", "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "prettier": "^3.3.3", "vite": "^5.4.0" }, "repository": "https://code.alipay.com/antom-example/antom-online-payment-sample-web.git" } `] }, `Web-React-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/react/README.md', when: { platform: 'Web', client: 'React', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`# Project Title antom-online-payments-demo-using-npm-sdk ## Prerequisites - **Node.js**: Ensure that you have Node.js installed on your machine. You can download it from [nodejs.org](https://nodejs.org/).`, '- **npm**: Node.js comes with npm (Node Package Manager). Ensure you have the latest version by running `npm install -g npm`.', ` ## Getting Started This demo project showcases how Antom payment works. For more detailed information, visit the [Antom Documentation](https://docs.antom.com/). Follow these steps to set up and run the project: ### 1. Install Dependencies Once inside the project directory, install the required dependencies using npm: `, '```bash', `npm install`, '```', ` ### 2. Start the Client `, '```bash', `npm run dev`, '```', ` `] }, `Web-React-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/react/vite.config.js', when: { platform: 'Web', client: 'React', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/vite.config.js', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: 5173, }, }); `] }, `Web-React-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/App.vue', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/src/App.vue', downloadOnly: false, steps: [`build-the-checkout-page`, `initialize-instantiate-the-sdk`, `get-a-payment-session`, `invoke-the-sdk`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [`build-the-checkout-page`], chunks: [` `] }, `Web-Vue-SDK-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` `] }, `Web-Vue-SDK-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/main.ts', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/src/main.ts', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.mount('#app'); `] }, `Web-Vue-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/vite-env.d.ts', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/src/vite-env.d.ts', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`/// `] }, `Web-Vue-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/tsconfig.node.json', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/tsconfig.node.json', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`{ "compilerOptions": { "target": "ES2022", "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["vite.config.ts"] } `] }, `Web-Vue-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/index.html', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/index.html', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` Antom Demo Checkout

`] }, `Web-Vue-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/tsconfig.app.json', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/tsconfig.app.json', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`{ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ES2020", "DOM", "DOM.Iterable"], "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, "jsx": "preserve", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] } `] }, `Web-Vue-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/README.md', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`# Project Title antom-online-payments-demo-using-npm-sdk ## Prerequisites - **Node.js**: Ensure that you have Node.js installed on your machine. You can download it from [nodejs.org](https://nodejs.org/).`, '- **npm**: Node.js comes with npm (Node Package Manager). Ensure you have the latest version by running `npm install -g npm`.', ` ## Getting Started This demo project showcases how Antom payment works. For more detailed information, visit the [Antom Documentation](https://docs.antom.com/). Follow these steps to set up and run the project: ### 1. Install Dependencies Once inside the project directory, install the required dependencies using npm: `, '```bash', `npm install`, '```', ` ### 2. Start the Client `, '```bash', `npm run dev`, '```', ` `] }, `Web-Vue-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/package.json', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/package.json', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`{ "name": "antom-sdk-merchant-vue-client", "author": "rongzhao.lee", "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc -b && vite build", "preview": "vite preview", "format": "prettier --write .", "lint": "eslint ." }, "dependencies": { "@alipay/ams-checkout": "^1.18.0", "vue": "^3.4.35", "vue-router": "^4.4.3" }, "devDependencies": { "@eslint/js": "^9.9.0", "@vitejs/plugin-vue": "^5.1.2", "prettier": "^3.3.3", "sass-embedded": "^1.77.8", "typescript": "^5.5.3", "vite": "^5.4.0", "vue-tsc": "^2.0.29" }, "repository": "https://code.alipay.com/antom-example/antom-online-payment-sample-web.git" } `] }, `Web-Vue-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/tsconfig.json', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/tsconfig.json', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ] } `] }, `Web-Vue-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/web/vue/vite.config.ts', when: { platform: 'Web', client: 'Vue', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/vite.config.ts', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], }); `] }, `Web-Vue-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/android/java/MainActivity.java', when: { platform: 'Android', client: 'Java', integration_type: 'Payment Element' }, children: _jsxs(AntomFile, { language: `java`, filename: 'client/src/main/java/com/antom/payment_element_sdk_java/MainActivity.java', downloadOnly: false, steps: [`get-a-payment-session`, `initialize-instantiate-the-sdk`, `mount-element-component`, `invoke-the-sdk`], children: [_jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.payment_element_sdk_java; import android.annotation.SuppressLint; import android.app.Activity; import android.content.Intent; import android.graphics.drawable.Drawable; import android.net.Uri; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.RadioButton; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; import androidx.core.content.ContextCompat; import com.alipay.ams.component.sdk.callback.OnCreateComponentListener; import com.alipay.ams.component.sdk.callback.OnSubmitPayListener; import com.alipay.ams.component.sdk.model.AMSResultError; import com.alipay.ams.component.sdk.model.AMSStatus; import com.alipay.ams.component.sdk.model.AMSStatusResult; import org.json.JSONObject; import java.util.Locale; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import com.alipay.ams.component.sdk.payment.AMSPaymentElement; import com.alipay.ams.component.sdk.payment.AMSPaymentElementConfiguration; import com.antom.payment_element_sdk_java.Common.*; public class MainActivity extends AppCompatActivity { public static final String TAG = "ManinActivity"; PaymentMethodView selectPayment; RadioButton paymentMethod1; Button tvPay; ExecutorService executorService = Executors.newSingleThreadExecutor(); private AMSPaymentElement checkout; @SuppressLint({"SetTextI18n", "MissingInflatedId"}) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); paymentMethod1 = findViewById(R.id.payment_method_1); ((TextView) findViewById(R.id.title)).setText("Element SDK"); tvPay = findViewById(R.id.tv_pay); createPaymentMethodView(paymentMethod1, new PaymentMethodView(R.drawable.ic_sdk, "Element Payment", "Payment", "USD", "980.80")); tvPay.setEnabled(selectPayment == null); // Step 1: Preload SDK as early as possible to speed up later rendering. preloadSDK(); tvPay.setOnClickListener(view -> { startPayment(); }); } private void createPaymentMethodView(RadioButton radioButton, PaymentMethodView paymentMethodView) { Drawable image = ContextCompat.getDrawable(this, paymentMethodView.getDrawableResId()); if (image == null) return; image.setBounds(0, 0, 120, 120); radioButton.setCompoundDrawables(image, null, null, null); radioButton.setText(paymentMethodView.getTitle()); radioButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { selectPayment = paymentMethodView; tvPay.setEnabled(true); tvPay.setText(String.format("Pay-%s-%s ", selectPayment.getCurrency(), selectPayment.getAmount())); } }); } String bodyElementPaymentParams() { // You can use Gson or other Json format utils. return "{" + "\\"amountValue\\":\\"" + selectPayment.getAmount() + "\\"," + "\\"currency\\":\\"" + selectPayment.getCurrency() + "\\"" + "}"; } /** * Step 1: Preload the SDK. * It is highly recommended to preload the SDK before creating a payment session, * to improve the rendering speed of the checkout page and reduce the buyer's waiting time. */ private void preloadSDK() { AMSPaymentElement.preload(getApplicationContext()); } /** * Entry of the payment flow. Orchestrates the four integration steps. */ private void startPayment() { if (selectPayment == null) { AlertUtils.showAlertWithMessage(this, "No payment method selected!"); return; } LoadingIndicator.getInstance().showLoading(this); // Step 2: Fetch SessionData from the merchant server. fetchSessionData(sessionData -> { // Step 3: Initialize the Payment Element component instance. createElementInstance(MainActivity.this); // Step 4: Initiate payment. startPay(MainActivity.this, sessionData); }); } /** * Step 2: Fetch the paymentSessionData from the merchant server. */`] }, `Android-Java-ELEMENT-other1`), _jsx(AntomChunk, { language: `java`, steps: [`get-a-payment-session`], chunks: [` private void fetchSessionData(OnSessionDataReady onReady) { executorService.submit(() -> { HttpService.HttpResponse response = HttpService.instance.request(HttpService.Method.POST, "/payment/createSession", bodyElementPaymentParams(), null); runOnUiThread(() -> { LoadingIndicator.getInstance().dismissLoading(); if (response.getErrorMessage() != null) { AlertUtils.showAlertWithMessage(MainActivity.this, response.getErrorMessage()); return; } if (!response.isSuccess()) { AlertUtils.showAlertWithMessage(MainActivity.this, "No data response"); return; } String sessionData = response.getResponseBody().optJSONObject("data").optString("paymentSessionData"); if (sessionData.isEmpty()) { AlertUtils.showAlertWithMessage(MainActivity.this, "Empty paymentSessionData"); return; } onReady.onReady(sessionData); }); }); }`] }, `Android-Java-ELEMENT-code1`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` /** * Step 3: Initialize the Payment Element component instance. * Build the AMSPaymentElement together with its configuration in one place. */`] }, `Android-Java-ELEMENT-other2`), _jsx(AntomChunk, { language: `java`, steps: [`initialize-instantiate-the-sdk`], chunks: [` private void createElementInstance(Activity activity) { AMSPaymentElementConfiguration configuration = new AMSPaymentElementConfiguration(); configuration.setLocale(new Locale("en", "US")); configuration.setOption("sandbox", "true"); configuration.setOption("notRedirectAfterComplete", "false"); String appearance = "{\\"theme\\":\\"night\\",\\"layout\\":{\\"type\\":\\"accordion\\"},\\"variables\\":{\\"content-primary\\":\\"#ff5b4d\\"}}"; configuration.setOption("appearance", appearance); configuration.setOnCreateComponentListener(new OnCreateComponentListener() { @Override public void onCreateComponentCallback(AMSStatusResult statusResult) { if (statusResult.getError() != null) { switch (statusResult.getError().getCode()) { case "UI_STATE_ERROR": AlertUtils.showAlertWithMessage(MainActivity.this, "integration code error, please check the integration code"); break; case "PARAM_INVALID": AlertUtils.showAlertWithMessage(MainActivity.this, "session data invalid, please check the session data"); break; case "INITIALIZE_WEB_TIMEOUT": AlertUtils.showAlertWithMessage(MainActivity.this, "web app timeout, please invoke component again"); break; case "INQUIRY_PAYMENT_SESSION_FAILED": AlertUtils.showAlertWithMessage(MainActivity.this, "The order status is abnormal. Please check the payment status and contact the merchant."); break; default: AlertUtils.showAlertWithMessage(MainActivity.this, "unknown error, please contact support"); break; } } } });`] }, `Android-Java-ELEMENT-code2`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-ELEMENT-other3`), _jsx(AntomChunk, { language: `java`, steps: [`invoke-the-sdk`], chunks: [` configuration.setOnSubmitPayListener(new OnSubmitPayListener() { @Override public void onSubmitPayCallback(AMSStatusResult statusResult) { AMSStatus status = statusResult.getStatus(); AMSResultError error = statusResult.getError(); String code = ""; String message = ""; if (error != null) { code = error.getCode(); message = error.getMessage(); } AlertUtils.showAlertWithMessage(MainActivity.this, "status: " + status + ", code: " + code + ", message: " + message); } });`] }, `Android-Java-ELEMENT-code4`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` checkout = new AMSPaymentElement.Builder(activity, configuration).build(); } /** * Step 4: Initiate payment by invoking createComponent with the sessionData. */`] }, `Android-Java-ELEMENT-other4`), _jsx(AntomChunk, { language: `java`, steps: [`mount-element-component`], chunks: [` private void startPay(Activity activity, String sessionData) { if (checkout == null) { AlertUtils.showAlertWithMessage(this, "Component not initialized"); return; } checkout.createComponent(activity, sessionData); }`] }, `Android-Java-ELEMENT-code3`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` /** * Callback used to bridge the async sessionData fetch to the next step. */ private interface OnSessionDataReady { void onReady(String sessionData); } @Override protected void onNewIntent(Intent intent) { super.onNewIntent(intent); Uri uri = intent.getData(); if (uri != null) { String paymentRequestId = uri.getQueryParameter("paymentRequestId"); onInquiryPaymentAction(paymentRequestId); } } String bodyInquiryPaymentParamsJson(String paymentRequestId) { // You can use Gson or other Json format utils. return "{" + "\\"paymentRequestId\\":\\"" + paymentRequestId + "\\"" + "}"; } private void onInquiryPaymentAction(String paymentRequestId) { LoadingIndicator.getInstance().showLoading(this); executorService.submit(() -> { String resultSuccessMessage = ""; int maxCount = 5; int currentCount = 0; while (currentCount < maxCount) { try { HttpService.HttpResponse response = HttpService.instance.request(HttpService.Method.POST, "/payment/inquiryPayment", bodyInquiryPaymentParamsJson(paymentRequestId), null); if (response.isSuccess()) { InquiryPaymentResult paymentResult = new InquiryPaymentResult( response.getResponseBody().optJSONObject("data"), response.getResponseBody().optString("paymentRequestId"), response.getResponseBody().optString("authState"), response.getResponseBody().optString("status"), response.getResponseBody().optString("message")); JSONObject dataresult = paymentResult.getData().optJSONObject("result"); String resultCode = dataresult != null ? dataresult.optString("resultCode") : null; if ("SUCCESS".equals(resultCode)) { resultSuccessMessage = "Payment Success"; break; } resultSuccessMessage = resultCode; currentCount++; } } catch (Exception e) { runOnUiThread(() -> { LoadingIndicator.getInstance().dismissLoading(); AlertUtils.showAlertWithMessage(MainActivity.this, "Payment Failed"); }); break; } } String finalResultSuccessMessage = resultSuccessMessage; runOnUiThread(() -> { LoadingIndicator.getInstance().dismissLoading(); AlertUtils.showAlertWithMessage(MainActivity.this, finalResultSuccessMessage); }); }); } } `] }, `Android-Java-ELEMENT-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/android/java/AndroidManifest.xml', when: { platform: 'Android', client: 'Java', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/AndroidManifest.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`

`] }, `Android-Java-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/android/java/Common.java', when: { platform: 'Android', client: 'Java', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/java/com/antom/payment_element_sdk_java/Common.java', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.payment_element_sdk_java; /** * @author changyi * @CreateDate 2026/3/24 * @Description: */ import android.app.Activity; import android.app.Dialog; import android.content.Context; import android.content.DialogInterface; import android.util.Log; import android.view.Window; import android.view.WindowManager; import android.widget.ProgressBar; import androidx.annotation.DrawableRes; import androidx.appcompat.app.AlertDialog; import org.json.JSONObject; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.OutputStream; import java.net.HttpURLConnection; import java.net.URL; import java.net.URLEncoder; import java.nio.charset.StandardCharsets; import java.util.Map; public class Common { static public class AlertUtils { public static void showAlertWithMessage(Activity context, String message) { if (context == null || context.isFinishing() || (context.isDestroyed())) { return; } new AlertDialog.Builder(context) .setMessage(message) .setCancelable(true) .setPositiveButton("OK", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { dialog.dismiss(); } }) .show(); } } public static class HttpService { public static final String TAG = "HttpInfo"; public static final HttpService instance = new HttpService(); private static final String HOST_URL = "http://localhost:8080"; /** * Synchronous call running in a thread */ public HttpResponse request(Method method, String url, String body, Map requestParam) { String fullUrl = buildUrl(url, requestParam); HttpURLConnection connection = null; try { // Create the connection Log.d(TAG, "Request URL: " + fullUrl); Log.d(TAG, "Request Method: " + method); if (body != null) { Log.d(TAG, "Request Body: " + body); } URL urlObj = new URL(fullUrl); connection = (HttpURLConnection) urlObj.openConnection(); connection.setRequestMethod(method.name()); connection.setRequestProperty("Content-Type", "application/json; charset=UTF-8"); connection.setDoOutput(true); // To send request body // If POST method and body is provided if (method == Method.POST && body != null) { try (OutputStream os = connection.getOutputStream()) { byte[] input = body.getBytes(StandardCharsets.UTF_8); os.write(input, 0, input.length); } } // Get the response int responseCode = connection.getResponseCode(); String responseMessage = connection.getResponseMessage(); StringBuilder responseBody = new StringBuilder(); try (BufferedReader in = new BufferedReader(new InputStreamReader( responseCode >= 200 && responseCode < 300 ? connection.getInputStream() : connection.getErrorStream(), StandardCharsets.UTF_8))) { String line; while ((line = in.readLine()) != null) { responseBody.append(line); } } Log.d(TAG, "Response Code: " + responseCode); Log.d(TAG, "Response Message: " + responseMessage); Log.d(TAG, "Response Body: " + responseBody); if (responseCode == HttpURLConnection.HTTP_OK) { JSONObject jsonObject = new JSONObject(responseBody.toString()); return new HttpResponse(jsonObject); } else { return new HttpResponse(responseMessage.isEmpty() ? "Failed" : responseMessage); } } catch (Exception e) { e.printStackTrace(); return new HttpResponse(e.getMessage() != null ? e.getMessage() : "Unknown exception"); } finally { if (connection != null) { connection.disconnect(); } } } private String buildUrl(String url, Map params) { StringBuilder urlBuilder = new StringBuilder(HOST_URL).append(url); if (params != null && !params.isEmpty()) { urlBuilder.append("?"); for (Map.Entry entry : params.entrySet()) { try { urlBuilder.append(URLEncoder.encode(entry.getKey(), StandardCharsets.UTF_8.toString())) .append("=") .append(URLEncoder.encode(entry.getValue(), StandardCharsets.UTF_8.toString())) .append("&"); } catch (IOException e) { e.printStackTrace(); } } urlBuilder.setLength(urlBuilder.length() - 1); // Remove the trailing "&" } return urlBuilder.toString(); } public enum Method { POST, GET } public static class HttpResponse { private final JSONObject responseBody; private final String errorMessage; public HttpResponse(JSONObject responseBody) { this.responseBody = responseBody; this.errorMessage = null; // 成功响应时没有错误信息 } public HttpResponse(String errorMessage) { this.responseBody = null; // 失败响应时没有响应体 this.errorMessage = errorMessage; } public boolean isSuccess() { return responseBody != null; } public JSONObject getResponseBody() { return responseBody; } public String getErrorMessage() { return errorMessage; } } } public static class InquiryPaymentResult { private final JSONObject data; private final String paymentRequestId; private final String authState; private final String status; private final String message; public InquiryPaymentResult(JSONObject data, String paymentRequestId, String authState, String status, String message) { this.data = data; this.paymentRequestId = paymentRequestId; this.authState = authState; this.status = status; this.message = message; } public JSONObject getData() { return data; } public String getPaymentRequestId() { return paymentRequestId; } public String getAuthState() { return authState; } public String getMessage() { return message; } public String getStatus() { return status; } } public static class LoadingIndicator { private static LoadingIndicator instance; private Dialog loadingDialog; private LoadingIndicator() { } public static LoadingIndicator getInstance() { if (instance == null) { instance = new LoadingIndicator(); } return instance; } public void showLoading(Context context) { if (loadingDialog == null) { loadingDialog = new Dialog(context); loadingDialog.setTitle("Loading..."); loadingDialog.requestWindowFeature(Window.FEATURE_NO_TITLE); loadingDialog.setContentView(new ProgressBar(context)); loadingDialog.setCancelable(false); Window window = loadingDialog.getWindow(); if (window != null) { window.setLayout(WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT); window.setBackgroundDrawableResource(android.R.color.transparent); // 可选，设置背景透明 } } loadingDialog.show(); } public void dismissLoading() { if (loadingDialog != null && loadingDialog.isShowing()) { loadingDialog.dismiss(); } } } public static class PaymentMethodView { @DrawableRes private final int drawableResId; private final String title; private final String paymentMethodCode; private final String currency; private final String amount; public PaymentMethodView( @DrawableRes int drawableResId, String title, String paymentMethodCode, String currency, String amount ) { this.drawableResId = drawableResId; this.title = title; this.paymentMethodCode = paymentMethodCode; this.currency = currency; this.amount = amount; } public int getDrawableResId() { return drawableResId; } public String getTitle() { return title; } public String getAmount() { return amount; } public String getCurrency() { return currency; } public String getPaymentMethodCode() { return paymentMethodCode; } } } `] }, `Android-Java-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/android/java/pay_btn_bg.xml', when: { platform: 'Android', client: 'Java', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/drawable/pay_btn_bg.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/android/java/ic_launcher_foreground.xml', when: { platform: 'Android', client: 'Java', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/drawable/ic_launcher_foreground.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/android/java/radiobtn_bg.xml', when: { platform: 'Android', client: 'Java', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/drawable/radiobtn_bg.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/android/java/input_bg.xml', when: { platform: 'Android', client: 'Java', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/drawable/input_bg.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/android/java/ic_launcher_background.xml', when: { platform: 'Android', client: 'Java', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/drawable/ic_launcher_background.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/android/java/activity_main.xml', when: { platform: 'Android', client: 'Java', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/layout/activity_main.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `iOS-Objective-C-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Common.m', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Common.m', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // Common.m // // Created by ant on 2024/11/12. // #import "Common.h" #import "UIKit/UIKit.h" static NSString * const HOST_URL = @"http://127.0.0.1:8080"; @implementation AlterUtils + (void)showAlertWithMessage:(NSString *)message { UIViewController *topViewController = [self topViewController]; if (topViewController) { UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Tip" message:message preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"Close" style:UIAlertActionStyleDefault handler:nil]; [alertController addAction:okAction]; [topViewController presentViewController:alertController animated:YES completion:nil]; } } + (UIViewController *)topViewController { UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController; return [self topViewControllerFrom:rootViewController]; } + (UIViewController *)topViewControllerFrom:(UIViewController *)vc { if ([vc presentedViewController]) { return [self topViewControllerFrom:[vc presentedViewController]]; } else if ([vc isKindOfClass:[UINavigationController class]]) { UINavigationController *navController = (UINavigationController *)vc; return [self topViewControllerFrom:[navController visibleViewController]]; } else if ([vc isKindOfClass:[UITabBarController class]]) { UITabBarController *tabBarController = (UITabBarController *)vc; return [self topViewControllerFrom:[tabBarController selectedViewController]]; } else { return vc; } } @end @implementation InquiryPaymentResult - (instancetype)initWithData:(NSDictionary *)data paymentRequestId:(NSString *)paymentRequestId authState:(NSString *)authState status:(NSString *)status message:(NSString *)message { self = [super init]; if (self) { _data = data; _paymentRequestId = [paymentRequestId copy]; _authState = [authState copy]; _status = [status copy]; _message = [message copy]; } return self; } + (instancetype)parseFromJSON:(NSDictionary *)json { NSDictionary *data = json[@"data"]; NSString *paymentRequestId = json[@"paymentRequestId"]; NSString *authState = json[@"authState"]; NSString *status = json[@"status"]; NSString *message = json[@"message"]; return [[self alloc] initWithData:data paymentRequestId:paymentRequestId authState:authState status:status message:message]; } @end @implementation HttpResponse + (instancetype)successWithResponseBody:(NSDictionary *)responseBody { HttpResponse *response = [[HttpResponse alloc] init]; response.responseBody = responseBody; return response; } + (instancetype)failureWithErrorMessage:(NSString *)errorMessage { HttpResponse *response = [[HttpResponse alloc] init]; response.errorMessage = errorMessage; return response; } @end @implementation HttpService - (void)requestWithMethod:(HttpMethod)method urlpath:(NSString *)url body:(NSDictionary *)body requestParam:(NSDictionary *)params completion:(void (^)(HttpResponse *response))completion { NSString *fullUrl = [self buildUrl:url params:params]; NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:fullUrl]]; [request setValue:@"application/json" forHTTPHeaderField:@"Content-Type"]; if (method == HttpMethodPOST) { NSError *error; NSData *jsonData = [NSJSONSerialization dataWithJSONObject:body options:0 error:&error]; if (!jsonData) { completion([HttpResponse failureWithErrorMessage:error.localizedDescription]); return; } [request setHTTPMethod:@"POST"]; [request setHTTPBody:jsonData]; } else { [request setHTTPMethod:@"GET"]; } NSLog(@"Requesting URL: %@", fullUrl); NSLog(@"Request Method: %@", method == HttpMethodPOST ? @"POST" : @"GET"); NSLog(@"Request Headers: %@", request.allHTTPHeaderFields); NSLog(@"Request Body: %@", body); NSURLSessionDataTask *task = [[NSURLSession sharedSession] dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) { if (error) { completion([HttpResponse failureWithErrorMessage:error.localizedDescription]); return; } if (data) { NSError *jsonError; NSDictionary *jsonResponse = [NSJSONSerialization JSONObjectWithData:data options:0 error:&jsonError]; id status = jsonResponse[@"status"]; if (jsonError) { completion([HttpResponse failureWithErrorMessage:jsonError.localizedDescription]); } else if (![status isEqual:@"success"]){ completion([HttpResponse failureWithErrorMessage:[[NSString alloc]initWithFormat:@"%@,%@",fullUrl,status]]); } else { completion([HttpResponse successWithResponseBody:jsonResponse]); } } else { completion([HttpResponse failureWithErrorMessage:@"No data received"]); } }]; [task resume]; } - (NSString *)buildUrl:(NSString *)url params:(NSDictionary *)params { NSMutableString *urlString = [NSMutableString stringWithFormat:@"%@%@", HOST_URL, url]; if (params.count > 0) { [urlString appendString:@"?"]; NSMutableArray *queryItems = [NSMutableArray array]; for (NSString *key in params.allKeys) { NSString *value = params[key]; NSString *encodedKey = [self urlEncode:key]; NSString *encodedValue = [self urlEncode:value]; [queryItems addObject:[NSString stringWithFormat:@"%@=%@", encodedKey, encodedValue]]; } [urlString appendString:[queryItems componentsJoinedByString:@"&"]]; } return [urlString copy]; } - (NSString *)urlEncode:(NSString *)string { return [string stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]]; } + (instancetype)sharedInstance { static HttpService *sharedInstance = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ sharedInstance = [[self alloc] init]; }); return sharedInstance; } @end @interface LoadingIndicator () @property (strong, nonatomic) UIActivityIndicatorView *activityIndicator; @property (strong, nonatomic) UIView *overlayView; @end @implementation LoadingIndicator + (instancetype)sharedInstance { static LoadingIndicator *sharedInstance = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ sharedInstance = [[self alloc] init]; }); return sharedInstance; } - (void)showLoadingInView:(UIView *)view { if (!self.overlayView) { self.overlayView = [[UIView alloc] initWithFrame:view.bounds]; self.overlayView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.3]; self.activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite]; self.activityIndicator.center = self.overlayView.center; [self.overlayView addSubview:self.activityIndicator]; } [self.activityIndicator startAnimating]; [view addSubview:self.overlayView]; self.overlayView.alpha = 0.0; [UIView animateWithDuration:0.3 animations:^{ self.overlayView.alpha = 1.0; }]; } - (void)dismissLoading { [UIView animateWithDuration:0.3 animations:^{ self.overlayView.alpha = 0.0; } completion:^(BOOL finished) { [self.activityIndicator stopAnimating]; [self.overlayView removeFromSuperview]; self.overlayView = nil; self.activityIndicator = nil; }]; } @end @implementation PaymentMethodView - (instancetype)initWithIcon:(NSString *)icon title:(NSString *)title paymentMethodCode:(NSString *)paymentMethodCode currency:(NSString *)currency amount:(NSString*)amount { self = [super init]; if (self) { _icon = icon; _title = title; _paymentMethodCode = paymentMethodCode; _currency = currency; _amount = amount; } return self; } -(NSString*)formatAmount { return [[NSString alloc]initWithFormat:@"%@ %@",self.currency,self.amount]; } @end @implementation PaymentMethodViewCell -(void)awakeFromNib{ [super awakeFromNib]; self.selectionStyle = UITableViewCellSelectionStyleNone; if (@available(iOS 13.0, *)) { [_radioButton setImage:[UIImage systemImageNamed:@"circle"] forState:UIControlStateNormal]; [_radioButton setImage:[UIImage systemImageNamed:@"checkmark.circle"] forState:UIControlStateSelected]; } else { //TODO: custom image } } - (void)configureWithPaymentMethod:(PaymentMethodView *)paymentMethod selected:(BOOL)selected { _paymentMethod = paymentMethod; // Set the radio button state _radioButton.selected = selected; self.iconImage.image = [ImageBase64Converter base64ToImage:paymentMethod.icon]; self.title.text = [paymentMethod title]; } @end @implementation ImageBase64Converter + (NSString *)imageToBase64:(UIImage *)image { NSData *imageData = UIImagePNGRepresentation(image); if (!imageData) { return nil; } return [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength]; } + (UIImage *)base64ToImage:(NSString *)base64String { NSData *imageData = [[NSData alloc] initWithBase64EncodedString:base64String options:NSDataBase64DecodingIgnoreUnknownCharacters]; if (!imageData) { return nil; } return [UIImage imageWithData:imageData]; } @end @implementation CALayer (BorderUIColor) - (UIColor *)borderUIColor { return [UIColor colorWithCGColor:self.borderColor]; } - (void)setBorderUIColor:(UIColor *)borderUIColor { self.borderColor = borderUIColor.CGColor; } @end `] }, `iOS-Objective-C-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/AppDelegate.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/AppDelegate.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // AppDelegate.h // cashierpayment_api_objc // // Created by ant on 2024/9/27. // #import @interface AppDelegate : UIResponder @property (strong, nonatomic) UIWindow * window; @end `] }, `iOS-Objective-C-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Common.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Common.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // Common.h // // Created by ant on 2024/11/12. // #import #import "UIKit/UIKit.h" NS_ASSUME_NONNULL_BEGIN @interface AlterUtils : NSObject + (void)showAlertWithMessage:(NSString *)message; @end @interface InquiryPaymentResult : NSObject @property (nonatomic, strong, readonly) NSDictionary *data; @property (nonatomic, copy, readonly) NSString *paymentRequestId; @property (nonatomic, copy, readonly) NSString *authState; @property (nonatomic, copy, readonly) NSString *status; @property (nonatomic, copy, readonly) NSString *message; - (instancetype)initWithData:(NSDictionary *)data paymentRequestId:(NSString *)paymentRequestId authState:(NSString *)authState status:(NSString *)status message:(NSString *)message; // 解析方法 + (instancetype)parseFromJSON:(NSDictionary *)json; @end @interface HttpResponse : NSObject @property (nonatomic, strong) NSDictionary *responseBody; @property (nonatomic, strong) NSString *errorMessage; + (instancetype)successWithResponseBody:(NSDictionary *)responseBody; + (instancetype)failureWithErrorMessage:(NSString *)errorMessage; @end typedef NS_ENUM(NSInteger, HttpMethod) { HttpMethodGET, HttpMethodPOST }; @interface HttpService : NSObject - (void)requestWithMethod:(HttpMethod)method urlpath:(NSString *)url body:(NSDictionary *)body requestParam:(NSDictionary *)params completion:(void (^)(HttpResponse *response))completion; + (instancetype)sharedInstance; @end @interface LoadingIndicator : NSObject + (instancetype)sharedInstance; - (void)showLoadingInView:(UIView *)view; - (void)dismissLoading; @end @interface PaymentMethodView : NSObject @property (nonatomic, copy) NSString *icon; @property (nonatomic, copy) NSString *title; @property (nonatomic, copy) NSString *paymentMethodCode; @property (nonatomic, copy) NSString *currency; @property (nonatomic, copy) NSString *amount; - (instancetype)initWithIcon:(NSString *)icon title:(NSString *)title paymentMethodCode:(NSString *)paymentMethodCode currency:(NSString *)currency amount:(NSString*)amount; -(NSString*)formatAmount; @end @class PaymentMethodView; @interface PaymentMethodViewCell : UITableViewCell @property (nonatomic, strong) PaymentMethodView *paymentMethod; @property (weak, nonatomic) IBOutlet UIButton *radioButton; @property (weak, nonatomic) IBOutlet UILabel *title; @property (weak, nonatomic) IBOutlet UIImageView *iconImage; - (void)configureWithPaymentMethod:(PaymentMethodView *)paymentMethod selected:(BOOL)selected; @end @interface ImageBase64Converter : NSObject + (NSString *)imageToBase64:(UIImage *)image; + (UIImage *)base64ToImage:(NSString *)base64String; @end NS_ASSUME_NONNULL_END `] }, `iOS-Objective-C-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/PaymentMethodViewCell.xib', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/PaymentMethodViewCell.xib', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `iOS-Objective-C-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Info.plist', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Info.plist', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` NSAppTransportSecurity NSAllowsArbitraryLoads CFBundleURLTypes CFBundleURLSchemes cashierapi `] }, `iOS-Objective-C-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/ViewController.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/ViewController.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // ViewController.h // cashierpayment_api_objc // // Created by ant on 2024/9/27. // #import @interface ViewController : UIViewController @end `] }, `iOS-Objective-C-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/ViewController.m', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/ViewController.m', downloadOnly: false, steps: [`get-a-payment-session`, `initialize-instantiate-the-sdk`, `mount-element-component`, `invoke-the-sdk`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`#import "ViewController.h" #import "Common.h" #import #import @interface ViewController () @property(nonatomic,weak) IBOutlet UILabel *titleLabel; @property(nonatomic,weak) IBOutlet UILabel *tipLabel; @property (nonatomic, strong) UITableView *tableView; @property (nonatomic, strong) NSMutableArray *paymentMethods; @property (nonatomic, assign) NSInteger selectedIndex; @property (nonatomic,strong) PaymentMethodView *selectMethod; @property (weak, nonatomic) IBOutlet UIButton *btnCheckout; @end @implementation ViewController - (void)updateCheckoutDisplay:(PaymentMethodView *)selectMethod { [self.btnCheckout setEnabled: _selectMethod == nil ? NO : YES]; [self.btnCheckout setBackgroundColor: _selectMethod == nil ? [UIColor grayColor] : [UIColor blueColor]]; NSString *title = _selectMethod == nil ? @"Pay" : [[NSString alloc]initWithFormat:@"Pay %@", [selectMethod formatAmount]]; [self.btnCheckout setTitle:title forState:UIControlStateNormal]; } -(void)setSelectMethod:(PaymentMethodView *)selectMethod { _selectMethod = selectMethod; [self updateCheckoutDisplay:selectMethod]; } -(NSMutableArray*)paymentMethods { if (_paymentMethods == nil) { _paymentMethods = [NSMutableArray arrayWithCapacity:0]; [_paymentMethods addObject: [[PaymentMethodView alloc]initWithIcon:@"Pay" title:@"Element Payment" paymentMethodCode:@"Payment" currency:@"HKD" amount:@"980.80"]]; }; return _paymentMethods; } -(UITableView *)tableView { if (_tableView == nil) { _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0,CGRectGetMaxY(self.tipLabel.frame) + 20, [UIScreen mainScreen].bounds.size.width, 300)]; [_tableView registerNib:[UINib nibWithNibName:@"PaymentMethodViewCell" bundle:nil] forCellReuseIdentifier:@"PaymentMethodViewCell"]; _tableView.delegate = self; _tableView.dataSource = self; _tableView.separatorStyle = UITableViewCellSeparatorStyleNone; } return _tableView; } - (void)viewDidLoad { [super viewDidLoad]; [self setUpView]; } -(void)setUpView { self.selectedIndex = -1; [self.view addSubview:self.tableView]; [self.btnCheckout addTarget:self action:@selector(paymentElement) forControlEvents:UIControlEventTouchUpInside]; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.paymentMethods.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { PaymentMethodViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PaymentMethodViewCell" forIndexPath:indexPath]; PaymentMethodView *paymentMethod = self.paymentMethods[indexPath.row]; BOOL isSelected = (indexPath.row == self.selectedIndex); [cell configureWithPaymentMethod:paymentMethod selected:isSelected]; return cell; } -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 100; } - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { if (self.selectedIndex != indexPath.row) { self.selectedIndex = indexPath.row; [tableView reloadData]; self.selectMethod = self.paymentMethods[self.selectedIndex]; } } - (NSDictionary *)dicWithPaymethod:(PaymentMethodView*)paymethod { return @{ @"amountValue":paymethod.amount, @"currency":paymethod.currency }; } `] }, `iOS-Objective-C-ELEMENT-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-a-payment-session`], chunks: [`- (void)paymentElement { if (self.selectMethod == nil) { [AlterUtils showAlertWithMessage:@"Please choose your method "]; return; } [[LoadingIndicator sharedInstance] showLoadingInView:self.view]; [[AMSPaymentElement shared] preload]; [[HttpService sharedInstance]requestWithMethod:HttpMethodPOST urlpath:@"/payment/createSession" body:[self dicWithPaymethod:self.selectMethod] requestParam:nil completion:^(HttpResponse *response) { dispatch_async(dispatch_get_main_queue(), ^{ [[LoadingIndicator sharedInstance]dismissLoading]; if (response.errorMessage) { NSLog(@"Antom --- Error: %@", response.errorMessage); [AlterUtils showAlertWithMessage:response.errorMessage]; } else { NSLog(@"Antom --- Response: %@", response.responseBody); if (response.responseBody[@"data"][@"paymentSessionData"] != nil) { NSString *sessionData = (NSString*)response.responseBody[@"data"][@"paymentSessionData"]; [self createAMSCheckout:sessionData]; } } }); }]; }`] }, `iOS-Objective-C-ELEMENT-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` -(void)createAMSCheckout:(NSString*)sessionData {`] }, `iOS-Objective-C-ELEMENT-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`initialize-instantiate-the-sdk`], chunks: [` AMSPaymentElementConfiguration *componentConfig = [AMSPaymentElementConfiguration new]; componentConfig.locale = @"en_US"; componentConfig.options = @{ @"sandbox":@"true", @"showLoading": @"true" }; [[AMSPaymentElement shared] initConfiguration:componentConfig completion:^(AMSStatusResult * _Nonnull result) { // 处理initConfiguration用法阶段错误事件 if (result.error) { // 处理失败 if ([result.error.code isEqualToString:@"UI_STATE_ERROR"]) { NSLog(@"integration code error, please check the integration code"); } else if ([result.error.code isEqualToString:@"INQUIRY_PAYMENT_SESSION_FAILED"]) { NSLog(@"The order status is abnormal. Please check the payment status and contact the merchant."); } else { NSLog(@"unknown error, please contact support"); } } else { // 处理成功 } }]; [AMSPaymentElement shared].paymentDelegate = self;`] }, `iOS-Objective-C-ELEMENT-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [`mount-element-component`], chunks: [` // 回调事件码方式 createComponent用法 [[AMSPaymentElement shared] createComponent:sessionData completion:^(AMSStatusResult * _Nonnull result) { if (result.error) { // 处理失败 if ([result.error.code isEqualToString:@"UI_STATE_ERROR"]) { NSLog(@"integration code error, please check the integration code"); } else if ([result.error.code isEqualToString:@"PARAM_INVALID"]) { NSLog(@"session data invalid, please check the session data"); } else if ([result.error.code isEqualToString:@"INITIALIZE_WEB_TIMEOUT"]) { NSLog(@"web app timeout, please invoke component again"); } else { NSLog(@"unknown error, please contact support"); } } else { // 处理成功 } }];`] }, `iOS-Objective-C-ELEMENT-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`} -(void)onEventCallback:(NSString *)eventCode eventResult:(AMSEventResult *)eventResult { // The payment success result will not be returned by this callback function. A redirection to the payment success result page that you specified will take place instead. // When integrating with AlipayCN, if you invoke processOrderWithPaymentResult, you will receive the payment event codes returned by onEventCallback. If you do not invoke processOrderWithPaymentResult, payment event codes will not be returned, but you can query the payment result by calling the inquiryPayment API on the server. if ([eventCode isEqualToString:@"SDK_PAYMENT_CANCEL"]) { NSLog(@"The buyer canceled the payment (the buyer exited the payment page without submitting the order). You can re-invoke the SDK using paymentSessionData within its validity period; If it has expired, you need to initiate a new createPaymentSession (EasySafePay) request."); } else if ([eventCode isEqualToString:@"SDK_CALL_URL_ERROR"]) { NSLog(@"Failed to redirect to the checkout page of the payment method, or failed to redirect to the merchant page. Check whether the paymentRedirectUrl parameter is correctly passed when calling the createPaymentSession (EasySafePay) request. If frequent redirection exceptions occur, contact Antom Technical Support to troubleshoot redirection or cross-application calling issues."); } else if ([eventCode isEqualToString:@"SDK_CREATEPAYMENT_PARAMETER_ERROR"]) { NSLog(@"The parameters passed to the createComponent method are not correct. Check if the parameters are correct and re-initialize the component."); } else { NSLog(@"eventCode%@ eventResult%@", eventCode, eventResult); } } #pragma AMSPaymentProtocol`] }, `iOS-Objective-C-ELEMENT-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`invoke-the-sdk`], chunks: [`// 回调事件码方式处理submit阶段事件码 - (void)onSubmitPayCallback:(AMSStatusResult *)eventResult { AMSStatusResultType statusType = eventResult.status; AMSResultError *error = eventResult.error; switch (statusType) { case AMSStatusResultTypeNONE: if (error && [@"USER_CLOSE_PAYMENT" isEqualToString:error.code]) { NSLog(@"The payment page is closed by the user"); } break; case AMSStatusResultTypePROCESSING: if (error && error.code) { if ([@"PAYMENT_IN_PROCESS" isEqualToString:error.code]) { NSLog(@"payment is in processing, please try polling the payment result from the server"); } else if ([@"USER_CANCELED" isEqualToString:error.code]) { NSLog(@"user cancelled the payment process, please try invoke createComponent again"); } else if ([@"UNKNOWN_EXCEPTION" isEqualToString:error.code]) { NSLog(@"unknown exception, please contact support"); } else if ([@"PAYMENT_RESULT_TIMEOUT" isEqualToString:error.code]) { NSLog(@"get payment result timeout, please try polling the payment result from the server"); } } break; case AMSStatusResultTypeCANCELLED: // fall through case AMSStatusResultTypeSUCCESS: NSLog(@"payment cancelled or success, do nothing"); break; case AMSStatusResultTypeFAIL: if (error && error.code) { if ([@"ORDER_IS_CANCELLED" isEqualToString:error.code]) { NSLog(@"the merchant has proactively canceled the order, please check on your own."); } else if ([@"ORDER_IS_CLOSED" isEqualToString:error.code] || [@"INQUIRY_PAYMENT_SESSION_FAILED" isEqualToString:error.code]) { NSLog(@"the order has timed out and is closed, please re-initiate payment using a new paymentRequestId."); } else { NSLog(@"unknown error, please contact support"); } } break; default: break; } }`] }, `iOS-Objective-C-ELEMENT-code4`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` @end `] }, `iOS-Objective-C-ELEMENT-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/AppDelegate.m', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/AppDelegate.m', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`#import "AppDelegate.h" #import "Common.h" @implementation AppDelegate -(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options{ return YES; } @end `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Main.storyboard', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Base.lproj/Main.storyboard', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Common.m', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Common.m', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // Common.m // // Created by ant on 2024/11/12. // #import "Common.h" #import "UIKit/UIKit.h" static NSString * const HOST_URL = @"http://127.0.0.1:8080"; @implementation AlterUtils + (void)showAlertWithMessage:(NSString *)message { UIViewController *topViewController = [self topViewController]; if (topViewController) { UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Tip" message:message preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"Close" style:UIAlertActionStyleDefault handler:nil]; [alertController addAction:okAction]; [topViewController presentViewController:alertController animated:YES completion:nil]; } } + (UIViewController *)topViewController { UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController; return [self topViewControllerFrom:rootViewController]; } + (UIViewController *)topViewControllerFrom:(UIViewController *)vc { if ([vc presentedViewController]) { return [self topViewControllerFrom:[vc presentedViewController]]; } else if ([vc isKindOfClass:[UINavigationController class]]) { UINavigationController *navController = (UINavigationController *)vc; return [self topViewControllerFrom:[navController visibleViewController]]; } else if ([vc isKindOfClass:[UITabBarController class]]) { UITabBarController *tabBarController = (UITabBarController *)vc; return [self topViewControllerFrom:[tabBarController selectedViewController]]; } else { return vc; } } @end @implementation InquiryPaymentResult - (instancetype)initWithData:(NSDictionary *)data paymentRequestId:(NSString *)paymentRequestId authState:(NSString *)authState status:(NSString *)status message:(NSString *)message { self = [super init]; if (self) { _data = data; _paymentRequestId = [paymentRequestId copy]; _authState = [authState copy]; _status = [status copy]; _message = [message copy]; } return self; } + (instancetype)parseFromJSON:(NSDictionary *)json { NSDictionary *data = json[@"data"]; NSString *paymentRequestId = json[@"paymentRequestId"]; NSString *authState = json[@"authState"]; NSString *status = json[@"status"]; NSString *message = json[@"message"]; return [[self alloc] initWithData:data paymentRequestId:paymentRequestId authState:authState status:status message:message]; } @end @implementation HttpResponse + (instancetype)successWithResponseBody:(NSDictionary *)responseBody { HttpResponse *response = [[HttpResponse alloc] init]; response.responseBody = responseBody; return response; } + (instancetype)failureWithErrorMessage:(NSString *)errorMessage { HttpResponse *response = [[HttpResponse alloc] init]; response.errorMessage = errorMessage; return response; } @end @implementation HttpService - (void)requestWithMethod:(HttpMethod)method urlpath:(NSString *)url body:(NSDictionary *)body requestParam:(NSDictionary *)params completion:(void (^)(HttpResponse *response))completion { NSString *fullUrl = [self buildUrl:url params:params]; NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:fullUrl]]; [request setValue:@"application/json" forHTTPHeaderField:@"Content-Type"]; if (method == HttpMethodPOST) { NSError *error; NSData *jsonData = [NSJSONSerialization dataWithJSONObject:body options:0 error:&error]; if (!jsonData) { completion([HttpResponse failureWithErrorMessage:error.localizedDescription]); return; } [request setHTTPMethod:@"POST"]; [request setHTTPBody:jsonData]; } else { [request setHTTPMethod:@"GET"]; } NSLog(@"Requesting URL: %@", fullUrl); NSLog(@"Request Method: %@", method == HttpMethodPOST ? @"POST" : @"GET"); NSLog(@"Request Headers: %@", request.allHTTPHeaderFields); NSLog(@"Request Body: %@", body); NSURLSessionDataTask *task = [[NSURLSession sharedSession] dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) { if (error) { completion([HttpResponse failureWithErrorMessage:error.localizedDescription]); return; } if (data) { NSError *jsonError; NSDictionary *jsonResponse = [NSJSONSerialization JSONObjectWithData:data options:0 error:&jsonError]; id status = jsonResponse[@"status"]; if (jsonError) { completion([HttpResponse failureWithErrorMessage:jsonError.localizedDescription]); } else if (![status isEqual:@"success"]){ completion([HttpResponse failureWithErrorMessage:[[NSString alloc]initWithFormat:@"%@,%@",fullUrl,status]]); } else { completion([HttpResponse successWithResponseBody:jsonResponse]); } } else { completion([HttpResponse failureWithErrorMessage:@"No data received"]); } }]; [task resume]; } - (NSString *)buildUrl:(NSString *)url params:(NSDictionary *)params { NSMutableString *urlString = [NSMutableString stringWithFormat:@"%@%@", HOST_URL, url]; if (params.count > 0) { [urlString appendString:@"?"]; NSMutableArray *queryItems = [NSMutableArray array]; for (NSString *key in params.allKeys) { NSString *value = params[key]; NSString *encodedKey = [self urlEncode:key]; NSString *encodedValue = [self urlEncode:value]; [queryItems addObject:[NSString stringWithFormat:@"%@=%@", encodedKey, encodedValue]]; } [urlString appendString:[queryItems componentsJoinedByString:@"&"]]; } return [urlString copy]; } - (NSString *)urlEncode:(NSString *)string { return [string stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]]; } + (instancetype)sharedInstance { static HttpService *sharedInstance = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ sharedInstance = [[self alloc] init]; }); return sharedInstance; } @end @interface LoadingIndicator () @property (strong, nonatomic) UIActivityIndicatorView *activityIndicator; @property (strong, nonatomic) UIView *overlayView; @end @implementation LoadingIndicator + (instancetype)sharedInstance { static LoadingIndicator *sharedInstance = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ sharedInstance = [[self alloc] init]; }); return sharedInstance; } - (void)showLoadingInView:(UIView *)view { if (!self.overlayView) { self.overlayView = [[UIView alloc] initWithFrame:view.bounds]; self.overlayView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.3]; self.activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite]; self.activityIndicator.center = self.overlayView.center; [self.overlayView addSubview:self.activityIndicator]; } [self.activityIndicator startAnimating]; [view addSubview:self.overlayView]; self.overlayView.alpha = 0.0; [UIView animateWithDuration:0.3 animations:^{ self.overlayView.alpha = 1.0; }]; } - (void)dismissLoading { [UIView animateWithDuration:0.3 animations:^{ self.overlayView.alpha = 0.0; } completion:^(BOOL finished) { [self.activityIndicator stopAnimating]; [self.overlayView removeFromSuperview]; self.overlayView = nil; self.activityIndicator = nil; }]; } @end @implementation PaymentMethodView - (instancetype)initWithIcon:(NSString *)icon title:(NSString *)title paymentMethodCode:(NSString *)paymentMethodCode currency:(NSString *)currency amount:(NSString*)amount { self = [super init]; if (self) { _icon = icon; _title = title; _paymentMethodCode = paymentMethodCode; _currency = currency; _amount = amount; } return self; } -(NSString*)formatAmount { return [[NSString alloc]initWithFormat:@"%@ %@",self.currency,self.amount]; } @end @implementation PaymentMethodViewCell -(void)awakeFromNib{ [super awakeFromNib]; self.selectionStyle = UITableViewCellSelectionStyleNone; if (@available(iOS 13.0, *)) { [_radioButton setImage:[UIImage systemImageNamed:@"circle"] forState:UIControlStateNormal]; [_radioButton setImage:[UIImage systemImageNamed:@"checkmark.circle"] forState:UIControlStateSelected]; } else { //TODO: custom image } } - (void)configureWithPaymentMethod:(PaymentMethodView *)paymentMethod selected:(BOOL)selected { _paymentMethod = paymentMethod; // Set the radio button state _radioButton.selected = selected; self.iconImage.image = [ImageBase64Converter base64ToImage:paymentMethod.icon]; self.title.text = [paymentMethod title]; } @end @implementation ImageBase64Converter + (NSString *)imageToBase64:(UIImage *)image { NSData *imageData = UIImagePNGRepresentation(image); if (!imageData) { return nil; } return [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength]; } + (UIImage *)base64ToImage:(NSString *)base64String { NSData *imageData = [[NSData alloc] initWithBase64EncodedString:base64String options:NSDataBase64DecodingIgnoreUnknownCharacters]; if (!imageData) { return nil; } return [UIImage imageWithData:imageData]; } @end @implementation CALayer (BorderUIColor) - (UIColor *)borderUIColor { return [UIColor colorWithCGColor:self.borderColor]; } - (void)setBorderUIColor:(UIColor *)borderUIColor { self.borderColor = borderUIColor.CGColor; } @end `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/AppDelegate.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/AppDelegate.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`#import @interface AppDelegate : UIResponder @property (strong, nonatomic) UIWindow *window; @end `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/SceneDelegate.m', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/SceneDelegate.m', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`#import "SceneDelegate.h" #import "Common.h" @interface SceneDelegate () @end @implementation SceneDelegate - (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {`, ' // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.', ' // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.', ' // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).', ` NSURL *url = connectionOptions.URLContexts.allObjects.firstObject.URL; if (url) { NSLog(@"SceneDelegate - 冷启动URL: %@", url); [self handleRedirectUrl:url]; } } - (void)scene:(UIScene *)scene openURLContexts:(NSSet *)URLContexts { NSLog(@"SceneDelegate - openURLContexts called"); for (UIOpenURLContext *context in URLContexts) { NSURL *url = context.URL; NSLog(@"SceneDelegate - 接收到URL: %@", url); [self handleRedirectUrl:url]; } } - (void)sceneDidDisconnect:(UIScene *)scene { // Called as the scene is being released by the system. // This occurs shortly after the scene enters the background, or when its session is discarded. // Release any resources associated with this scene that can be re-created the next time the scene connects.`, ' // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).', `} - (void)sceneDidBecomeActive:(UIScene *)scene { // Called when the scene has moved from an inactive state to an active state. // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive. } - (void)sceneWillResignActive:(UIScene *)scene { // Called when the scene will move from an active state to an inactive state. // This may occur due to temporary interruptions (ex. an incoming phone call). } - (void)sceneWillEnterForeground:(UIScene *)scene { // Called as the scene transitions from the background to the foreground. // Use this method to undo the changes made on entering the background. NSLog(@"SceneDelegate - sceneWillEnterForeground called"); } - (void)sceneDidEnterBackground:(UIScene *)scene { // Called as the scene transitions from the foreground to the background. // Use this method to save data, release shared resources, and store enough scene-specific state information // to restore the scene back to its current state. NSLog(@"SceneDelegate - sceneDidEnterBackground called"); } #pragma mark - Custom Methods - (void)handleRedirectUrl:(NSURL *)url { NSURLComponents *components = [NSURLComponents componentsWithURL:url resolvingAgainstBaseURL:NO]; NSMutableDictionary *queryItemsDict = [NSMutableDictionary dictionary]; for (NSURLQueryItem *item in components.queryItems) { queryItemsDict[item.name] = item.value; } NSString *paymentRequestId = queryItemsDict[@"paymentRequestId"]; if (paymentRequestId == nil) { [AlterUtils showAlertWithMessage:@"paymentRequestId can not be nil"]; return; } [self inquiryPaymentProcess:paymentRequestId]; } - (void)inquiryPaymentProcess:(NSString *)paymentRequestId { UIWindow *keyWindow = nil; NSSet *scenes = [UIApplication sharedApplication].connectedScenes; for (UIScene *scene in scenes) { if ([scene isKindOfClass:[UIWindowScene class]]) { UIWindowScene *windowScene = (UIWindowScene *)scene; for (UIWindow *window in windowScene.windows) { if (window.isKeyWindow) { keyWindow = window; break; } } if (keyWindow) break; } } [[LoadingIndicator sharedInstance] showLoadingInView:keyWindow]; [[HttpService sharedInstance] requestWithMethod:HttpMethodPOST urlpath:@"/payment/inquiryPayment" body:@{@"paymentRequestId":paymentRequestId} requestParam:nil completion:^(HttpResponse *response) { dispatch_async(dispatch_get_main_queue(), ^{ [[LoadingIndicator sharedInstance] dismissLoading]; if (response.errorMessage) { NSLog(@"Antom --- Error: %@", response.errorMessage); [AlterUtils showAlertWithMessage:response.errorMessage]; } else { NSLog(@"Antom --- Response: %@", response.responseBody); if ([response.responseBody isKindOfClass:[NSDictionary class]]) { InquiryPaymentResult *inquiryPaymentResult = [InquiryPaymentResult parseFromJSON:response.responseBody]; if (inquiryPaymentResult.data != nil) { NSString *resultCode = [inquiryPaymentResult.data[@"result"] objectForKey:@"resultCode"]; if ([resultCode isEqualToString:@"SUCCESS"]) { dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, 1 * NSEC_PER_SEC); dispatch_after(popTime, dispatch_get_main_queue(), ^{ [AlterUtils showAlertWithMessage:@"Payment Success"]; }); } } else { [AlterUtils showAlertWithMessage:@"inquiryPaymentResult data is empty"]; } } else { [AlterUtils showAlertWithMessage:@"inquiryPayment error"]; } } }); }]; } @end `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Common.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Common.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // Common.h // // Created by ant on 2024/11/12. // #import #import "UIKit/UIKit.h" NS_ASSUME_NONNULL_BEGIN @interface AlterUtils : NSObject + (void)showAlertWithMessage:(NSString *)message; @end @interface InquiryPaymentResult : NSObject @property (nonatomic, strong, readonly) NSDictionary *data; @property (nonatomic, copy, readonly) NSString *paymentRequestId; @property (nonatomic, copy, readonly) NSString *authState; @property (nonatomic, copy, readonly) NSString *status; @property (nonatomic, copy, readonly) NSString *message; - (instancetype)initWithData:(NSDictionary *)data paymentRequestId:(NSString *)paymentRequestId authState:(NSString *)authState status:(NSString *)status message:(NSString *)message; // 解析方法 + (instancetype)parseFromJSON:(NSDictionary *)json; @end @interface HttpResponse : NSObject @property (nonatomic, strong) NSDictionary *responseBody; @property (nonatomic, strong) NSString *errorMessage; + (instancetype)successWithResponseBody:(NSDictionary *)responseBody; + (instancetype)failureWithErrorMessage:(NSString *)errorMessage; @end typedef NS_ENUM(NSInteger, HttpMethod) { HttpMethodGET, HttpMethodPOST }; @interface HttpService : NSObject - (void)requestWithMethod:(HttpMethod)method urlpath:(NSString *)url body:(NSDictionary *)body requestParam:(NSDictionary *)params completion:(void (^)(HttpResponse *response))completion; + (instancetype)sharedInstance; @end @interface LoadingIndicator : NSObject + (instancetype)sharedInstance; - (void)showLoadingInView:(UIView *)view; - (void)dismissLoading; @end @interface PaymentMethodView : NSObject @property (nonatomic, copy) NSString *icon; @property (nonatomic, copy) NSString *title; @property (nonatomic, copy) NSString *paymentMethodCode; @property (nonatomic, copy) NSString *currency; @property (nonatomic, copy) NSString *amount; - (instancetype)initWithIcon:(NSString *)icon title:(NSString *)title paymentMethodCode:(NSString *)paymentMethodCode currency:(NSString *)currency amount:(NSString*)amount; -(NSString*)formatAmount; @end @class PaymentMethodView; @interface PaymentMethodViewCell : UITableViewCell @property (nonatomic, strong) PaymentMethodView *paymentMethod; @property (weak, nonatomic) IBOutlet UIButton *radioButton; @property (weak, nonatomic) IBOutlet UILabel *title; @property (weak, nonatomic) IBOutlet UIImageView *iconImage; - (void)configureWithPaymentMethod:(PaymentMethodView *)paymentMethod selected:(BOOL)selected; @end @interface ImageBase64Converter : NSObject + (NSString *)imageToBase64:(UIImage *)image; + (UIImage *)base64ToImage:(NSString *)base64String; @end NS_ASSUME_NONNULL_END `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/PaymentMethodViewCell.xib', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/PaymentMethodViewCell.xib', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Info.plist', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Info.plist', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` CFBundleURLTypes CFBundleURLSchemes easysafepay aaa CFBundleURLName com.yourcompany.AntomElementSDKiOSDemo NSAppTransportSecurity NSAllowsArbitraryLoads UIApplicationSceneManifest UIApplicationSupportsMultipleScenes UISceneConfigurations UIWindowSceneSessionRoleApplication UISceneConfigurationName Default Configuration UISceneDelegateClassName SceneDelegate UISceneStoryboardFile Main `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/ViewController.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/ViewController.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`#import @interface ViewController : UIViewController @end `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/SceneDelegate.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'Payment Element' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/SceneDelegate.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`#import @interface SceneDelegate : UIResponder @property (strong, nonatomic) UIWindow * window; @end `] }, `iOS-Objective-C-ELEMENT-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/ViewController.m', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/ViewController.m', downloadOnly: false, steps: [`build-the-checkout-page`, `initialize-instantiate-the-sdk`, `get-a-payment-session`, `invoke-the-sdk`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// // ViewController.m // cashierpayment_sdk_objc // // Created by ant on 2024/9/14. // `] }, `iOS-Objective-C-SDK-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`build-the-checkout-page`], chunks: [`#import "ViewController.h" #import "Common.h" #import @interface ViewController () @property(nonatomic,weak) IBOutlet UILabel *titleLabel; @property(nonatomic,weak) IBOutlet UILabel *tipLabel; @property (nonatomic, strong) UITableView *tableView; @property (nonatomic, strong) NSMutableArray *paymentMethods; @property (nonatomic, assign) NSInteger selectedIndex; @property (nonatomic,strong) PaymentMethodView *selectMethod; @property (weak, nonatomic) IBOutlet UIButton *btnCheckout; @end @implementation ViewController - (void)updateCheckoutDisplay:(PaymentMethodView *)selectMethod { [self.btnCheckout setEnabled: _selectMethod == nil ? NO:YES]; [self.btnCheckout setBackgroundColor: _selectMethod == nil ? [UIColor grayColor]: [UIColor blueColor]]; NSString *title = _selectMethod == nil ? @"Pay" : [[NSString alloc]initWithFormat:@"Pay %@", [selectMethod formatAmount]]; [self.btnCheckout setTitle:title forState:UIControlStateNormal]; } -(void)setSelectMethod:(PaymentMethodView *)selectMethod { _selectMethod = selectMethod; [self updateCheckoutDisplay:selectMethod]; } -(NSMutableArray*)paymentMethods { if (_paymentMethods == nil) { _paymentMethods = [NSMutableArray arrayWithCapacity:0]; [_paymentMethods addObject: [[PaymentMethodView alloc]initWithIcon:@"iVBORw0KGgoAAAANSUhEUgAAAHgAAAA1CAYAAACKoi9gAAAAAXNSR0IArs4c6QAABJpJREFUeF7tmr1uE0EQx3fDC8BjUDsFiZDswDOko4YKiYrWdgsFBRWpKZDyDChnCTkUuKDiMeAFyKI5e5zZ9ezX3Z6dLHMSwoK73Zn57X9mdu+0kqvqCOiqvRPnlACufBEIYAFceQQqd08ULIArj0Dl7omCBXDlEajcPVGwAK48ApW7JwoWwJVHoHL3RMECeB0B8/r9G7X8OVWrXw+LxuT8+UJfvpsUHVMG20YgScEt3I9fPgwZN61WSbYMaUONYycF1Zy/bdTl1/GgARg9/qNXnx8NOsd/OHga4MlLw8amWZULmQAuF0syUhpgY3jA1CSAjcDnF/nGBgBPnj7ZqdHNt+9N/iTlnnBtOrQ9Ps/KAXZnQOCpsD2AJ6enM6PM1O+AnjfL5awcuvhI49OT4ILXav827R8wnXF2oVQMtAfw+OTkSmm1VrBRjdZ6gUNT8PrInO1LRRbgO2LTYQHj7CHQCYA5ZdBgL5bXSRkprtHwHXROd2FB6jY3+goX5OL6+qzvfH2eTwqIUaN4DZ6+VGoyuq3D8Bv+uJcPckfANKBcsK02wanbtI6G1I/34T0hwDAfzTr7sqmfglMAmx9KcfAAPFyzzd/tbyZllwC8qX3bum3UuhHDFN/+vK2Pbvrn1IZjWc+RGsyVBm7RDW3TsIBBqVefeHB0ZoCNoPWxbVNBwJyzlqpwIdB0CvCZOo5qzQJMGsNQb8Ap3UrxGTYNCxjBudC4WfHes1e36Rzu6wqYBDNUg321MaRi2sHTsWMp2vecGw5rh2BUgxkkxabUTr1MDcb6C9BSLlA7bKNoZ90BMA2Q63BbN2+OtvtnY8yYpmoEFlIMl57bGhtI0Z1tIoBDNnEZJRTyMoB99dc3M9blTMC4TWphkdq6Azeyd4ZHLUU6WzFQEg2ymxkswErPYbzeNhHAbqMGfrc2JWYrGvb7BZhavmmg9AMzpx2wT0GuKig0TjGgfthnx7Zm1hrOtYkuRAdwrk3D1eCc+gtWcOrtUYNDdS0EcUeVjooxnXN1PVaDvTaFIDr/x6k4ZNPhAUOnjbW64DbJdWzboEQU4YJzFbOuAPyRYy7gJJsYwDk2DQfYrb/0cAPVSv/N7Z7Rsg5NVnQ7RLY9oRSN41jd6xCAndqfcurl2pR7Wte/BgPglAu7Zt8rxkKAd2oXNEFHNw3WVDSVC1TKIoh10VworIOPTVMGNpm/ekrP2dmDFrJXT90alWuy6MEF5xl9fRh7d1wIMJjBvoGCBoicaPmUgIoJBTM3RSfZxKTobWbZbMsOC5gChN8L8n44ReG+14XOu+CcN0buGXLs7Dl1GxIbJ+TuUDYNU4Nz978hz+/AFx0p6k1ZqyXvyT3YcOfuV4MrANyqlh6cBFJlSXBBlaNNm5LSJTXj+GmARy9+73wu6ztT7hqFA30+6zsP7upGiedK2pQGmPtsNveAI+K5fDZbYmnsjpEEGB4z6niizp/Ntp/Pci8Muth4B2pvF7PvyzPJgO+LQ2KnHQEBXPmKEMACuPIIVO6eKFgAVx6Byt0TBQvgyiNQuXuiYAFceQQqd08ULIArj0Dl7omCKwf8DzCaO3LcuVbNAAAAAElFTkSuQmCC" title:@"PAYPAY" paymentMethodCode:@"PAYPAY" currency:@"JPY" amount:@"6000"]]; [_paymentMethods addObject: [[PaymentMethodView alloc]initWithIcon:@"iVBORw0KGgoAAAANSUhEUgAAAMgAAABYCAMAAACH4EjvAAAAdVBMVEVHcEwdqjgcqzjgeykAOJQAesMAb7kAeMQAecQAesMAesMAbr0AYLMAesIAN5TgfCrgfCngfSvgfCoAecTffCoAOJMAN5QAesMAesMAOJMAOJTfgCAAesMAN5MAN5TfgCgAN5MdqjgAeMQAesMAOJQeqjngfSvfiqP2AAAAI3RSTlMAv0A6wMAQf31AaSAw6erofMqkUFdAWpiwfaAQ0NCwIJCGv5yowRUAAAY/SURBVHja7ZqLluI2DIbdJraPbwm5QAKES8cp7/+IlWQTYAamDcueZU/9zxJsx5nVF0lWBsNYUlJSUlJSUlJSUlLSHGn4+f0lGmbhR4nfnsTQ0f625mM0CdVg0yqpLv4Jb+AgPY0C58Vhb4KsdTOAD6zTBsxVpmNMacXRZIPGciPhrHYChrU058uaBj2nNB2YegcSMBstHZSBvOgYRzbbCya6BqAEl3jHNQ4Ihy3OOXhJK40+6tCPpnuPfOoodiRaxJVuyDyHBtoeoTCejKZ2c3VRj8Y3eBNCc4YW5elU1tsfsbmtq8WDtSq+4e0XxlJUUfAr8BSeFedV4HpFUOLT8H/iOJEqaGag8BaOBzx/aFt6z7ItiydoOMw6ZHgHKvgFvzwCEKIFn7CsRKAyQ7IsQ9tO4Ke2rLb4DqMVjJUtzKrj3GoLo2W8E6fs5tf2EPNySmHo9BBhlAfy0lEWp4XskKGl42TqyzkgaFK1aLfYKEtso1FVMK7OTqeWVXVN0yaBC0qcsaguY+VtcHoQP3ck9pjCo2T8qtP7IBf6KBsm0zQ+K76DHYsM7a6xBS8cbBc4UAPI4nA6TGcpjLK6pSklxSRe+jlHVOf1VAks95DmQjnfGch16jTeScN9o0A9gklsSQ8rNZyhX8CbWbF1CPf1HCEUKuQVSABWZWBixmhgQaNoexb90wYCQv/8a8GkS8o7Tz0NDqGOiW3uQ9FBj9B0fAPnDAKbsyILoySbbN8uFpcOeqTCZIbR9hxvmFM1NGoaCQT1lwz5BCK9dgM2OBRA7Xs00UETQBRJ3IIMfrBPgFBqnA7XOdLGTt3WuE7VV86ImHhJ2QYCBKwOj0GE42C+ZuEuA8HgROjrmBjDLYjUztm5IHGxaqdVi6xr47LEFhVEXrWtcV0rQ/aTa0oYqRchx+vTHZcEEIPVAIKeQ5bQk4nDkIKXcyF71JQj1yDwaOO6mSCA0i6oGmyztp3qCHRiwYCz2IUpBxyh8hIaobg8UADhsPAY5OCD78hQAoI0oT9NOhfnfgZhdvCzQX6OLiDcU5EevKVjRyEVCLin0t8hCC1RDVylPT5kieE9QFyMfh6rBxWWPpaXWCpCsfCXuoJSz9aRnwzSWzzqMNDH4wTSxGkSHocjOC0A4K+eZiYlJSUlJSUlJSUlJSX9Eh2Ps6av9vlm+Y4cm3HczJi+H1F32f/645Waz7HbzSFZHwVb7sbVPZC/X6mZHOtxJ8RuXM+7yhS7NwNZAQdjYr+a7Uf7ViCrsXhu53E93gmuXwcCHM9uay+LryTmz1dqhjH23zlu/GVu06R4l3XXFsSxKeDWihza2DrCaw2vVXGkpXZnVgUstzmz+TgWsCZgt9gA4HF8WE20RH39DzVT05cEFO24w9QXcJAlFsy0bAfFZIn2gpUGRhiYK9ZYMfY5FQ7CgR6jwREWreXjpe7Dnz8cvVHvm8v2ifTO4OfYt9N0N5tDFGORr9EesB2rXB5BRrQc35fQWOcrcsURZhR4YgUgG3gt4cKHgcn9fY904hrED0J/5uXzP8A2dIsDCGkCGc8gUPMx7Fj0lMC5ewRZIYjZPCSJe4RK4vcclG20EVoLjCsAwWAyUknf+Q/vnGeikdrAkNFKOyfNE9GVfw9CrCsCMeGpBFohtGjVthBpD0A+QMw77xsWNqJxn03i5oHSMCZxO1oM3muOWwsOwgyPHD+bV8+DFMW4vwdCCZ5fecQGj0Aomun6+yCUI4YJ1wOO6nyv4NYHEIHbDA63q4TD7XcmBGu8Vn5QzTOhdQWSW0r0CLIrLjmCwRVAKEeKkCPrS33/LrTEB218wD/cVZNnEEjwJvRxPYepFndLpJq2un4AhI77CJKvIkjIok0AsUVcra5BHpWSAKLx7t8BwSAyBBKm9k40LwARO6oju2Ip8Jl2A68jmLoGAjQ+F4zGmN0hlcBCGFNcbB4twAEEv85wD4Q5yJcrEI671mcQr59N9u9rzfWyZJfi0+PWnn0HYiBk3D0Q2my/gDS4FkSQ5vlkf1p58fCR2UZjlIGWskwoWF4V/BMGv27a4aauUdNUGFRWhC+imqe+j/pjIPmTF4rX73bmY/68ii8gSr5SM/+q+AF9+btd+lcqfSqUlJSUlJSUlJT0v9Y/hM4IHvM9vasAAAAASUVORK5CYII=" title:@"KONBINI" paymentMethodCode:@"KONBINI" currency:@"JPY" amount:@"6000"]]; [_paymentMethods addObject: [[PaymentMethodView alloc]initWithIcon:@"iVBORw0KGgoAAAANSUhEUgAAAMgAAABYCAMAAACH4EjvAAABO1BMVEVHcEwKktsiUamFxu0mcZ8GnOMgUKkeYZgiT6kjUKkiUKpIvDkXgM02ouAjUKogUasAplAjT6gkpeQZrUghUKgIqE4xeMQgHB8iHSAnl9sJqU0fGx8hUqggU6xMmdYSidMTq0qX1PRCpOAWjNURneIiHh+Oyu9js+YWcMJoruGUzfAUrEoiHiAhHiAiHyBEs51OreVLm9kSh9Jho9oCp0+a0vMkn+FjuekkidGb1PMAplAkSaVOqeISfIEnqLshl4MjUKkFoeYlSqXM4xAgV68Il98dX7UYbb8OjdcaZroRgM4WdMQPh9NQq+REpuIUesltueiUzfB5vuqJzyVgsOUnm915yiqq2PQ7uD2c2PZZwTQutEKs2hoer0hqxi5dtei53haf1h45h81PrNZkvbxZwKAzr4cjHyBNvYopfonvAAAAQHRSTlMA/t/+H/4/D4PI8P3K/mAwNqDA7XCGwUR0MbwusU/43KO/qaTdwqZx8PiD0JTQ6/3g0YD9WzxZ03JTcPBC+t3hlNBLAgAAB0dJREFUeNrtmmlT4lgUhq+A2dkXcUFUcN/bre2lBhm7QfZFIRBAsbpn5v//gjnn3huINF1T/WGapIq3LElIrDoPZ7nvjRAy11xzzTXXXHPNNUWeg83NDugmlF68u7sLpa5FJ2LcUoiOO4QQTItfUh6nYVwxjM4YY3HxC2jhnbM43lerBVAyPc4GBVlYWEg6pr7ePaXT+VKpmMtpd3cT+VjI5/OlZYeApJ+o8tM5SqWSQ3LyiXMsTnIssHyUSgXNESBbDGTcHZwjqSU1EHAUCu8dwCF6n7zAEZrgSC2TVBHaJrenFQrVPQdM4WsvygKC42rhmo6y19fqa7Go7VWrKQdUFgXxvuXgc2rrlUrbKxbtnxJvBTlC0ziIuH6xDnrVikXbr4ufKt4K/ISsbX49urp7gVpfj+X2bF9ZFapFC4elH8RGo7a/v39xsZfzTxjMgM0WlzPKEbK6EmuEO263uwE0sYeI5d3ARtgwjPCGjRpnuYxiIJzjTTccdOr1uvvb6enntXGaNgy1C1L1ftQ2ILsUpJy2uBL6MQd45dy22+3vhq6qurFiZupQ7w5azWaz1VWNDdu0SLn8XC6fWTjQjkTDOgQeQHffbv+jd1sYtR4O0D+Jwvmw9/LSGzYHav+DXVrk+RlIQhZ3BW7kUKWRY+BX7e/6oIlhNwf6Ie3yvtoavvyJ6jWBbtY9f7mxAXF6nqlCFpe4TKJqEwJ9aXbDAFLvd5s0bDg3PtCEDNgboGFL7V/OliPaehmqAXLNQNKcA80uIeFBj0beMi7J7Td9MGRR91r6CqHp4m8wuJXZgqgQRjNKdp9rwHFm4SiRgN5iYTb1KDk41Vs9HnVLhRQRqKye/UB2aqjQ4njzkXwLsjkNxE4Z+TDoNfUAuWEglk1UclRavYFx6XF/MyZLa1RrtNtnDUIuV7DZaw0GMt4MFqB/sHheepiAg0YDmr3HP306a6MGfwPeGg5m3uzcMDWo0hYOABEP1UGrNVDDAbBajVMIfNjDRUMP8/E74GjDVtcI28JyXTEQipGnGIUqWHgxClaqDwviQQ2u/mV0kWu8IBpAQtFgkbTJgnjbQEd4w9OBINUqs1qBADiVT7SDaqd9Axb6/gq3iOIhWC1AQ7a+TSzKrht1Myor4KiOn5gs7z8+1h6B5PH0j8+fAxbT2DdUFe2XbUzjAQXZsnIUi4K55QIOptq+K2t18SSw0gfZyMbvUJBQ3iwr5CjGTF/8WDZJYtnsZE97Anbaxe/Ucbex9YYjl0tAmLtn1N4zFuBYs/c+F0Dc9XrS5CgW2ZOsEGwby2Odf8xmBXuDbGJG6tpbjoec65xt5Ctl5IF8ZIPE7iC4k9VGZUU5QHtaxdS6DBwf7f4Ue7MDJB1tguMrSI6te72VSiwGZZV9O7LsCdLutOvaqM1HHPdf7+8VWc5kqexeWNDsbSTRfuQAZe4znEMWHQCC0kyOByuHieEEDnLAQZzOYYKMymoKR9AR/3a75SA/5fgYIY7QFU7fjjbZ5iOOoFO+LuChK3uKcnx9oBxBxcSQJQd968GNIDFLPmRC/D4JJDjruxubaOPPLXX1c5cbP6Ivq0uQyDgRt1fttZA0EIRxYHvcS9PvWz2OH23Tg5M4IUsnS/Fje4Hs4rOHG0uf+6beJp4sHS9hTx39fYRncbK6TcQllE2m8zLsyBsNy7iavu84gshPgOT46DiOXKtLlAVll8Ts42MS13js/vzO1WP8vY0gq0dIZS9t0a3saBWU/+t+ChKP22+536Ugo2VQIk6Vh27KR64k4VgQco7bcsV0V1gyfkGKQM97BIF2vvmKEiIR89/tQkLysWMRF1AP/Jngn7z/t9YWbsxlzgEt4nNhjWVc/gT8xsjgGu8cn0KvQJiiRA8zaPF99CgTwVd0A/D3M9lRerywN49xkwgtksngFhfi5RH5RzM5AkeS5MJTAa7LSCzhdUWS1uBIwVO8lPHPZm4ByToHgRZRfDxmD37EIgkiEyVmRKILzgVZMHMlsbyIfjxSrAn87Wsifn3OxUAgIqwOj0SDho9cwvB9ZkIUKH9hDS7R6eunMWMFKtQni5ASn/+ni+r/rxCAxLK8RSCeiEyLXsDqd0mYED+IrGVGkpCV9pJMRNl8iyYnOLOEQEryT0/JrPn4Cjs6yDJCWN9HMCsZzxpiMQliENPAguaNL7GUjBI4C6Xy+bzMK4v1qsBAkCejiB4ZRMvNXNAxTyLNAJu/LmZu6P2u2S0lolbKa1n2xJ0Fl+CNrfCiMZudzlVREmT6Nr3XI/BrInuZYUJA70olSIk5r9aCtPyh0LCCRrYKp5grKMFeGBtekWR2FwxinMQ0ETIdXDO180mN/y9HplPIxT5a5c3ilmA9o8Di4WIMcMLXQ8XP59as3ZqYkvkuV/DBdPXgL2Iu1uPVU+C+RBQSftzdo5VBh+IzW0eZvS9O/GgYf9Ft2CEhU+X7RbchTSbQLvpVtzEruzjXXHPNNddcc9lQ/wIF92GcCR4PHgAAAABJRU5ErkJggg==" title:@"BANKTRANSFER_PAYEASY" paymentMethodCode:@"BANKTRANSFER_PAYEASY" currency:@"JPY" amount:@"6000"]]; }; return _paymentMethods; } -(UITableView *)tableView { if (_tableView == nil) { _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0,CGRectGetMaxY(self.tipLabel.frame) + 20 ,[UIScreen mainScreen].bounds.size.width, 300)]; [_tableView registerNib:[UINib nibWithNibName:@"PaymentMethodViewCell" bundle:nil] forCellReuseIdentifier:@"PaymentMethodViewCell"]; _tableView.delegate = self; _tableView.dataSource = self; _tableView.separatorStyle = UITableViewCellSeparatorStyleNone; } return _tableView; } - (void)viewDidLoad { [super viewDidLoad]; [self setUpView]; } -(void)setUpView { self.selectedIndex = -1; [self.view addSubview:self.tableView]; [self.btnCheckout addTarget:self action:@selector(startPayment) forControlEvents:UIControlEventTouchUpInside]; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.paymentMethods.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { PaymentMethodViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PaymentMethodViewCell" forIndexPath:indexPath]; PaymentMethodView *paymentMethod = self.paymentMethods[indexPath.row]; BOOL isSelected = (indexPath.row == self.selectedIndex); [cell configureWithPaymentMethod:paymentMethod selected:isSelected]; return cell; } -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 100; } - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { if (self.selectedIndex != indexPath.row) { self.selectedIndex = indexPath.row; [tableView reloadData]; self.selectMethod = self.paymentMethods[self.selectedIndex]; } } - (NSDictionary *)dicWithPaymethod:(PaymentMethodView*)paymethod { return @{ @"amountValue":paymethod.amount, @"currency":paymethod.currency, @"paymentMethodType":paymethod.paymentMethodCode, @"terminalType":@"APP", @"osType":@"IOS" }; }`] }, `iOS-Objective-C-SDK-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` `] }, `iOS-Objective-C-SDK-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-a-payment-session`], chunks: [`- (void)startPayment { if (self.selectMethod == nil) { [AlterUtils showAlertWithMessage:@"Please choose your method "]; return; } [[LoadingIndicator sharedInstance] showLoadingInView:self.view]; [[AMSCashierPayment shared] preload]; [[HttpService sharedInstance]requestWithMethod:HttpMethodPOST urlpath:@"/payment/createSession" body:[self dicWithPaymethod:self.selectMethod] requestParam:nil completion:^(HttpResponse *response) { dispatch_async(dispatch_get_main_queue(), ^{ [[LoadingIndicator sharedInstance]dismissLoading]; if (response.errorMessage) { NSLog(@"Antom --- Error: %@", response.errorMessage); [AlterUtils showAlertWithMessage:response.errorMessage]; } else { NSLog(@"Antom --- Response: %@", response.responseBody); if (response.responseBody[@"data"][@"paymentSessionData"] != nil) { NSString *sessionData = (NSString*)response.responseBody[@"data"][@"paymentSessionData"]; [self createAMSCheckout:sessionData]; } } }); }]; } `] }, `iOS-Objective-C-SDK-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`-(void)createAMSCheckout:(NSString*)sessionData {`] }, `iOS-Objective-C-SDK-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`initialize-instantiate-the-sdk`], chunks: [` AMSCashierPaymentConfiguration *componentConfig = [AMSCashierPaymentConfiguration new]; componentConfig.locale = @"en_US"; componentConfig.options = @{@"sandbox":@"true",@"showLoading":@"true"}; [[AMSCashierPayment shared] initConfiguration:componentConfig]; [AMSCashierPayment shared].paymentDelegate = self;`] }, `iOS-Objective-C-SDK-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [`invoke-the-sdk`], chunks: [` [[AMSCashierPayment shared] createComponent:sessionData];`] }, `iOS-Objective-C-SDK-code4`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`} `] }, `iOS-Objective-C-SDK-other4`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-payment-result`], chunks: [`-(void)onEventCallback:(NSString *)eventCode eventResult:(AMSEventResult *)eventResult { if ([eventCode isEqualToString:@"SDK_PAYMENT_SUCCESSFUL"]) { // Payment was successful. } else if ([eventCode isEqualToString:@"SDK_PAYMENT_PROCESSING"]) { // Payment was being processed. Confirm the payment result with server. } else if ([eventCode isEqualToString:@"SDK_PAYMENT_FAIL"]) { // Payment failed. Check the value of 'eventResult.paymentResultCode' in the onEventCallback result data for details. Guide buyers to retry the payment based on the provided information. } else if ([eventCode isEqualToString:@"SDK_PAYMENT_CANCEL"]) { // Guide buyers to retry the payment. You can reuse the paymentSessionData within its validity period to recall the SDK. If it has expired, you need to request new paymentSessionData. } else if ([eventCode isEqualToString:@"SDK_PAYMENT_ERROR"]) { // The payment status was abnormal. Confirm the payment result with server. } NSLog(@"eventCode%@ eventResult%@", eventCode, eventResult); } `] }, `iOS-Objective-C-SDK-code5`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`@end `] }, `iOS-Objective-C-SDK-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/AppDelegate.m', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/AppDelegate.m', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`// // AppDelegate.m // cashierpayment_api_objc // // Created by ant on 2024/9/27. // #import "AppDelegate.h" #import "Common.h" @interface AppDelegate () @end @implementation AppDelegate -(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options{ // custom scheme logic NSLog(@"----%@",url); if ([url.scheme isEqualToString:@"cashiersdk"]) { [self handlecashierUrl:url]; } return YES; } - (void)handlecashierUrl:(NSURL *)url { NSURLComponents *components = [NSURLComponents componentsWithURL:url resolvingAgainstBaseURL:NO]; NSMutableDictionary *queryItemsDict = [NSMutableDictionary dictionary]; for (NSURLQueryItem *item in components.queryItems) { queryItemsDict[item.name] = item.value; } NSString *paymentRequestId = queryItemsDict[@"paymentRequestId"]; NSLog(@"Scheme recieve: %@", paymentRequestId); if (paymentRequestId == nil) { [AlterUtils showAlertWithMessage:@"paymentRequestId can not be nil"]; return; } [self inquiryPaymentProcess:paymentRequestId]; } - (void)inquiryPaymentDisplay:(HttpResponse *)response { InquiryPaymentResult *inquiryPaymentResult = [InquiryPaymentResult parseFromJSON:response.responseBody]; if (inquiryPaymentResult.data != nil) { NSString *resultCode = [inquiryPaymentResult.data[@"result"] objectForKey:@"resultCode"]; if ([resultCode isEqualToString:@"SUCCESS"]) { [AlterUtils showAlertWithMessage:@"Payment Success"]; } }else{ [AlterUtils showAlertWithMessage:@"inquiryPaymentResult data is empty"]; } } -(void)inquiryPaymentProcess:(NSString*)paymentRequestId{ [[LoadingIndicator sharedInstance] showLoadingInView:self.window]; [[HttpService sharedInstance]requestWithMethod:HttpMethodPOST urlpath:@"/payment/inquiryPayment" body:@{@"paymentRequestId":paymentRequestId} requestParam:nil completion:^(HttpResponse *response) { dispatch_async(dispatch_get_main_queue(), ^{ [[LoadingIndicator sharedInstance]dismissLoading]; if (response.errorMessage) { NSLog(@"Antom --- Error: %@", response.errorMessage); [AlterUtils showAlertWithMessage:response.errorMessage]; } else { NSLog(@"Antom --- Response: %@", response.responseBody); if([response.responseBody isKindOfClass:[NSDictionary class]]){ [self inquiryPaymentDisplay:response]; } else{ [AlterUtils showAlertWithMessage:@"inquiryPayment error"]; } } }); }]; } @end `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Main.storyboard', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Base.lproj/Main.storyboard', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Common.m', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Common.m', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // Common.m // // Created by ant on 2024/11/12. // #import "Common.h" #import "UIKit/UIKit.h" static NSString * const HOST_URL = @"http://127.0.0.1:8080"; @implementation AlterUtils + (void)showAlertWithMessage:(NSString *)message { UIViewController *topViewController = [self topViewController]; if (topViewController) { UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Tip" message:message preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"Close" style:UIAlertActionStyleDefault handler:nil]; [alertController addAction:okAction]; [topViewController presentViewController:alertController animated:YES completion:nil]; } } + (UIViewController *)topViewController { UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController; return [self topViewControllerFrom:rootViewController]; } + (UIViewController *)topViewControllerFrom:(UIViewController *)vc { if ([vc presentedViewController]) { return [self topViewControllerFrom:[vc presentedViewController]]; } else if ([vc isKindOfClass:[UINavigationController class]]) { UINavigationController *navController = (UINavigationController *)vc; return [self topViewControllerFrom:[navController visibleViewController]]; } else if ([vc isKindOfClass:[UITabBarController class]]) { UITabBarController *tabBarController = (UITabBarController *)vc; return [self topViewControllerFrom:[tabBarController selectedViewController]]; } else { return vc; } } @end @implementation InquiryPaymentResult - (instancetype)initWithData:(NSDictionary *)data paymentRequestId:(NSString *)paymentRequestId authState:(NSString *)authState status:(NSString *)status message:(NSString *)message { self = [super init]; if (self) { _data = data; _paymentRequestId = [paymentRequestId copy]; _authState = [authState copy]; _status = [status copy]; _message = [message copy]; } return self; } + (instancetype)parseFromJSON:(NSDictionary *)json { NSDictionary *data = json[@"data"]; NSString *paymentRequestId = json[@"paymentRequestId"]; NSString *authState = json[@"authState"]; NSString *status = json[@"status"]; NSString *message = json[@"message"]; return [[self alloc] initWithData:data paymentRequestId:paymentRequestId authState:authState status:status message:message]; } @end @implementation HttpResponse + (instancetype)successWithResponseBody:(NSDictionary *)responseBody { HttpResponse *response = [[HttpResponse alloc] init]; response.responseBody = responseBody; return response; } + (instancetype)failureWithErrorMessage:(NSString *)errorMessage { HttpResponse *response = [[HttpResponse alloc] init]; response.errorMessage = errorMessage; return response; } @end @implementation HttpService - (void)requestWithMethod:(HttpMethod)method urlpath:(NSString *)url body:(NSDictionary *)body requestParam:(NSDictionary *)params completion:(void (^)(HttpResponse *response))completion { NSString *fullUrl = [self buildUrl:url params:params]; NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:fullUrl]]; [request setValue:@"application/json" forHTTPHeaderField:@"Content-Type"]; if (method == HttpMethodPOST) { NSError *error; NSData *jsonData = [NSJSONSerialization dataWithJSONObject:body options:0 error:&error]; if (!jsonData) { completion([HttpResponse failureWithErrorMessage:error.localizedDescription]); return; } [request setHTTPMethod:@"POST"]; [request setHTTPBody:jsonData]; } else { [request setHTTPMethod:@"GET"]; } NSLog(@"Requesting URL: %@", fullUrl); NSLog(@"Request Method: %@", method == HttpMethodPOST ? @"POST" : @"GET"); NSLog(@"Request Headers: %@", request.allHTTPHeaderFields); NSLog(@"Request Body: %@", body); NSURLSessionDataTask *task = [[NSURLSession sharedSession] dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) { if (error) { completion([HttpResponse failureWithErrorMessage:error.localizedDescription]); return; } if (data) { NSError *jsonError; NSDictionary *jsonResponse = [NSJSONSerialization JSONObjectWithData:data options:0 error:&jsonError]; id status = jsonResponse[@"status"]; if (jsonError) { completion([HttpResponse failureWithErrorMessage:jsonError.localizedDescription]); } else if (![status isEqual:@"success"]){ completion([HttpResponse failureWithErrorMessage:[[NSString alloc]initWithFormat:@"%@,%@",fullUrl,status]]); } else { completion([HttpResponse successWithResponseBody:jsonResponse]); } } else { completion([HttpResponse failureWithErrorMessage:@"No data received"]); } }]; [task resume]; } - (NSString *)buildUrl:(NSString *)url params:(NSDictionary *)params { NSMutableString *urlString = [NSMutableString stringWithFormat:@"%@%@", HOST_URL, url]; if (params.count > 0) { [urlString appendString:@"?"]; NSMutableArray *queryItems = [NSMutableArray array]; for (NSString *key in params.allKeys) { NSString *value = params[key]; NSString *encodedKey = [self urlEncode:key]; NSString *encodedValue = [self urlEncode:value]; [queryItems addObject:[NSString stringWithFormat:@"%@=%@", encodedKey, encodedValue]]; } [urlString appendString:[queryItems componentsJoinedByString:@"&"]]; } return [urlString copy]; } - (NSString *)urlEncode:(NSString *)string { return [string stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]]; } + (instancetype)sharedInstance { static HttpService *sharedInstance = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ sharedInstance = [[self alloc] init]; }); return sharedInstance; } @end @interface LoadingIndicator () @property (strong, nonatomic) UIActivityIndicatorView *activityIndicator; @property (strong, nonatomic) UIView *overlayView; @end @implementation LoadingIndicator + (instancetype)sharedInstance { static LoadingIndicator *sharedInstance = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ sharedInstance = [[self alloc] init]; }); return sharedInstance; } - (void)showLoadingInView:(UIView *)view { if (!self.overlayView) { self.overlayView = [[UIView alloc] initWithFrame:view.bounds]; self.overlayView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.3]; self.activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite]; self.activityIndicator.center = self.overlayView.center; [self.overlayView addSubview:self.activityIndicator]; } [self.activityIndicator startAnimating]; [view addSubview:self.overlayView]; self.overlayView.alpha = 0.0; [UIView animateWithDuration:0.3 animations:^{ self.overlayView.alpha = 1.0; }]; } - (void)dismissLoading { [UIView animateWithDuration:0.3 animations:^{ self.overlayView.alpha = 0.0; } completion:^(BOOL finished) { [self.activityIndicator stopAnimating]; [self.overlayView removeFromSuperview]; self.overlayView = nil; self.activityIndicator = nil; }]; } @end @implementation PaymentMethodView - (instancetype)initWithIcon:(NSString *)icon title:(NSString *)title paymentMethodCode:(NSString *)paymentMethodCode currency:(NSString *)currency amount:(NSString*)amount { self = [super init]; if (self) { _icon = icon; _title = title; _paymentMethodCode = paymentMethodCode; _currency = currency; _amount = amount; } return self; } -(NSString*)formatAmount { return [[NSString alloc]initWithFormat:@"%@ %@",self.currency,self.amount]; } @end @implementation PaymentMethodViewCell -(void)awakeFromNib{ [super awakeFromNib]; self.selectionStyle = UITableViewCellSelectionStyleNone; if (@available(iOS 13.0, *)) { [_radioButton setImage:[UIImage systemImageNamed:@"circle"] forState:UIControlStateNormal]; [_radioButton setImage:[UIImage systemImageNamed:@"checkmark.circle"] forState:UIControlStateSelected]; } else { //TODO: custom image } } - (void)configureWithPaymentMethod:(PaymentMethodView *)paymentMethod selected:(BOOL)selected { _paymentMethod = paymentMethod; // Set the radio button state _radioButton.selected = selected; self.iconImage.image = [ImageBase64Converter base64ToImage:paymentMethod.icon]; self.title.text = [paymentMethod title]; } @end @implementation ImageBase64Converter + (NSString *)imageToBase64:(UIImage *)image { NSData *imageData = UIImagePNGRepresentation(image); if (!imageData) { return nil; } return [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength]; } + (UIImage *)base64ToImage:(NSString *)base64String { NSData *imageData = [[NSData alloc] initWithBase64EncodedString:base64String options:NSDataBase64DecodingIgnoreUnknownCharacters]; if (!imageData) { return nil; } return [UIImage imageWithData:imageData]; } @end @implementation CALayer (BorderUIColor) - (UIColor *)borderUIColor { return [UIColor colorWithCGColor:self.borderColor]; } - (void)setBorderUIColor:(UIColor *)borderUIColor { self.borderColor = borderUIColor.CGColor; } @end `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/AppDelegate.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/AppDelegate.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // AppDelegate.h // cashierpayment_sdk_objc // // Created by ant on 2024/9/27. // #import @interface AppDelegate : UIResponder @property(nonatomic,strong) UIWindow *window; @end `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/File.swift', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/File.swift', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // File.swift // cashierpayment_sdk_objc // // Created by ant on 2024/9/27. // import Foundation `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Common.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Common.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // Common.h // // Created by ant on 2024/11/12. // #import #import "UIKit/UIKit.h" NS_ASSUME_NONNULL_BEGIN @interface AlterUtils : NSObject + (void)showAlertWithMessage:(NSString *)message; @end @interface InquiryPaymentResult : NSObject @property (nonatomic, strong, readonly) NSDictionary *data; @property (nonatomic, copy, readonly) NSString *paymentRequestId; @property (nonatomic, copy, readonly) NSString *authState; @property (nonatomic, copy, readonly) NSString *status; @property (nonatomic, copy, readonly) NSString *message; - (instancetype)initWithData:(NSDictionary *)data paymentRequestId:(NSString *)paymentRequestId authState:(NSString *)authState status:(NSString *)status message:(NSString *)message; // 解析方法 + (instancetype)parseFromJSON:(NSDictionary *)json; @end @interface HttpResponse : NSObject @property (nonatomic, strong) NSDictionary *responseBody; @property (nonatomic, strong) NSString *errorMessage; + (instancetype)successWithResponseBody:(NSDictionary *)responseBody; + (instancetype)failureWithErrorMessage:(NSString *)errorMessage; @end typedef NS_ENUM(NSInteger, HttpMethod) { HttpMethodGET, HttpMethodPOST }; @interface HttpService : NSObject - (void)requestWithMethod:(HttpMethod)method urlpath:(NSString *)url body:(NSDictionary *)body requestParam:(NSDictionary *)params completion:(void (^)(HttpResponse *response))completion; + (instancetype)sharedInstance; @end @interface LoadingIndicator : NSObject + (instancetype)sharedInstance; - (void)showLoadingInView:(UIView *)view; - (void)dismissLoading; @end @interface PaymentMethodView : NSObject @property (nonatomic, copy) NSString *icon; @property (nonatomic, copy) NSString *title; @property (nonatomic, copy) NSString *paymentMethodCode; @property (nonatomic, copy) NSString *currency; @property (nonatomic, copy) NSString *amount; - (instancetype)initWithIcon:(NSString *)icon title:(NSString *)title paymentMethodCode:(NSString *)paymentMethodCode currency:(NSString *)currency amount:(NSString*)amount; -(NSString*)formatAmount; @end @class PaymentMethodView; @interface PaymentMethodViewCell : UITableViewCell @property (nonatomic, strong) PaymentMethodView *paymentMethod; @property (weak, nonatomic) IBOutlet UIButton *radioButton; @property (weak, nonatomic) IBOutlet UILabel *title; @property (weak, nonatomic) IBOutlet UIImageView *iconImage; - (void)configureWithPaymentMethod:(PaymentMethodView *)paymentMethod selected:(BOOL)selected; @end @interface ImageBase64Converter : NSObject + (NSString *)imageToBase64:(UIImage *)image; + (UIImage *)base64ToImage:(NSString *)base64String; @end NS_ASSUME_NONNULL_END `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/cashierpayment_sdk_objc-Bridging-Header.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/cashierpayment_sdk_objc-Bridging-Header.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // Use this file to import your target's public headers that you would like to expose to Swift. // `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/PaymentMethodViewCell.xib', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/PaymentMethodViewCell.xib', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Podfile', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Podfile', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`# Uncomment the next line to define a global platform for your project # https://docs.antom.com/ac/sdks/ios "pod mode requires account secret configuration" source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git' source 'https://globaltech.alipay.com/api/v1/file/common/5700989804217335/antom' platform :ios, '11.0' target 'cashierpayment_sdk_objc' do use_frameworks! pod 'AMSComponent' pod 'AMSSecurity' end `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/Info.plist', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/Info.plist', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` NSAppTransportSecurity NSAllowsArbitraryLoads CFBundleURLTypes CFBundleURLSchemes cashiersdk `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/checkout/files/ios/objective-c/ViewController.h', when: { platform: 'iOS', client: 'Objective-C', integration_type: 'SDK' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/ViewController.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`// // ViewController.h // cashierpayment_sdk_objc // // Created by ant on 2024/9/27. // #import @interface ViewController : UIViewController @end `] }, `iOS-Objective-C-SDK-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/web/html/README.md', when: { platform: 'Web', client: 'HTML', server: 'PHP' }, children: _jsx(AntomFile, { language: `txt`, filename: 'client/README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# Project Title antom-online-payments-demo-using-cdn-sdk ## Getting Started This demo project showcases how Antom payment works. For more detailed information, visit the [Antom Documentation](https://docs.antom.com/). Follow these steps to set up and run the project: `, '### 1. Install `http-server`', ` `, "To serve your site, you'll need to install `http-server`, a simple, zero-configuration command-line static HTTP server. You can install it globally using npm (Node Package Manager).", ` Open your terminal and run the following command: `, '``` bash', `npm install -g http-server`, '```', ` ### 2. Start the Client `, '``` bash', `http-server -p 5173 -a localhost`, '```', ` `] }, `Web-HTML-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/web/html/README.md', when: { platform: 'Web', client: 'HTML', server: 'Python' }, children: _jsx(AntomFile, { language: `txt`, filename: 'client/README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# Project Title antom-online-payments-demo-using-cdn-sdk ## Getting Started This demo project showcases how Antom payment works. For more detailed information, visit the [Antom Documentation](https://docs.antom.com/). Follow these steps to set up and run the project: `, '### 1. Install `http-server`', ` `, "To serve your site, you'll need to install `http-server`, a simple, zero-configuration command-line static HTTP server. You can install it globally using npm (Node Package Manager).", ` Open your terminal and run the following command: `, '``` bash', `npm install -g http-server`, '```', ` ### 2. Start the Client `, '``` bash', `http-server -p 5173 -a localhost`, '```', ` `] }, `Web-HTML-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/web/html/README.md', when: { platform: 'Web', client: 'HTML', server: 'Go' }, children: _jsx(AntomFile, { language: `txt`, filename: 'client/README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# Project Title antom-online-payments-demo-using-cdn-sdk ## Getting Started This demo project showcases how Antom payment works. For more detailed information, visit the [Antom Documentation](https://docs.antom.com/). Follow these steps to set up and run the project: `, '### 1. Install `http-server`', ` `, "To serve your site, you'll need to install `http-server`, a simple, zero-configuration command-line static HTTP server. You can install it globally using npm (Node Package Manager).", ` Open your terminal and run the following command: `, '``` bash', `npm install -g http-server`, '```', ` ### 2. Start the Client `, '``` bash', `http-server -p 5173 -a localhost`, '```', ` `] }, `Web-HTML-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/android/java/README.md', when: { platform: 'Android' }, children: _jsx(AntomFile, { language: `txt`, filename: 'client/README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# Directory demo description auto_debit //Signing withholding payment /api /sdk cashier_payment //Cashier payment /api /sdk easy_safe_pay //easypay subscription //subscription payment # Running conditions ## 1. Run the server code locally Select target and use cashier_payment_java api as an example. antom-online-payment-sample-java/src/main/java/com/antom/checkout/api/PaymentServer.java ## 2. Change the service callback address`, '`alipayPayRequest.setPaymentRedirectUrl(', '"cashierapi://app/receivePayment?paymentRequestId=" + paymentRequestId);`', ` ## 3. Config merchant info antom-online-payment-sample-java/src/main/java/com/antom/checkout/api/PaymentServer.java // public static final String CLIENT_ID = ""; // public static final String ANTOM_PUBLIC_KEY = ""; // public static final String MERCHANT_PRIVATE_KEY = ""; ## 4. Change the client joint debugging address HttpServer.java private static final String HOST_URL = "http://10.0.2.2:8080"; //Local IP or server address ## 5. Select the payment method to perform a payment test. ## tips: SDK integration requires first configuring the Podfile https://docs.antom.com/ac/sdks/android "pod mode requires account secret configuration" `] }, `Android-Java-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/android/kotlin/README.md', when: { platform: 'Android' }, children: _jsx(AntomFile, { language: `txt`, filename: 'client/README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# Directory demo description auto_debit //Signing withholding payment /api /sdk cashier_payment //Cashier payment /api /sdk easy_safe_pay //easypay subscription //subscription payment # Running conditions ## 1. Run the server code locally Select target and use cashier_payment_java api as an example. antom-online-payment-sample-java/src/main/java/com/antom/checkout/api/PaymentServer.java ## 2. Change the service callback address`, '`alipayPayRequest.setPaymentRedirectUrl(', '"cashierapi://app/receivePayment?paymentRequestId=" + paymentRequestId);`', ` ## 3. Config merchant info antom-online-payment-sample-java/src/main/java/com/antom/checkout/api/PaymentServer.java // public static final String CLIENT_ID = ""; // public static final String ANTOM_PUBLIC_KEY = ""; // public static final String MERCHANT_PRIVATE_KEY = ""; ## 4. Change the client joint debugging address HttpServer.java private static final String HOST_URL = "http://10.0.2.2:8080"; //Local IP or server address ## 5. Select the payment method to perform a payment test. ## tips: SDK integration requires first configuring the Podfile https://docs.antom.com/ac/sdks/android "pod mode requires account secret configuration" `] }, `Android-Kotlin-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/ios/objective-c/README.md', when: { platform: 'iOS' }, children: _jsx(AntomFile, { language: `txt`, filename: 'client/README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# Directory demo description auto_debit_sdk_objc auto_debit_api_objc //Signing withholding payment cashierpayment_api_objc cashierpayment_sdk_objc //Cashier payment easypay_objc //easypay subscription_payment_objc //subscription payment # Running conditions ## 1. Run the server code locally Select target and use cashier_payment_java api as an example. antom-online-payment-sample-java/src/main/java/com/antom/checkout/api/PaymentServer.java ## 2. Change the service callback address`, '`alipayPayRequest.setPaymentRedirectUrl(', '"cashierpaymentapi://app/receivePayment?paymentRequestId=" + paymentRequestId);`', `## 3. Config merchant info antom-online-payment-sample-java/src/main/java/com/antom/checkout/api/PaymentServer.java // public static final String CLIENT_ID = ""; // public static final String ANTOM_PUBLIC_KEY = ""; // public static final String MERCHANT_PRIVATE_KEY = ""; ## 4. Change the client joint debugging address HttpServer.m static NSString * const HOST_URL = @"http://127.0.0.1:8080"; //Local IP or server address ## 5. Select the payment method to perform a payment test. ## tips: SDK integration requires first configuring the Podfile https://docs.antom.com/ac/sdks/ios "pod mode requires account secret configuration" `] }, `iOS-Objective-C-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/ios/swift/README.md', when: { platform: 'iOS' }, children: _jsx(AntomFile, { language: `txt`, filename: 'client/README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# Directory demo description auto_debit_sdk_objc auto_debit_api_objc //Signing withholding payment cashierpayment_api_objc cashierpayment_sdk_objc //Cashier payment easypay_objc //easypay subscription_payment_objc //subscription payment # Running conditions ## 1. Run the server code locally Select target and use cashier_payment_java api as an example. antom-online-payment-sample-java/src/main/java/com/antom/checkout/api/PaymentServer.java ## 2. Change the service callback address`, '`alipayPayRequest.setPaymentRedirectUrl(', '"cashierpaymentapi://app/receivePayment?paymentRequestId=" + paymentRequestId);`', `## 3. Config merchant info antom-online-payment-sample-java/src/main/java/com/antom/checkout/api/PaymentServer.java // public static final String CLIENT_ID = ""; // public static final String ANTOM_PUBLIC_KEY = ""; // public static final String MERCHANT_PRIVATE_KEY = ""; ## 4. Change the client joint debugging address HttpServer.m static NSString * const HOST_URL = @"http://127.0.0.1:8080"; //Local IP or server address ## 5. Select the payment method to perform a payment test. ## tips: SDK integration requires first configuring the Podfile https://docs.antom.com/ac/sdks/ios "pod mode requires account secret configuration" `] }, `iOS-Swift-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/python/README.md', when: { server: 'Python' }, children: _jsx(AntomFile, { language: `txt`, filename: 'README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# antom-online-payments-demo ## Getting Started This is a demo project to show how Antom payment works. For more detailed information, please visit [Antom Docs](https://docs.antom.com/) ## Requirements - Python 3.9 or later ## Config **Please make sure to replace the following parameters with your own to ensure correct integration.** Replace the following parameters in [server.py]()`, '- `CLIENT_ID`: Client ID', '- `ANTOM_PUBLIC_KEY`: Antom Public Key', "- `MERCHANT_PRIVATE_KEY`: Your Private Key (Antom won't save your private key, so you can't see it on dashboard, please refer [API key configuration](https://docs.antom.com/ac/ref/key_config))", ` `, 'You can find `CLIENT_ID` and `ANTOM_PUBLIC_KEY` on [Antom Dashboard](https://dashboard.antom.com/global-payments/developers/quickStart)', ` Follow the information below to configure the callback address information in server.py to ensure that the program works correctly. | platforms | product | integration types | redirectUrl | |-------------|----------------------|---------------------|------------------------------------------------------------------------------------------------------------| | Web | checkout payment | API/SDK/CKP/ELEMENT | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "http://localhost:5173/receiveAuthCode.html" | | | | SDK | authRedirectUrl: "http://localhost:5173/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "http://localhost:5173/index.html?subscriptionRequestId=" + subscriptionRequestId | | Android/iOS | checkout payment | API | paymentRedirectUrl: "cashierapi://app?paymentRequestId=" + paymentRequestId | | | | SDK | paymentRedirectUrl: "cashiersdk://app?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "autodebitapi://app/receiveAuthCode" | | | | SDK | authRedirectUrl: "autodebitsdk://app/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "easysafepay://app?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "subscription://app?subscriptionRequestId=" + subscriptionRequestId | ## Run You can run this demo in this way: 1. Build the server ~~~ pip3 install -r requirements.txt ~~~ 2. Run the server ~~~ export FLASK_APP=server.py python3 -m flask run --port=8080 ~~~ `] }, `server-Python-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/python/requirements.txt', when: { server: 'Python' }, children: _jsx(AntomFile, { language: `txt`, filename: 'requirements.txt', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`flask==3.1.0 global-open-sdk-python==1.4.23 real-money==0.1.0 Flask-Cors==4.0.0 `] }, `server-Python-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/java/README.md', when: { server: 'Java' }, children: _jsx(AntomFile, { language: `txt`, filename: 'README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# antom-online-payments-demo ## Getting Started This is a demo project to show how Antom payment works. For more detailed information, please visit [Antom Docs](https://docs.antom.com/) ## Requirements - Java 1.8 or later ## Config **Please make sure to replace the following parameters with your own to ensure correct integration.** Replace the following parameters in [PaymentServer.java]()`, '- `CLIENT_ID`: Client ID', '- `ANTOM_PUBLIC_KEY`: Antom Public Key', "- `MERCHANT_PRIVATE_KEY`: Your Private Key (Antom won't save your private key, so you can't see it on dashboard, please refer [API key configuration](https://docs.antom.com/ac/ref/key_config))", ` `, 'You can find `CLIENT_ID` and `ANTOM_PUBLIC_KEY` on [Antom Dashboard](https://dashboard.antom.com/global-payments/developers/quickStart)', ` Follow the information below to configure the callback address information in PaymentServer.java to ensure that the program works correctly. | platforms | product | integration types | redirectUrl | |----------------|----------------------|---------------------|------------------------------------------------------------------------------------------------------------| | Web(React/Vue) | checkout payment | API/SDK/CKP/ELEMENT | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "http://localhost:5173/receiveAuthCode.html" | | | | SDK | authRedirectUrl: "http://localhost:5173/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "http://localhost:5173/index.html?subscriptionRequestId=" + subscriptionRequestId | | Android/iOS | checkout payment | API | paymentRedirectUrl: "cashierapi://app?paymentRequestId=" + paymentRequestId | | | | SDK | paymentRedirectUrl: "cashiersdk://app?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "autodebitapi://app/receiveAuthCode" | | | | SDK | authRedirectUrl: "autodebitsdk://app/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "easysafepay://app?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "subscription://app?subscriptionRequestId=" + subscriptionRequestId | ## Run You can run this demo in two ways: ### Start Locally Start application by running [PaymentServer.java]() After start, visit demo page in browser：[http://localhost:8080](http://localhost:8080) ### Package & Run 1. package project `, ' ``` shell', ` mvn clean package`, ' ```', ` 2. run server `, ' ``` shell', ` java -jar ./target/antom-sample-code-0.0.1.jar`, ' ```', ` `] }, `server-Java-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/java/pom.xml', when: { server: 'Java' }, children: _jsx(AntomFile, { language: `txt`, filename: 'pom.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [` 4.0.0 org.springframework.boot spring-boot-starter-parent 2.7.6 com.antom.global.payment antom-sample-code 0.0.1 antom Demo project for antom payment demo 1.8 org.springframework.boot spring-boot-starter org.springframework.boot spring-boot-starter-web org.joda joda-money 1.0.4 com.alipay.global.sdk global-open-sdk-java 2.1.4 com.alibaba fastjson 1.2.83 org.projectlombok lombok 1.18.30 provided javax.xml.bind jaxb-api 2.3.0 org.springframework.boot spring-boot-maven-plugin `] }, `server-Java-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/php/README.md', when: { server: 'PHP' }, children: _jsx(AntomFile, { language: `txt`, filename: 'README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# antom-online-payments-demo ## Getting Started This is a demo project to show how Antom payment works. For more detailed information, please visit [Antom Docs](https://docs.antom.com/) ## Requirements - PHP 5.6 or later ## Config **Please make sure to replace the following parameters with your own to ensure correct integration.** Replace the following parameters in [server.php]()`, '- `CLIENT_ID`: Client ID', '- `ANTOM_PUBLIC_KEY`: Antom Public Key', "- `MERCHANT_PRIVATE_KEY`: Your Private Key (Antom won't save your private key, so you can't see it on dashboard, please refer [API key configuration](https://docs.antom.com/ac/ref/key_config))", ` `, 'You can find `CLIENT_ID` and `ANTOM_PUBLIC_KEY` on [Antom Dashboard](https://dashboard.antom.com/global-payments/developers/quickStart)', ` Follow the information below to configure the callback address information in server.php to ensure that the program works correctly. | platforms | product | integration types | redirectUrl | |-------------|----------------------|---------------------|------------------------------------------------------------------------------------------------------------| | Web | checkout payment | API/SDK/CKP/ELEMENT | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "http://localhost:5173/receiveAuthCode.html" | | | | SDK | authRedirectUrl: "http://localhost:5173/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "http://localhost:5173/index.html?subscriptionRequestId=" + subscriptionRequestId | | Android/iOS | checkout payment | API | paymentRedirectUrl: "cashierapi://app?paymentRequestId=" + paymentRequestId | | | | SDK | paymentRedirectUrl: "cashiersdk://app?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "autodebitapi://app/receiveAuthCode" | | | | SDK | authRedirectUrl: "autodebitsdk://app/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "easysafepay://app?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "subscription://app?subscriptionRequestId=" + subscriptionRequestId | ## Run You can run this demo in this way: 1. Build the server ~~~ composer install ~~~ 2. Run the server ~~~ php -S 127.0.0.1:8080 server.php ~~~ `] }, `server-PHP-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/php/composer.json', when: { server: 'PHP' }, children: _jsx(AntomFile, { language: `txt`, filename: 'composer.json', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`{ "require": { "antom/global-open-sdk-php": "1.4.23", "moneyphp/money": "^3.3", "slim/slim": "2.6.3", "ext-json": "*" }, "config": { "allow-plugins": { "kylekatarnls/update-helper": true } } } `] }, `server-PHP-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/go/README.md', when: { server: 'Go' }, children: _jsx(AntomFile, { language: `txt`, filename: 'README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# antom-online-payments-demo ## Getting Started This is a demo project to show how Antom payment works. For more detailed information, please visit [Antom Docs](https://docs.antom.com/) ## Requirements - Go 1.22.5 or later ## Config **Please make sure to replace the following parameters with your own to ensure correct integration.** Replace the following parameters in [server.go]()`, '- `CLIENT_ID`: Client ID', '- `ANTOM_PUBLIC_KEY`: Antom Public Key', "- `MERCHANT_PRIVATE_KEY`: Your Private Key (Antom won't save your private key, so you can't see it on dashboard, please refer [API key configuration](https://docs.antom.com/ac/ref/key_config))", ` `, 'You can find `CLIENT_ID` and `ANTOM_PUBLIC_KEY` on [Antom Dashboard](https://dashboard.antom.com/global-payments/developers/quickStart)', ` Follow the information below to configure the callback address information in server.go to ensure that the program works correctly. | platforms | product | integration types | redirectUrl | |-------------|----------------------|---------------------|------------------------------------------------------------------------------------------------------------| | Web | checkout payment | API/SDK/CKP/ELEMENT | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "http://localhost:5173/receiveAuthCode.html" | | | | SDK | authRedirectUrl: "http://localhost:5173/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "http://localhost:5173/index.html?subscriptionRequestId=" + subscriptionRequestId | | Android/iOS | checkout payment | API | paymentRedirectUrl: "cashierapi://app?paymentRequestId=" + paymentRequestId | | | | SDK | paymentRedirectUrl: "cashiersdk://app?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "autodebitapi://app/receiveAuthCode" | | | | SDK | authRedirectUrl: "autodebitsdk://app/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "easysafepay://app?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "subscription://app?subscriptionRequestId=" + subscriptionRequestId | ## Run You can run this demo in this way: 1. Run the server ~~~ go run server.go ~~~ `] }, `server-Go-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/go/go.mod', when: { server: 'Go' }, children: _jsx(AntomFile, { language: `txt`, filename: 'go.mod', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`module antom-online-payment-sample-go go 1.22.5 require ( github.com/Rhymond/go-money v1.0.14 github.com/alipay/global-open-sdk-go v1.2.34 github.com/google/uuid v1.6.0 ) `] }, `server-Go-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/.net/README.md', when: { server: '.NET' }, children: _jsx(AntomFile, { language: `txt`, filename: 'README.md', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [`# antom-online-payments-demo ## Getting Started This is a demo project to show how Antom payment works. For more detailed information, please visit [Antom Docs](https://docs.antom.com/) ## Requirements - .NET 8.0 or later ## Config **Please make sure to replace the following parameters with your own to ensure correct integration.** Replace the following parameters in [server.cs]()`, '- `CLIENT_ID`: Client ID', '- `ANTOM_PUBLIC_KEY`: Antom Public Key', "- `MERCHANT_PRIVATE_KEY`: Your Private Key (Antom won't save your private key, so you can't see it on dashboard, please refer [API key configuration](https://docs.antom.com/ac/ref/key_config))", ` `, 'You can find `CLIENT_ID` and `ANTOM_PUBLIC_KEY` on [Antom Dashboard](https://dashboard.antom.com/global-payments/developers/quickStart)', ` Follow the information below to configure the callback address information in server.cs to ensure that the program works correctly. | platforms | product | integration types | redirectUrl | |----------------|----------------------|---------------------|------------------------------------------------------------------------------------------------------------| | Web(React/Vue) | checkout payment | API/SDK/CKP/ELEMENT | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "http://localhost:5173/receiveAuthCode.html" | | | | SDK | authRedirectUrl: "http://localhost:5173/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "http://localhost:5173/index.html?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "http://localhost:5173/index.html?subscriptionRequestId=" + subscriptionRequestId | | Android/iOS | checkout payment | API | paymentRedirectUrl: "cashierapi://app?paymentRequestId=" + paymentRequestId | | | | SDK | paymentRedirectUrl: "cashiersdk://app?paymentRequestId=" + paymentRequestId | | | auto debit | API | authRedirectUrl: "autodebitapi://app/receiveAuthCode" | | | | SDK | authRedirectUrl: "autodebitsdk://app/receiveAuthCode" | | | easysafepay | SDK | paymentRedirectUrl: "easysafepay://app?paymentRequestId=" + paymentRequestId | | | subscription payment | API | subscriptionRedirectUrl: "subscription://app?subscriptionRequestId=" + subscriptionRequestId | ## Run You can run this demo in this way: 1. Build the server ~~~ dotnet restore ~~~ 2. Run the server ~~~ dotnet run ~~~ `] }, `server-.NET-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/antom/files/server/.net/antom-online-payment-sample-dotnet.csproj', when: { server: '.NET' }, children: _jsx(AntomFile, { language: `txt`, filename: 'antom-online-payment-sample-dotnet.csproj', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `txt`, steps: [``], chunks: [` net8.0 enable enable antom_online_payment_sample_dotnet `] }, `server-.NET-API-other1`) }) })] }) }) }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Quick start