Subscription Payment Demo

"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, Link, MdxDocument, Paragraph, 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 (!Link) _missingMdxReference("Link", true); if (!MdxDocument) _missingMdxReference("MdxDocument", true); if (!Paragraph) _missingMdxReference("Paragraph", 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: ['API'] }, { label: 'Platforms:', key: 'platform', value: ['Web', 'iOS', 'Android'] }, { label: 'Clients:', key: 'client', value: [{ when: { platform: 'Web' }, value: ['HTML', 'Vue', 'React'] }, { 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-subscription-payment-sample.zip', children: [_jsxs(AntomCondition, { when: { integration_type: 'API' }, children: [_jsx(Paragraph, { children: _jsx(_components.p, { children: "Create a smooth subscription process by using Antom's payment capabilities. Antom offers client- and server-side sample code for APIs-only integration, to help you easily build a subscription experience that accepts various senarios." }) }), _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: 'initiate-a-subscription-request', label: `server`, when: { integration_type: 'API' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `initiate-a-subscription-request`, children: _jsx(_components.p, { children: "Initiate a subscription request" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "On your server, add an endpoint to call the" }), _jsx(Link, { href: "https://docs.antom.com/docs/ac/ams/create_sub", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [' ', "create", ' '] }) }) }), _jsx(_components.p, { children: "API. When sending a subscription request, specify the subscription start time, subscription settlement time, cycle rules, subscription request ID, payment information, and other necessary subscription details." })] })] }), _jsxs(AntomStep, { id: 'specify-links', label: `server`, when: { integration_type: 'API' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `specify-links`, children: _jsx(_components.p, { children: "Specify the subscription redirection URL" }) }), _jsx(Paragraph, { children: _jsxs(_components.p, { children: ["Set the subscription redirection URL where the buyer is to be redirected after completing the subscription.", _jsx("br", {}), "\nSet a notification receiving URL, and the Antom server will send updates to the specified address throughout the subscription cycle, including an immediate notification for the first subscription."] }) })] }), _jsxs(AntomStep, { id: 'receive-payment-notification', label: `server`, when: { integration_type: 'API' }, 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/docs/ac/ams/notify_subpayment", 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." })] })] }), _jsxs(AntomStep, { id: 'receive-subscription-notification', label: `server`, when: { integration_type: 'API' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `receive-subscription-notification`, children: _jsx(_components.p, { children: "Receive subscription 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/docs/ac/ams/notify_sub", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [' ', "notifySubscription", ' '] }) }) }), _jsx(_components.p, { children: "API, including the subscription status, subscription request ID, and subscription cycle rules. You can update the subscription status and save this information to your database for subsequent queries." })] })] }), _jsx(AntomStepSection, { number: 2, title: 'Build a subscription page on the client' }), _jsxs(AntomStep, { id: 'build-the-antom-page', label: `client`, children: [_jsx(Heading, { level: 3, anchored: true, id: 'build-the-antom-page', children: _jsx(_components.p, { children: "Build the subscription page" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Display the products information that you offer to buyers on the subscription page." }) })] }), _jsxs(AntomStep, { id: 'get-the-antom-push-link', label: `client`, children: [_jsx(Heading, { level: 3, anchored: true, id: 'get-the-antom-push-link', children: _jsx(_components.p, { children: "Get the subscription continuation URL" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "After the buyer selects products to subscript, you send a subscription request with the corresponding subscription information and obtain the authorization subscription continuation URL from the subscription creation response." }) })] }), _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 authorized subscription continuation URL to complete the authorization." }) })] }), _jsxs(AntomStep, { id: 'listen-for-callback-addresses', label: `client`, unless: { platform: "Web" }, children: [_jsx(Heading, { level: 3, anchored: true, id: 'listen-for-callback-addresses', children: _jsx(_components.p, { children: "Listen for subscription redirection" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "After successfully authorizing the subscription, the buyer is redirected to the front-end page based on the previously set authorization redirection URL. The front-end needs to listen for this redirection to display the subscription success message and perform any other necessary processing." }) })] }), _jsxs(AntomStep, { id: 'display-the-payment-result', label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'display-the-payment-result', children: _jsx(_components.p, { children: "Obtain the subscription result" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "When the buyer completes the subscription payment, and is redirected to the subscription redirection URL, you can obtain the subscription status. You can also obtain the subscription status by polling the back-end for subscription result notifications." }) })] }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/server/java/PaymentServer.java', when: { server: 'Java', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `java`, filename: 'src/main/java/com/antom/subscription/api/PaymentServer.java', downloadOnly: false, steps: [`get-integration-resources`, `initiate-a-subscription-request`, `specify-links`, `receive-payment-notification`, `receive-subscription-notification`], children: [_jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.subscription.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.AlipaySubscriptionNotify; import com.alipay.global.api.request.ams.notify.AlipaySubscriptionPayNotify; import com.alipay.global.api.request.ams.subscription.AlipaySubscriptionCreateRequest; import com.alipay.global.api.response.ams.subscription.AlipaySubscriptionCreateResponse; 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.time.ZonedDateTime; import java.time.format.DateTimeFormatter; import java.util.UUID; /** * sample payment server using Antom API integration mode **/ @Controller @CrossOrigin @RequestMapping("/subscriptions") @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-subscription-request`], chunks: [` @PostMapping("/create") public ResponseEntity subscriptionCreate(@RequestBody SubscriptionVO subscription) { AlipaySubscriptionCreateRequest alipaySubscriptionCreateRequest = new AlipaySubscriptionCreateRequest(); // replace with your subscriptionRequestId. // You can save the relationship between the subscriptionRequestId and the user ID for later information retrieval. String subscriptionRequestId = UUID.randomUUID().toString(); alipaySubscriptionCreateRequest.setSubscriptionRequestId(subscriptionRequestId); alipaySubscriptionCreateRequest.setSubscriptionDescription("Subscription Description"); // set subscription start time and end time. you might want to consider time zones // If the start time is earlier than the authorization time, the subscription is successful. // If the start time is later than the authorization time, the payment is made after the successful authorization, which is the pre-sale // For details, please refer to: Samples DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ssXXX"); alipaySubscriptionCreateRequest.setSubscriptionStartTime(ZonedDateTime.now().format(formatter)); alipaySubscriptionCreateRequest.setSubscriptionEndTime(ZonedDateTime.now().plusYears(3).format(formatter)); // set periodRule PeriodRule periodRule = PeriodRule.builder().periodCount(subscription.periodCount).periodType(subscription.periodType).build(); alipaySubscriptionCreateRequest.setPeriodRule(periodRule); // set paymentMethod PaymentMethod paymentMethod = PaymentMethod.builder().paymentMethodType(subscription.getPaymentMethodType()).build(); alipaySubscriptionCreateRequest.setPaymentMethod(paymentMethod); // 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(subscription.getCurrency()), new BigDecimal(subscription.getAmountValue())).getAmountMinorLong(); Amount amount = Amount.builder().currency(subscription.currency).value(String.valueOf(amountMinorLong)).build(); // set payment amount alipaySubscriptionCreateRequest.setPaymentAmount(amount); // set order info OrderInfo orderInfo = OrderInfo.builder().orderAmount(amount).build(); alipaySubscriptionCreateRequest.setOrderInfo(orderInfo); // set settlement strategy // replace with your existing settlement currency SettlementStrategy settlementStrategy = SettlementStrategy.builder().settlementCurrency("USD").build(); alipaySubscriptionCreateRequest.setSettlementStrategy(settlementStrategy); // set env info Env env = Env.builder().terminalType(TerminalType.valueOf(subscription.terminalType)).build(); if (!TerminalType.WEB.equals(TerminalType.valueOf(subscription.terminalType)) && subscription.osType != null) { env.setOsType(OsType.valueOf(subscription.osType)); } alipaySubscriptionCreateRequest.setEnv(env); `] }, `server-Java-API-code2`), _jsx(AntomChunk, { language: `java`, steps: [`specify-links`], chunks: [` // replace with your notify url // or configure your notify url here: Notification URL alipaySubscriptionCreateRequest.setPaymentNotificationUrl("http://www.yourNotifyUrl.com/subscriptions/receivePaymentNotify"); alipaySubscriptionCreateRequest.setSubscriptionNotificationUrl("http://www.yourNotifyUrl.com/subscriptions/receiveSubscriptionNotify"); // replace with your subscription redirect url alipaySubscriptionCreateRequest.setSubscriptionRedirectUrl("http://localhost:8080/index.html?subscriptionRequestId=" + subscriptionRequestId); `] }, `server-Java-API-code3`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` // do authorization consult AlipaySubscriptionCreateResponse alipaySubscriptionCreateResponse; try { long startTime = System.currentTimeMillis(); System.out.println("subscription create request: " + JSON.toJSONString(alipaySubscriptionCreateRequest)); alipaySubscriptionCreateResponse = CLIENT.execute(alipaySubscriptionCreateRequest); System.out.println("subscription create response: " + JSON.toJSONString(alipaySubscriptionCreateResponse)); System.out.println("subscription create request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { // exception handling return ResponseEntity.ok().body(new ApiResponse(subscriptionRequestId, e)); } return ResponseEntity.ok().body(new ApiResponse(subscriptionRequestId, alipaySubscriptionCreateResponse)); } `] }, `server-Java-API-other3`), _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 Result 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 AlipaySubscriptionPayNotify paymentNotify = JSON.parseObject(notifyBody, AlipaySubscriptionPayNotify.class); if (paymentNotify != null && "SUCCESS".equals(paymentNotify.getResult().getResultCode())) { // handle your own business logic. // e.g. The payment information of the user is saved through the relationship between the subscriptionRequestId and the user ID. System.out.println("receive payment notify: " + JSON.toJSONString(paymentNotify)); return Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build(); } } catch (Exception e) { return Result.builder().resultCode("FAIL").resultMessage("fail.").resultStatus(ResultStatusType.F).build(); } return Result.builder().resultCode("SYSTEM_ERROR").resultMessage("system error.").resultStatus(ResultStatusType.F).build(); } `] }, `server-Java-API-code4`), _jsx(AntomChunk, { language: `java`, steps: [`receive-subscription-notification`], chunks: [` /** * receive subscription notify * * @param request request * @param notifyBody notify body * @return Result */ @PostMapping("/receiveSubscriptionNotify") @ResponseBody public Result receiveSubscriptionNotify(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 AlipaySubscriptionNotify subscriptionNotify = JSON.parseObject(notifyBody, AlipaySubscriptionNotify.class); if (subscriptionNotify != null && SubscriptionNotificationType.CREATE.equals(subscriptionNotify.getSubscriptionNotificationType())) { // handle your own business logic. // e.g. The subscription information of the user is saved through the relationship between the subscriptionRequestId and the user ID. System.out.println("receive subscription notify: " + JSON.toJSONString(subscriptionNotify)); return Result.builder().resultCode("SUCCESS").resultMessage("success.").resultStatus(ResultStatusType.S).build(); } } catch (Exception e) { return Result.builder().resultCode("FAIL").resultMessage("fail.").resultStatus(ResultStatusType.F).build(); } return 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 SubscriptionVO { private String periodType; private Integer periodCount; 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 subscriptionRequestId; private String message; private Object data; public ApiResponse(String subscriptionRequestId, Object data) { this.subscriptionRequestId = subscriptionRequestId; this.data = data; } public ApiResponse(String subscriptionRequestId, Exception e) { this.subscriptionRequestId = subscriptionRequestId; this.status = "error"; this.message = e.getMessage(); } } } `] }, `server-Java-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/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-subscription-request`, `specify-links`, `receive-payment-notification`, `receive-subscription-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 import datetime 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_info import OrderInfo from com.alipay.ams.api.model.os_type import OsType from com.alipay.ams.api.model.payment_method import PaymentMethod from com.alipay.ams.api.model.period_rule import PeriodRule from com.alipay.ams.api.model.period_type import PeriodType from com.alipay.ams.api.model.settlement_strategy import SettlementStrategy from com.alipay.ams.api.model.subscription_notification_type import SubscriptionNotificationType from com.alipay.ams.api.model.terminal_type import TerminalType from com.alipay.ams.api.request.notify.alipay_subscription_notify import AlipaySubscriptionNotify from com.alipay.ams.api.request.notify.alipay_subscription_pay_notify import AlipaySubscriptionPayNotify from com.alipay.ams.api.request.subscription.alipay_subscription_create_request import AlipaySubscriptionCreateRequest from com.alipay.ams.api.response.subscription.alipay_subscription_create_response import AlipaySubscriptionCreateResponse 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.currency import Currency from money.money import 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 = "antom_public_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__) sub_bp = Blueprint("subscriptions", __name__, url_prefix="/subscriptions") CORS(app) `] }, `server-Python-API-other2`), _jsx(AntomChunk, { language: `python`, steps: [`initiate-a-subscription-request`], chunks: [`@sub_bp.route("/create", methods=["POST"]) def subscription_create(): sub_vo = request.get_json() terminal_type = sub_vo.get("terminalType", TerminalType.WEB.name) alipay_subscription_create_request = AlipaySubscriptionCreateRequest() # replace with your subscriptionRequestId. # You can save the relationship between the subscriptionRequestId and the user ID for later information retrieval. subscription_request_id = str(uuid.uuid4()) alipay_subscription_create_request.subscription_request_id = subscription_request_id alipay_subscription_create_request.subscription_description = "Subscription Description" # set subscription start time and end time. you might want to consider time zones # If the start time is earlier than the authorization time, the subscription is successful. # If the start time is later than the authorization time, the payment is made after the successful authorization, which is the pre-sale # For details, please refer to: https://docs.antom.com/ac/subscriptionpay/activation#uiqBb timezone = datetime.datetime.now().astimezone().tzinfo current_time = datetime.datetime.now(timezone) alipay_subscription_create_request.subscription_start_time = str(current_time.isoformat(timespec='seconds')) alipay_subscription_create_request.subscription_end_time = str( current_time.replace(year=current_time.year + 3).isoformat(timespec='seconds')) # set periodRule period_rule = PeriodRule() period_rule.period_count = sub_vo['periodCount'] period_rule.period_type = PeriodType[sub_vo['periodType']] alipay_subscription_create_request.period_rule = period_rule # set paymentMethod payment_method = PaymentMethod() payment_method.payment_method_type = sub_vo['paymentMethodType'] alipay_subscription_create_request.payment_method = payment_method # 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(sub_vo['amountValue'], Currency[sub_vo['currency']]).sub_units # set payment amount amount = Amount(sub_vo['currency'], money_sub_units) alipay_subscription_create_request.payment_amount = amount # set buyer info buyer = Buyer() buyer.reference_buyer_id = "your_buyer_id" # set order info order_info = OrderInfo() order_info.order_amount = amount alipay_subscription_create_request.order_info = order_info # set settlement strategy. settlement_strategy = SettlementStrategy() # replace with your existing settlement currency settlement_strategy.settlement_currency = "USD" alipay_subscription_create_request.settlement_strategy = settlement_strategy # set env info env = Env() env.terminal_type = TerminalType[terminal_type] if TerminalType.WEB.name != terminal_type and "osType" in sub_vo: env.os_type = OsType[sub_vo['osType']] alipay_subscription_create_request.env = env `] }, `server-Python-API-code2`), _jsx(AntomChunk, { language: `python`, steps: [`specify-links`], chunks: [` # replace with your notify url # or configure your notify url here: https://dashboard.antom.com/global-payments/developers/iNotify alipay_subscription_create_request.payment_notification_url = "http://www.yourNotifyUrl.com/subscriptions/receivePaymentNotify" alipay_subscription_create_request.subscription_notification_url = "http://www.yourNotifyUrl.com/subscriptions/receiveSubscriptionNotify" # replace with your redirect url alipay_subscription_create_request.subscription_redirect_url = f"http://localhost:5173/index.html?subscriptionRequestId={subscription_request_id}" `] }, `server-Python-API-code3`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` try: start_time = time.time() print(f"subscription create request: {alipay_subscription_create_request.to_ams_json()}") alipay_subscription_create_response_body = default_alipay_client.execute(alipay_subscription_create_request) alipay_subscription_create_response = AlipaySubscriptionCreateResponse(alipay_subscription_create_response_body) print(f"subscription create response: {alipay_subscription_create_response_body}") print(f"subscription create request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(subscription_request_id, e)) return jsonify(ApiResponse().success(subscription_request_id, json.loads(alipay_subscription_create_response_body))) `] }, `server-Python-API-other3`), _jsx(AntomChunk, { language: `python`, steps: [`receive-payment-notification`], chunks: [`# receive payment notify @sub_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_subscription_pay_notify = AlipaySubscriptionPayNotify(notify_body) if alipay_subscription_pay_notify.result.result_code == "SUCCESS": # handle your own business logic. # e.g. The payment information of the user is saved through the relationship between the subscriptionRequestId and the user ID. 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-code4`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` `] }, `server-Python-API-other4`), _jsx(AntomChunk, { language: `python`, steps: [`receive-subscription-notification`], chunks: [`# receive subscription notify @sub_bp.route("/receiveSubscriptionNotify", methods=['POST']) def receive_subscription_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_subscription_notify = AlipaySubscriptionNotify(notify_body) if SubscriptionNotificationType.CREATE == alipay_subscription_notify.subscription_notification_type: # handle your own business logic. # e.g. The subscription information of the user is saved through the relationship between the subscriptionRequestId and the user ID. print(f"receive subscription 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.__subscription_request_id = "" self.__message = "" self.__data = None def success(self, subscription_request_id, data): self.__subscription_request_id = subscription_request_id self.__data = data return self.to_json() def error(self, subscription_request_id, e): self.__subscription_request_id = subscription_request_id self.__message = str(e) self.__status = "error" return self.to_json() def to_json(self): return { "status": self.__status, "paymentRequestId": self.__subscription_request_id, "message": self.__message, "data": self.__data } app.register_blueprint(sub_bp) if __name__ == '__main__': app.run(host='localhost', port=8080) `] }, `server-Python-API-other5`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/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-subscription-request`, `specify-links`, `receive-payment-notification`, `receive-subscription-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-subscription-request`], chunks: [` public function subscriptionCreate(\$subscription) { \$alipaySubscriptionCreateRequest = new AlipaySubscriptionCreateRequest(); // replace with your subscriptionRequestId // You can save the relationship between the subscriptionRequestId and the user ID for later information retrieval \$subscriptionRequestId = uniqid('SUB_'); \$alipaySubscriptionCreateRequest->setSubscriptionRequestId(\$subscriptionRequestId); \$alipaySubscriptionCreateRequest->setSubscriptionDescription("Subscription Description"); // set subscription start time and end time. you might want to consider time zones // If the start time is earlier than the authorization time, the subscription is successful // If the start time is later than the authorization time, the payment is made after the successful authorization, which is the pre-sale // For details, please refer to: Samples \$now = new DateTime(); \$alipaySubscriptionCreateRequest->setSubscriptionStartTime(\$now->format('Y-m-d\\TH:i:sP')); \$alipaySubscriptionCreateRequest->setSubscriptionEndTime(\$now->modify('+3 years')->format('Y-m-d\\TH:i:sP')); // set periodRule \$periodRule = new PeriodRule(); \$periodRule->setPeriodCount(\$subscription['periodCount']); \$periodRule->setPeriodType(\$subscription['periodType']); \$alipaySubscriptionCreateRequest->setPeriodRule(\$periodRule); // set paymentMethod \$paymentMethod = new PaymentMethod(); \$paymentMethod->setPaymentMethodType(\$subscription['paymentMethodType']); \$alipaySubscriptionCreateRequest->setPaymentMethod(\$paymentMethod); // 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)\$subscription['amountValue'], new Currency(\$subscription['currency'])); // set amount \$amount = new Amount(); \$amount->setCurrency(\$subscription['currency']); \$amount->setValue(\$money->getAmount()); // set payment amount \$alipaySubscriptionCreateRequest->setPaymentAmount(\$amount); // set order info \$orderInfo = new OrderInfo(); \$orderInfo->setOrderAmount(\$amount); \$alipaySubscriptionCreateRequest->setOrderInfo(\$orderInfo); // set settlement strategy // replace with your existing settlement currency \$settlementStrategy = new SettlementStrategy(); \$settlementStrategy->setSettlementCurrency("USD"); \$alipaySubscriptionCreateRequest->setSettlementStrategy(\$settlementStrategy); // set env info \$env = new Env(); \$subscription['terminalType'] = isset(\$subscription['terminalType']) ? \$subscription['terminalType'] : TerminalType::WEB; \$env->setTerminalType(\$subscription['terminalType']); if (\$subscription['terminalType'] !== TerminalType::WEB && !empty(\$subscription['osType'])) { \$env->setOsType(\$subscription['osType']); } \$alipaySubscriptionCreateRequest->setEnv(\$env); `] }, `server-PHP-API-code2`), _jsx(AntomChunk, { language: `php`, steps: [`specify-links`], chunks: [` // replace with your notify url // or configure your notify url here: Notification URL \$alipaySubscriptionCreateRequest->setPaymentNotificationUrl("http://www.yourNotifyUrl.com/subscriptions/receivePaymentNotify"); \$alipaySubscriptionCreateRequest->setSubscriptionNotificationUrl("http://www.yourNotifyUrl.com/subscriptions/receiveSubscriptionNotify"); // replace with your subscription redirect url \$alipaySubscriptionCreateRequest->setSubscriptionRedirectUrl( "http://localhost:5173/index.html?subscriptionRequestId=" . \$subscriptionRequestId ); `] }, `server-PHP-API-code3`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` try { \$startTime = microtime(true); error_log("subscription create request: " . json_encode(\$alipaySubscriptionCreateRequest)); \$alipaySubscriptionCreateResponse = self::\$CLIENT->execute(\$alipaySubscriptionCreateRequest); error_log("subscription create response: " . json_encode(\$alipaySubscriptionCreateResponse)); error_log("subscription create request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); return \$this->apiResponse(\$subscriptionRequestId, \$alipaySubscriptionCreateResponse); } catch (Exception \$e) { // exception handling return \$this->apiResponse(\$subscriptionRequestId, \$e); } } `] }, `server-PHP-API-other2`), _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 payment information of the user is saved through the relationship between the subscriptionRequestId and the user ID 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-code4`), _jsx(AntomChunk, { language: `php`, steps: [`receive-subscription-notification`], chunks: [` /** * receive subscription notify */ public function receiveSubscriptionNotify(\$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 \$subscriptionNotify = json_decode(\$notifyBody, true); if (\$subscriptionNotify && \$subscriptionNotify['subscriptionNotificationType'] === 'CREATE') { // handle your own business logic // e.g. The subscription information of the user is saved through the relationship between the subscriptionRequestId and the user ID error_log("receive subscription notify: " . json_encode(\$subscriptionNotify)); 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(\$subscriptionRequestId, \$data) { if (\$data instanceof Exception) { return array( 'status' => 'error', 'subscriptionRequestId' => \$subscriptionRequestId, 'message' => \$data->getMessage() ); } return array( 'status' => 'success', 'subscriptionRequestId' => \$subscriptionRequestId, '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('/subscriptions/create', function () use (\$app, \$paymentServer) { \$subscription = \$app->request->getBody(); \$subscription = json_decode(\$subscription, true); \$response = \$paymentServer->subscriptionCreate(\$subscription); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/subscriptions/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->post('/subscriptions/receiveSubscriptionNotify', function () use (\$app, \$paymentServer) { \$notifyBody = \$app->request->getBody(); \$response = \$paymentServer->receiveSubscriptionNotify(\$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/subscription/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-subscription-request`, `specify-links`, `receive-payment-notification`, `receive-subscription-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/subscription" "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("/subscriptions/create", enableCORS(handleSubscriptionCreate)) http.HandleFunc("/subscriptions/receivePaymentNotify", enableCORS(handleReceivePaymentNotify)) http.HandleFunc("/subscriptions/receiveSubscriptionNotify", enableCORS(handleReceiveSubscriptionNotify)) 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-subscription-request`], chunks: [`func handleSubscriptionCreate(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var subscriptionVO SubscriptionVO json.NewDecoder(r.Body).Decode(&subscriptionVO) // Set default terminal type if not provided if subscriptionVO.TerminalType == "" { subscriptionVO.TerminalType = "WEB" } request, subscriptionCreateRequest := subscription.NewAlipaySubscriptionCreateRequest() // replace with your subscriptionRequestId // You can save the relationship between the subscriptionRequestId and the user ID for later information retrieval. subscriptionRequestId := uuid.New().String() subscriptionCreateRequest.SubscriptionRequestId = subscriptionRequestId subscriptionCreateRequest.SubscriptionDescription = "Subscription Description" // set subscription start time and end time. you might want to consider time zones // If the start time is earlier than the authorization time, the subscription is successful. // If the start time is later than the authorization time, the payment is made after the successful authorization, which is the pre-sale // For details, please refer to: Samples subscriptionCreateRequest.SubscriptionStartTime = time.Now().Format("2006-01-02T15:04:05-07:00") subscriptionCreateRequest.SubscriptionEndTime = time.Now().AddDate(3, 0, 0).Format("2006-01-02T15:04:05-07:00") // set periodRule subscriptionCreateRequest.PeriodRule = &model.PeriodRule{ PeriodType: model.PeriodType(subscriptionVO.PeriodType), PeriodCount: subscriptionVO.PeriodCount, } // set paymentMethod subscriptionCreateRequest.PaymentMethod = &model.PaymentMethod{ PaymentMethodType: subscriptionVO.PaymentMethodType, } // 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(subscriptionVO.AmountValue, 64) amountValue := money.NewFromFloat(parseFloat, subscriptionVO.Currency).Amount() amount := &model.Amount{ Currency: subscriptionVO.Currency, Value: strconv.FormatInt(amountValue, 10), } // set payment amount subscriptionCreateRequest.PaymentAmount = amount // set order info subscriptionCreateRequest.OrderInfo = &model.OrderInfo{ OrderAmount: amount, } // set settlement strategy // replace with your existing settlement currency subscriptionCreateRequest.SettlementStrategy = &model.SettlementStrategy{ SettlementCurrency: "USD", } // set env info terminal := model.TerminalType(subscriptionVO.TerminalType) env := &model.Env{TerminalType: terminal} if terminal != model.WEB && subscriptionVO.OsType != "" { env.OsType = model.OsType(subscriptionVO.OsType) } subscriptionCreateRequest.Env = env `] }, `server-Go-API-code2`), _jsx(AntomChunk, { language: `go`, steps: [`specify-links`], chunks: [` // replace with your notify url // or configure your notify url here: Notification URL subscriptionCreateRequest.PaymentNotificationUrl = "http://www.yourNotifyUrl.com/subscriptions/receivePaymentNotify" subscriptionCreateRequest.SubscriptionNotificationUrl = "http://www.yourNotifyUrl.com/subscriptions/receiveSubscriptionNotify" // replace with your subscription redirect url subscriptionCreateRequest.SubscriptionRedirectUrl = "http://localhost:5173/index.html?subscriptionRequestId=" + subscriptionRequestId `] }, `server-Go-API-code3`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [` startTime := time.Now() subscriptionRequestJson, _ := json.Marshal(subscriptionCreateRequest) log.Printf("subscription create request: %s", subscriptionRequestJson) response, err := client.Execute(request) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", SubscriptionRequestID: subscriptionRequestId, Message: err.Error(), }) return } log.Printf("subscription create response: %+v", response) log.Printf("subscription create request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", SubscriptionRequestID: subscriptionRequestId, Data: response, }) } `] }, `server-Go-API-other3`), _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.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 } // deserialize the notification body var paymentNotify notify.AlipaySubscriptionPayNotify 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 payment information of the user is saved through the relationship between the subscriptionRequestId and the user ID. 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-code4`), _jsx(AntomChunk, { language: `go`, steps: [`receive-subscription-notification`], chunks: [`/* receive subscription notify */ func handleReceiveSubscriptionNotify(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 } // deserialize the notification body var subscriptionNotify notify.AlipaySubscriptionNotify if err := json.Unmarshal(rawBody, &subscriptionNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if subscriptionNotify.SubscriptionNotificationType == model.SubscriptionNotificationType_CREATE { // handle your own business logic. // e.g. The subscription information of the user is saved through the relationship between the subscriptionRequestId and the user ID. log.Printf("receive subscription 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) } // SubscriptionVO represents subscription request data type SubscriptionVO struct {`, ' PeriodType string `json:"periodType"`', ' PeriodCount int `json:"periodCount"`', ' 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"`', ' SubscriptionRequestID string `json:"subscriptionRequestId,omitempty"`', ' Message string `json:"message,omitempty"`', ' Data interface{} `json:"data,omitempty"`', `} `] }, `server-Go-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/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-subscription-request`, `specify-links`, `receive-payment-notification`, `receive-subscription-notification`], children: [_jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [`using System.Diagnostics; using ams_dotnet.com.alipay.ams.api.request.subscription; using ams_dotnet.com.alipay.ams.api.response.subscription; using Microsoft.AspNetCore; using Microsoft.AspNetCore.Mvc; 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.subscription.api { /** * 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 readonly 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 SubscriptionsController : ControllerBase {`] }, `server-.NET-API-other2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`initiate-a-subscription-request`], chunks: [` [HttpPost("create")] public IActionResult Create([FromBody] SubscriptionVO subscription) { var alipaySubscriptionCreateRequest = new AlipaySubscriptionCreateRequest(); // replace with your subscriptionRequestId. // You can save the relationship between the subscriptionRequestId and the user ID for later information retrieval. var subscriptionRequestId = Guid.NewGuid().ToString(); alipaySubscriptionCreateRequest.SubscriptionRequestId = subscriptionRequestId; alipaySubscriptionCreateRequest.SubscriptionDescription = "Subscription Description"; // set subscription start time and end time. you might want to consider time zones // If the start time is earlier than the authorization time, the subscription is successful. // If the start time is later than the authorization time, the payment is made after the successful authorization, which is the pre-sale // For details, please refer to: Samples var formatter = "yyyy-MM-dd'T'HH:mm:sszzz"; alipaySubscriptionCreateRequest.SubscriptionStartTime = DateTime.Now.ToString(formatter); alipaySubscriptionCreateRequest.SubscriptionEndTime = DateTime.Now.AddYears(3).ToString(formatter); // set periodRule Enum.TryParse(subscription.PeriodType, out PeriodType periodType); var periodRule = new PeriodRule() { PeriodCount = subscription.PeriodCount, PeriodType = periodType }; alipaySubscriptionCreateRequest.PeriodRule = periodRule; // set paymentMethod var paymentMethod = new PaymentMethod(subscription.PaymentMethodType); alipaySubscriptionCreateRequest.PaymentMethod = paymentMethod; // 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(subscription.AmountValue), Currency.Get(subscription.Currency)) .MinorIntegralAmount; var amount = new Amount() { Currency = subscription.Currency, Value = minorIntegralAmount.ToString() }; // set payment amount alipaySubscriptionCreateRequest.PaymentAmount = amount; // set order info var orderInfo = new OrderInfo() { OrderAmount = amount }; alipaySubscriptionCreateRequest.OrderInfo = orderInfo; // set settlement strategy // replace with your existing settlement currency var settlementStrategy = new SettlementStrategy() { SettlementCurrency = "USD" }; alipaySubscriptionCreateRequest.SettlementStrategy = settlementStrategy; // set env info Enum.TryParse(subscription.TerminalType, out TerminalType terminalType); var env = new Env() { TerminalType = terminalType }; if (!terminalType.Equals(TerminalType.WEB) && !string.IsNullOrWhiteSpace(subscription.OsType) && Enum.TryParse(subscription.OsType, out OsType osType)) { env.OsType = osType; } alipaySubscriptionCreateRequest.Env = env; `] }, `server-.NET-API-code2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`specify-links`], chunks: [` // replace with your notify url // or configure your notify url here: Notification URL alipaySubscriptionCreateRequest.PaymentNotificationUrl = "http://www.yourNotifyUrl.com/subscriptions/receivePaymentNotify"; alipaySubscriptionCreateRequest.SubscriptionNotificationUrl = "http://www.yourNotifyUrl.com/subscriptions/receiveSubscriptionNotify"; // replace with your subscription redirect url alipaySubscriptionCreateRequest.SubscriptionRedirectUrl = "http://localhost:8080/index.html?subscriptionRequestId=" + subscriptionRequestId; `] }, `server-.NET-API-code3`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("subscription create request: " + JsonConvert.SerializeObject(alipaySubscriptionCreateRequest, Formatting.Indented)); var alipaySubscriptionCreateResponse = Server.defaultAlipayClient.Execute(alipaySubscriptionCreateRequest); Console.WriteLine("subscription create response: " + JsonConvert.SerializeObject(alipaySubscriptionCreateResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine( "subscription create request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse(subscriptionRequestId, alipaySubscriptionCreateResponse)); } catch (Exception e) { return Ok(new ApiResponse(subscriptionRequestId, e)); } } `] }, `server-.NET-API-other3`), _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 paymentNotify = JsonConvert.DeserializeObject(notifyBody); if (paymentNotify != null && "SUCCESS".Equals(paymentNotify.Result.ResultCode)) { // handle your own business logic. // e.g. The payment information of the user is saved through the relationship between the subscriptionRequestId and the user ID. Console.WriteLine("receive payment notify: " + JsonConvert.SerializeObject(paymentNotify, Formatting.Indented)); return Ok(new Result() { ResultCode = "SUCCESS", ResultMessage = "success.", ResultStatus = "S" }); } } catch (Exception e) { return Ok(new Result() { ResultCode = "FAIL", ResultMessage = "fail.", ResultStatus = "F" }); } return Ok(new Result() { ResultCode = "SYSTEM_ERROR", ResultMessage = "system error.", ResultStatus = "F" }); } `] }, `server-.NET-API-code4`), _jsx(AntomChunk, { language: `dotnet`, steps: [`receive-subscription-notification`], chunks: [` ///

/// receive subscription notify ///

[HttpPost("receiveSubscriptionNotify")] public async Task ReceiveSubscriptionNotify() { // 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 subscriptionNotify = JsonConvert.DeserializeObject(notifyBody); if (subscriptionNotify != null && SubscriptionNotificationType.CREATE.Equals(subscriptionNotify.SubscriptionNotificationType)) { // handle your own business logic. // e.g. The subscription information of the user is saved through the relationship between the subscriptionRequestId and the user ID. Console.WriteLine("receive subscription notify: " + JsonConvert.SerializeObject(subscriptionNotify, Formatting.Indented)); return Ok(new Result() { ResultCode = "SUCCESS", ResultMessage = "success.", ResultStatus = "S" }); } } catch (Exception e) { return Ok(new Result() { ResultCode = "FAIL", ResultMessage = "fail.", ResultStatus = "F" }); } return Ok(new Result() { ResultCode = "SYSTEM_ERROR", ResultMessage = "system error.", ResultStatus = "F" }); }`] }, `server-.NET-API-code5`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` } public class SubscriptionVO { public string PeriodType { get; set; } public int PeriodCount { get; set; } 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; } } public class ApiResponse { public string Status { get; set; } = "success"; public string SubscriptionRequestId { get; set; } public string Message { get; set; } public object Data { get; set; } public ApiResponse(string subscriptionRequestId, object data) { SubscriptionRequestId = subscriptionRequestId; Data = data; } public ApiResponse(string subscriptionRequestId, Exception e) { SubscriptionRequestId = subscriptionRequestId; Status = "error"; Message = e.Message; } } } `] }, `server-.NET-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/html/index.html', when: { platform: 'Web', client: 'HTML', server: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `html`, filename: 'src/main/resources/static/index.html', downloadOnly: false, steps: [`build-the-antom-page`], children: _jsx(AntomChunk, { language: `html`, steps: [`build-the-antom-page`], chunks: [` Subscription Payment Demo

Subscription Payment Demo

Support plan

Onboarding time

Language supported

Inquiry response time

Select the support plan you want to subscribe to

`] }, `Web-HTML-API-code1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/html/index.js', when: { platform: 'Web', client: 'HTML', server: 'Java', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'src/main/resources/static/index.js', downloadOnly: false, steps: [`get-the-antom-push-link`, `handle-the-redirection`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`document.addEventListener('DOMContentLoaded', () => { const paymentOptions = [ { label: 'Standard', value: 'Standard', icon: 'https://cdn.marmot-cloud.com/storage/2022/12/20/4e873d78-0f2d-4553-895e-e5392eddda39.png', amountValue: '688.80', currency: 'HKD', onboardingTime: '3-5 working days', languageSupported: 'Chinese/English', inquiryResponseTime: '< 48 hours', }, { label: 'Premium', value: 'Premium', icon: ' https://cdn.marmot-cloud.com/storage/2022/12/19/d45c0b0f-a1f3-4ca9-99c7-f0ea74c5c6ac.png', amountValue: '1088.80', currency: 'HKD', onboardingTime: '1-2 working days', languageSupported: 'Chinese/English/Japanese/Korean', inquiryResponseTime: '< 24 hours', }, ]; const initialPaymentOption = paymentOptions.find( option => option.value === (localStorage.getItem('supportPlan') || 'Standard') ) || paymentOptions[0]; let selectedOption = initialPaymentOption; function updateDetails() { document.getElementById('selected-label').innerText = selectedOption.label; document.getElementById('onboarding-time').innerText = selectedOption.onboardingTime; document.getElementById('language-supported').innerText = selectedOption.languageSupported; document.getElementById('inquiry-response-time').innerText = selectedOption.inquiryResponseTime; document.getElementById( 'submit'`, ' ).innerText = `Pay \${selectedOption.currency} \${selectedOption.amountValue}`;', ` } function handlePaymentOptionChange(value) { const option = paymentOptions.find(option => option.value === value); if (option) { selectedOption = option; localStorage.setItem('supportPlan', selectedOption.value); updateDetails(); } } function updateSelectedOption(selectedValue) { document.querySelectorAll('.payment-option').forEach(labelElement => { const radioInput = labelElement.querySelector('input'); if (radioInput.value === selectedValue) { labelElement.classList.add('selected'); radioInput.checked = true; } else { labelElement.classList.remove('selected'); } }); } // Render payment options const checkoutBox = document.getElementById('checkout-box'); paymentOptions.forEach(({ label, value }) => { const labelElement = document.createElement('label');`, ' labelElement.className = `payment-option \${', ` selectedOption.value === value ? 'selected' : ''`, ' }`;', ' labelElement.innerHTML = `', ` \${label}`, ' `;', ` labelElement.querySelector('input').addEventListener('change', event => { handlePaymentOptionChange(event.target.value); updateSelectedOption(event.target.value); }); checkoutBox.appendChild(labelElement); }); updateDetails(); // Page error handling const renderAlert = alert => { const alertBox = document.getElementById('alert-box'); if (!alert.title) { alertBox.innerHTML = ''; 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', }; `, ' alertBox.innerHTML = `', `

\${alert.title}

\${alert.subTitle}

`, ' `;', ` }; // Step 4:Display the payment results at the bottom of the page. const renderPaymentResult = (paymentResult, orderId) => { const paymentResultBox = document.getElementById('payment-result'); if (!Object.keys(paymentResult).length) return null; const { title, message, icon, bgColor, borderColor } = paymentResult; `, ' paymentResultBox.innerHTML = `', `

\${title}

\${message}

`, ' `;', ` }; // Step 3: Select the rendered data according to the result of the payment. const handlePaymentStatus = (status, orderId) => { setTimeout(() => { window.location.href = './index.html'; localStorage.removeItem('supportPlan'); }, 8000); let paymentResult = {}; switch (status) { case 'SUCCESS': paymentResult = { 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': paymentResult = { 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': paymentResult = { 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: paymentResult = { 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) ', }; } renderPaymentResult(paymentResult, orderId); }; `] }, `Web-HTML-API-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-payment-result`], chunks: [` // Step 2: Get Subscription Payment Result const searchParams = new URLSearchParams(window.location.search); const resultStatus = searchParams.get('resultStatus'); if (resultStatus) { handlePaymentStatus(resultStatus); } `] }, `Web-HTML-API-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-the-antom-push-link`], chunks: [` // Step 1: Get consult data from the endpoint. const handleSubmit = async () => { document.getElementById('payment-result').innerHTML = ''; document.getElementById('submit').disabled = true; try { const url = 'http://localhost:8080/subscriptions/create'; const body = JSON.stringify({ periodCount: '4', periodType: 'YEAR', currency: selectedOption.currency, amountValue: selectedOption.amountValue, paymentMethodType: 'ALIPAY_HK', }); const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body, }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } `] }, `Web-HTML-API-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` const res = await response.json(); `] }, `Web-HTML-API-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`handle-the-redirection`], chunks: [` if ( res.status === 'success' && res.data.result.resultStatus === 'S' && res.data.normalUrl ) { location.href = res.data.normalUrl; }`] }, `Web-HTML-API-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` } catch (error) { renderAlert({ title: 'Error', subTitle: error.message || 'Failed to fetch payment session data', iconType: 'error', }); } finally { document.getElementById('submit').disabled = false; } }; document.getElementById('submit').addEventListener('click', handleSubmit); }); `] }, `Web-HTML-API-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/html/index.css', when: { platform: 'Web', 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); } .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; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding-top: 186px; } .detail-row { padding: 0; display: flex; width: 560px; height: 64px; margin-bottom: 8px; border: 1px solid #000; } .detail-row > div { flex: 1 1; display: flex; align-items: center; } .detail-header { border-right: 1px solid #000; padding-left: 24px; font-size: 16px; font-weight: 600; } .detail-content { justify-content: center; } .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; } .submit:disabled { background: #ccc; color: #666; cursor: not-allowed; } .radio-group { display: flex; flex-direction: column; } .radio-group label { display: flex; align-items: center; height: 46px; 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 */ .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 { 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 { 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/subscription/files/web/html/index.html', when: { platform: 'Web', client: 'HTML', integration_type: 'API' }, unless: { server: 'Java' }, children: _jsx(AntomFile, { language: `html`, filename: 'client/index.html', downloadOnly: false, steps: [`build-the-antom-page`], children: _jsx(AntomChunk, { language: `html`, steps: [`build-the-antom-page`], chunks: [` Subscription Payment Demo

Subscription Payment Demo

Support plan

Onboarding time

Language supported

Inquiry response time

Select the support plan you want to subscribe to

`] }, `Web-HTML-API-code1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/html/index.js', when: { platform: 'Web', client: 'HTML', integration_type: 'API' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/index.js', downloadOnly: false, steps: [`get-the-antom-push-link`, `handle-the-redirection`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`document.addEventListener('DOMContentLoaded', () => { const paymentOptions = [ { label: 'Standard', value: 'Standard', icon: 'https://cdn.marmot-cloud.com/storage/2022/12/20/4e873d78-0f2d-4553-895e-e5392eddda39.png', amountValue: '688.80', currency: 'HKD', onboardingTime: '3-5 working days', languageSupported: 'Chinese/English', inquiryResponseTime: '< 48 hours', }, { label: 'Premium', value: 'Premium', icon: ' https://cdn.marmot-cloud.com/storage/2022/12/19/d45c0b0f-a1f3-4ca9-99c7-f0ea74c5c6ac.png', amountValue: '1088.80', currency: 'HKD', onboardingTime: '1-2 working days', languageSupported: 'Chinese/English/Japanese/Korean', inquiryResponseTime: '< 24 hours', }, ]; const initialPaymentOption = paymentOptions.find( option => option.value === (localStorage.getItem('supportPlan') || 'Standard') ) || paymentOptions[0]; let selectedOption = initialPaymentOption; function updateDetails() { document.getElementById('selected-label').innerText = selectedOption.label; document.getElementById('onboarding-time').innerText = selectedOption.onboardingTime; document.getElementById('language-supported').innerText = selectedOption.languageSupported; document.getElementById('inquiry-response-time').innerText = selectedOption.inquiryResponseTime; document.getElementById( 'submit'`, ' ).innerText = `Pay \${selectedOption.currency} \${selectedOption.amountValue}`;', ` } function handlePaymentOptionChange(value) { const option = paymentOptions.find(option => option.value === value); if (option) { selectedOption = option; localStorage.setItem('supportPlan', selectedOption.value); updateDetails(); } } function updateSelectedOption(selectedValue) { document.querySelectorAll('.payment-option').forEach(labelElement => { const radioInput = labelElement.querySelector('input'); if (radioInput.value === selectedValue) { labelElement.classList.add('selected'); radioInput.checked = true; } else { labelElement.classList.remove('selected'); } }); } // Render payment options const checkoutBox = document.getElementById('checkout-box'); paymentOptions.forEach(({ label, value }) => { const labelElement = document.createElement('label');`, ' labelElement.className = `payment-option \${', ` selectedOption.value === value ? 'selected' : ''`, ' }`;', ' labelElement.innerHTML = `', ` \${label}`, ' `;', ` labelElement.querySelector('input').addEventListener('change', event => { handlePaymentOptionChange(event.target.value); updateSelectedOption(event.target.value); }); checkoutBox.appendChild(labelElement); }); updateDetails(); // Page error handling const renderAlert = alert => { const alertBox = document.getElementById('alert-box'); if (!alert.title) { alertBox.innerHTML = ''; 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', }; `, ' alertBox.innerHTML = `', `

\${alert.title}

\${alert.subTitle}

\${title}

\${message}

`, ' `;', ` }; // Step 3: Select the rendered data according to the result of the payment. const handlePaymentStatus = (status, orderId) => { setTimeout(() => { window.location.href = './index.html'; localStorage.removeItem('supportPlan'); }, 8000); let paymentResult = {}; switch (status) { case 'SUCCESS': paymentResult = { 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': paymentResult = { 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': paymentResult = { 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: paymentResult = { 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) ', }; } renderPaymentResult(paymentResult, orderId); }; `] }, `Web-HTML-API-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-payment-result`], chunks: [` // Step 2: Get Subscription Payment Result const searchParams = new URLSearchParams(window.location.search); const resultStatus = searchParams.get('resultStatus'); if (resultStatus) { handlePaymentStatus(resultStatus); } `] }, `Web-HTML-API-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-the-antom-push-link`], chunks: [` // Step 1: Get consult data from the endpoint. const handleSubmit = async () => { document.getElementById('payment-result').innerHTML = ''; document.getElementById('submit').disabled = true; try { const url = 'http://localhost:8080/subscriptions/create'; const body = JSON.stringify({ periodCount: '4', periodType: 'YEAR', currency: selectedOption.currency, amountValue: selectedOption.amountValue, paymentMethodType: 'ALIPAY_HK', }); const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body, }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } `] }, `Web-HTML-API-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` const res = await response.json(); `] }, `Web-HTML-API-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`handle-the-redirection`], chunks: [` if ( res.status === 'success' && res.data.result.resultStatus === 'S' && res.data.normalUrl ) { location.href = res.data.normalUrl; }`] }, `Web-HTML-API-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` } catch (error) { renderAlert({ title: 'Error', subTitle: error.message || 'Failed to fetch payment session data', iconType: 'error', }); } finally { document.getElementById('submit').disabled = false; } }; document.getElementById('submit').addEventListener('click', handleSubmit); }); `] }, `Web-HTML-API-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/html/index.css', when: { platform: 'Web', 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); } .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; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding-top: 186px; } .detail-row { padding: 0; display: flex; width: 560px; height: 64px; margin-bottom: 8px; border: 1px solid #000; } .detail-row > div { flex: 1 1; display: flex; align-items: center; } .detail-header { border-right: 1px solid #000; padding-left: 24px; font-size: 16px; font-weight: 600; } .detail-content { justify-content: center; } .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; } .submit:disabled { background: #ccc; color: #666; cursor: not-allowed; } .radio-group { display: flex; flex-direction: column; } .radio-group label { display: flex; align-items: center; height: 46px; 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 */ .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 { 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 { 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/subscription/files/web/react/App.jsx', when: { platform: 'Web', client: 'React', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/src/App.jsx', downloadOnly: false, steps: [`build-the-antom-page`, `get-the-antom-push-link`, `handle-the-redirection`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`import './App.css'; import { useEffect, useState } from 'react'; const paymentOptions = [ { label: 'Standard', value: 'Standard', icon: 'https://cdn.marmot-cloud.com/storage/2022/12/20/4e873d78-0f2d-4553-895e-e5392eddda39.png', amountValue: '688.80', currency: 'HKD', onboardingTime: '3-5 working days', languageSupported: 'Chinese/English', inquiryResponseTime: '< 48 hours', }, { label: 'Premium', value: 'Premium', icon: ' https://cdn.marmot-cloud.com/storage/2022/12/19/d45c0b0f-a1f3-4ca9-99c7-f0ea74c5c6ac.png', amountValue: '1088.80', currency: 'HKD', onboardingTime: '1-2 working days', languageSupported: 'Chinese/English/Japanese/Korean', inquiryResponseTime: '< 24 hours', }, ]; function App() { const initialPaymentOption = paymentOptions.find( (option) => option.value === (localStorage.getItem('supportPlan') || 'Standard') ) || paymentOptions[0]; const [selectedOption, setSelectedOption] = useState(initialPaymentOption); const [isBtnLoading, setBtnLoading] = useState(false); const [paymentResult, setPaymentResult] = useState({}); const [alert, setAlert] = useState({ title: '', subTitle: '', iconType: '', }); const handlePaymentOptionChange = (value) => { setPaymentResult({}); const option = paymentOptions.find((option) => option.value === value); if (option) { setSelectedOption(option); localStorage.setItem('supportPlan', option.value); } }; // Page error handling 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}

); }; // Step 4:Display the payment results at the bottom of the page. const renderPaymentResult = () => { if (!Object.keys(paymentResult).length) return null; const { title, message, icon, bgColor, borderColor } = paymentResult; return (

{title}

{message}

); }; // Step 3: Select the rendered data according to the result of the payment. const handlePaymentStatus = (status) => { setTimeout(() => { window.location.href = './index.html'; localStorage.removeItem('supportPlan'); }, 2000); 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) ', }); } }; `] }, `Web-React-API-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-payment-result`], chunks: [` // Step 2: Get Subscription Payment Result useEffect(() => { const searchParams = new URLSearchParams(window.location.search); const resultStatus = searchParams.get('resultStatus'); if (resultStatus) { handlePaymentStatus(resultStatus); } }, []); `] }, `Web-React-API-code4`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-the-antom-push-link`], chunks: [` // Step 1: Get consult data from the endpoint. const handleSubmit = async () => { setPaymentResult({}); setBtnLoading(true); if (!selectedOption.value) { setAlert({ title: 'Warning', subTitle: 'Please select a payment method!', iconType: 'warning', }); setBtnLoading(false); return null; } try { const url = 'http://localhost:8080/subscriptions/create'; const body = JSON.stringify({ periodCount: '4', periodType: 'YEAR', currency: selectedOption.currency, amountValue: selectedOption.amountValue, paymentMethodType: 'ALIPAY_HK', }); const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body, }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } `] }, `Web-React-API-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` const res = await response.json(); `] }, `Web-React-API-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`handle-the-redirection`], chunks: [` if ( res.status === 'success' && res.data.result.resultStatus === 'S' && res.data.normalUrl ) { location.href = res.data.normalUrl; }`] }, `Web-React-API-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` } catch (error) { setAlert({ title: 'Error', subTitle: error.message || 'Failed to fetch payment session data', iconType: 'error', }); return null; } finally { setBtnLoading(false); } }; `] }, `Web-React-API-other3`), _jsx(AntomChunk, { language: `javascript`, steps: [`build-the-antom-page`], chunks: [` return ( <>

Subscription Payment Demo

Support plan

{selectedOption.label}

Onboarding time

{selectedOption.onboardingTime}

Language supported

{selectedOption.languageSupported}

Inquiry response time

{selectedOption.inquiryResponseTime}

Select the support plan you want to subscribe to

{paymentOptions.map( ({ label, value }) => { return ( { handlePaymentOptionChange( event.target .value ); }} checked={ selectedOption.value === value } /> {label} ); } )}

{renderPaymentResult()}

{renderAlert()}

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

); } `] }, `Web-React-API-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`export default App; `] }, `Web-React-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/react/App.css', when: { platform: 'Web', client: 'React', integration_type: 'API' }, 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); } .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; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding-top: 186px; } .detail-row { padding: 0; display: flex; width: 560px; height: 64px; margin-bottom: 8px; border: 1px solid #000; } .detail-row > div { flex: 1 1; display: flex; align-items: center; } .detail-header { border-right: 1px solid #000; padding-left: 24px; font-size: 16px; font-weight: 600; } .detail-content { justify-content: center; } .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; } .submit:disabled { background: #ccc; color: #666; cursor: not-allowed; } .radio-group { display: flex; flex-direction: column; } .radio-group label { display: flex; align-items: center; height: 46px; 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 */ .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 { 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 { 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/react/main.jsx', when: { platform: 'Web', client: 'React', integration_type: 'API' }, 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/react/index.html', when: { platform: 'Web', client: 'React', integration_type: 'API' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/index.html', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` Antom Demo Checkout

`] }, `Web-React-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/react/package.json', when: { platform: 'Web', client: 'React', integration_type: 'API' }, 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": { "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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/react/README.md', when: { platform: 'Web', client: 'React', integration_type: 'API' }, 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://global.alipay.com/docs/). 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/react/vite.config.js', when: { platform: 'Web', client: 'React', integration_type: 'API' }, 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/vue/App.vue', when: { platform: 'Web', client: 'Vue', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/src/App.vue', downloadOnly: false, steps: [`build-the-antom-page`, `get-the-antom-push-link`, `handle-the-redirection`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [`build-the-antom-page`], chunks: [` `] }, `Web-Vue-API-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` `] }, `Web-Vue-API-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/vue/main.ts', when: { platform: 'Web', client: 'Vue', integration_type: 'API' }, 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/vue/tsconfig.node.json', when: { platform: 'Web', client: 'Vue', integration_type: 'API' }, 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/vue/index.html', when: { platform: 'Web', client: 'Vue', integration_type: 'API' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/index.html', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` Antom Demo Checkout

`] }, `Web-Vue-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/vue/tsconfig.app.json', when: { platform: 'Web', client: 'Vue', integration_type: 'API' }, 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/vue/package.json', when: { platform: 'Web', client: 'Vue', integration_type: 'API' }, 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/vue/tsconfig.json', when: { platform: 'Web', client: 'Vue', integration_type: 'API' }, 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/web/vue/vite.config.ts', when: { platform: 'Web', client: 'Vue', integration_type: 'API' }, 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/android/java/MainActivity.java', when: { platform: 'Android', client: 'Java', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `java`, filename: 'client/src/main/java/com/antom/subscription_java/MainActivity.java', downloadOnly: false, steps: [`build-the-antom-page`, `get-the-antom-push-link`, `handle-the-redirection`, `listen-for-callback-addresses`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.subscription_java; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.annotation.SuppressLint; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.text.TextUtils; import android.view.View; import android.widget.Button; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; import com.antom.subscription_java.Common.*; import org.json.JSONObject; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; public class MainActivity extends AppCompatActivity { SubscriptionRequest request; TextView tvAmount; Button tvPay; ExecutorService executorService = Executors.newSingleThreadExecutor(); private int selectedPlan = -1; private View btnNormal, btnPro; `] }, `Android-Java-API-other1`), _jsx(AntomChunk, { language: `java`, steps: [`build-the-antom-page`], chunks: [` @SuppressLint("SetTextI18n") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.subscription_main); request = new SubscriptionRequest("680.80", "HKD", "ALIPAY_HK", 1, "YEAR"); tvAmount = findViewById(R.id.tv_amount); tvAmount.setText("Select the support plan you want to subscribe to "); btnNormal = findViewById(R.id.standardV); btnPro = findViewById(R.id.proV); tvPay = findViewById(R.id.tv_pay); btnNormal.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { selectedPlan = 0; updateDisplay(); } }); btnPro.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { selectedPlan = 1; updateDisplay(); } }); tvPay.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { subscriptionPayment(); } }); } private void applyScaleAnimation(View view, float startScale, float endScale) { ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(view, "scaleX", startScale, endScale); ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(view, "scaleY", startScale, endScale); AnimatorSet scaleDown = new AnimatorSet(); scaleDown.play(scaleDownX).with(scaleDownY); scaleDown.setDuration(500); scaleDown.start(); } void updateDisplay() { if (selectedPlan == 0) { applyScaleAnimation(btnNormal, 0.5f, 1.0f); btnPro.setScaleX(1.0f); btnPro.setScaleY(1.0f); btnNormal.setBackgroundResource(R.drawable.selectedboard); btnPro.setBackgroundResource(0); } else { applyScaleAnimation(btnPro, 0.5f, 1.0f); btnNormal.setScaleX(1.0f); btnNormal.setScaleY(1.0f); btnPro.setBackgroundResource(R.drawable.selectedboard); btnNormal.setBackgroundResource(0); } tvPay.setEnabled(selectedPlan != -1); if (selectedPlan == 0) { request.setAmountValue("680.80"); request.setPeriodType("YEAR"); } else { request.setAmountValue("1088.80"); request.setPeriodType("YEAR"); } tvPay.setText(String.format("%s PAY - %s - %s", request.getPeriodType(), request.getCurrency(), request.getAmountValue())); } `] }, `Android-Java-API-code1`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` String bodySubscriptionParamsJson() { // you can use Gson or other Json format utils return "{" + "\\"amountValue\\":\\"" + request.getAmountValue() + "\\"," + "\\"currency\\":\\"" + request.getCurrency() + "\\"," + "\\"paymentMethodType\\":\\"" + request.getPaymentMethodType() + "\\"," + "\\"periodCount\\":" + request.getPeriodCount() + "\\"," + "\\"periodType\\":\\"" + request.getPeriodType() + "\\"" + "}"; } `] }, `Android-Java-API-other2`), _jsx(AntomChunk, { language: `java`, steps: [`get-the-antom-push-link`], chunks: [` public void subscriptionPayment() { LoadingIndicator.getInstance().showLoading(this); if (selectedPlan == -1) { AlertUtils.showAlertWithMessage(this, "Select yout plan"); return; } executorService.submit(() -> { HttpService.HttpResponse response = HttpService.instance.request(HttpService.Method.POST, "/subscriptions/create", bodySubscriptionParamsJson(), null); runOnUiThread(() -> { LoadingIndicator.getInstance().dismissLoading(); if (response.getErrorMessage() != null) { AlertUtils.showAlertWithMessage(MainActivity.this, response.getErrorMessage()); } else { SubscriptionResult subscriptionResult = new SubscriptionResult( response.getResponseBody().optJSONObject("data"), response.getResponseBody().optString("paymentRequestId"), response.getResponseBody().optString("authState"), response.getResponseBody().optString("status"), response.getResponseBody().optString("message")); subscriptionUrlProcess(subscriptionResult); } }); }); } `] }, `Android-Java-API-code2`), _jsx(AntomChunk, { language: `java`, steps: [`handle-the-redirection`], chunks: [` private void subscriptionUrlProcess(SubscriptionResult result) { JSONObject data = result.getData(); if (data == null) { AlertUtils.showAlertWithMessage(this, "No data in SubscriptionResult"); return; } String schemeUrl = !data.isNull("schemeUrl") ? data.optString("schemeUrl") : null; String appLinkUrl = !data.isNull("schemeUrl") ? data.optString("applinkUrl") : null; String normalUrl = !data.isNull("normalUrl") ? data.optString("normalUrl") : null; if (!TextUtils.isEmpty(schemeUrl)) { String packageName = data.optString("appIdentifier"); schemeUrlRedirect(schemeUrl, appLinkUrl, normalUrl, packageName); return; } if (!TextUtils.isEmpty(appLinkUrl)) { String packageName = data.optString("appIdentifier"); appLinkUrlRedirect(appLinkUrl, normalUrl, packageName); } if (!TextUtils.isEmpty(normalUrl)) { normalUrlRedirect(normalUrl); } } `] }, `Android-Java-API-code3`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` private void schemeUrlRedirect(String schemeUrl, String appLinkUrl, String normalUrl, String packageName) { try { Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(schemeUrl)); if (!TextUtils.isEmpty(packageName)) { intent.setPackage(packageName); } intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); startActivity(intent, null); } catch (Exception e) { appLinkUrlRedirect(appLinkUrl, normalUrl, packageName); } } private void appLinkUrlRedirect(String applinkUrl, String normalUrl, String packageName) { try { Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(applinkUrl)); if (!TextUtils.isEmpty(packageName)) { intent.setPackage(packageName); } intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); startActivity(intent, null); } catch (Exception e) { normalUrlRedirect(normalUrl); } } private void normalUrlRedirect(String normalUrl) { try { Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(normalUrl)); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); startActivity(intent, null); } catch (Exception e) { AlertUtils.showAlertWithMessage(this, "Fail to redirect"); } } `] }, `Android-Java-API-other3`), _jsx(AntomChunk, { language: `java`, steps: [`listen-for-callback-addresses`], chunks: [` @Override protected void onNewIntent(Intent intent) { super.onNewIntent(intent); Uri uri = intent.getData();`] }, `Android-Java-API-code4`), _jsx(AntomChunk, { language: `java`, steps: [`display-the-payment-result`], chunks: [` if (uri != null) { String subscriptionRequestId = uri.getQueryParameter("subscriptionRequestId"); String resultStatus = uri.getQueryParameter("resultStatus"); AlertUtils.showAlertWithMessage(this, String.format("%s%s", subscriptionRequestId, resultStatus)); }`] }, `Android-Java-API-code5`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` } } `] }, `Android-Java-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/android/java/Common.java', when: { platform: 'Android', client: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/java/com/antom/subscription_java/Common.java', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.subscription_java; 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://10.0.2.2: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; } } public static class SubscriptionRequest { private final String paymentMethodType; private String amountValue; private String currency; private Integer periodCount; private String periodType; public SubscriptionRequest( String amountValue, String currency, String paymentMethodType, Integer periodCount, String periodType ) { this.amountValue = amountValue; this.currency = currency; this.paymentMethodType = paymentMethodType; this.periodCount = periodCount; this.periodType = periodType; } public Integer getPeriodCount() { return periodCount; } public void setPeriodCount(Integer periodCount) { this.periodCount = periodCount; } public String getPeriodType() { return periodType; } public void setPeriodType(String periodType) { this.periodType = periodType; } public String getAmountValue() { return amountValue; } public void setAmountValue(String amountValue) { this.amountValue = amountValue; } public String getCurrency() { return currency; } public void setCurrency(String currency) { this.currency = currency; } public String getPaymentMethodType() { return paymentMethodType; } } public static class SubscriptionResult { private final JSONObject data; private final String paymentRequestId; private final String authState; private final String status; private final String message; public SubscriptionResult(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; } } } `] }, `Android-Java-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/android/java/AndroidManifest.xml', when: { platform: 'Android', client: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/AndroidManifest.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`

`] }, `Android-Java-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/android/java/standard.xml', when: { platform: 'Android', client: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/drawable/standard.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/android/java/boarddash.xml', when: { platform: 'Android', client: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/drawable/boarddash.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/android/java/selectedboard.xml', when: { platform: 'Android', client: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/drawable/selectedboard.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/android/java/pro.xml', when: { platform: 'Android', client: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/drawable/pro.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `Android-Java-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/android/java/ic_launcher_background.xml', when: { platform: 'Android', client: 'Java', integration_type: 'API' }, 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-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/android/java/subscription_main.xml', when: { platform: 'Android', client: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `java`, filename: 'client/src/main/res/layout/subscription_main.xml', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` `] }, `iOS-Objective-C-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/ViewController.swift', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `swift`, filename: 'client/ViewController.swift', downloadOnly: false, steps: [`build-the-antom-page`, `get-the-antom-push-link`, `handle-the-redirection`], children: [_jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [`import UIKit `] }, `iOS-Swift-API-other1`), _jsx(AntomChunk, { language: `swift`, steps: [`build-the-antom-page`], chunks: [`class ViewController: UIViewController { @IBOutlet weak var standardTopV: UIView! @IBOutlet weak var premiunmTopV: UIView! @IBOutlet weak var btncheckout: UIButton! @IBOutlet weak var standardV: UIStackView! @IBOutlet weak var premiumV: UIStackView! var planType: Int = -1 lazy var subrequest: [String:Any] = { return ["periodCount":1,"periodType":"YEAR","currency":"HKD","amountValue":"688.80","paymentMethodType":"ALIPAY_HK"] }() override func viewDidLoad() { super.viewDidLoad() setUpView() } func setUpView() { self.planType = -1 addLayerForView(from:UIColor.init(red: 229/255.0, green: 230/255.0, blue: 227/255.0, alpha: 1), to: UIColor.init(red: 172/255.0, green: 172/255.0, blue: 172/255.0, alpha: 1), v:self.standardTopV) addLayerForView(from:UIColor.init(red: 237/255.0, green: 220/255.0, blue: 170/255.0, alpha: 1), to: UIColor.init(red: 203/255.0, green: 179/255.0, blue: 111/255.0, alpha: 1), v:self.premiunmTopV) standardV.clipsToBounds = true standardV.layer.borderWidth = 2 premiumV.clipsToBounds = true premiumV.layer.borderWidth = 2 premiumV.layer.borderColor = UIColor.clear.cgColor standardV.layer.borderColor = UIColor.clear.cgColor btncheckout.addTarget(self, action: #selector(subscribePayment), for: .touchUpInside) let tap1 = UITapGestureRecognizer(target: self, action: #selector(selectPlan)) let tap2 = UITapGestureRecognizer(target: self, action: #selector(selectPlan)) standardV.addGestureRecognizer(tap1) premiumV.addGestureRecognizer(tap2) } func addLayerForView(from:UIColor,to:UIColor,v: UIView) { let gradientLayer = CAGradientLayer() gradientLayer.colors = [from.cgColor, to.cgColor] gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0) gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0) gradientLayer.frame = v.bounds v.layer.insertSublayer(gradientLayer, at: 0) } func updateCheckoutDisplay(request: [String:Any]) { btncheckout.backgroundColor = planType == -1 ? UIColor.gray : UIColor.blue let title = planType == -1 ? "Pay" : "Pay \\(String(describing: request["currency"] as! String))-\\(String(describing: request["amountValue"] as! String))" btncheckout.setTitle(title, for: .normal) } @objc func selectPlan(_ tap: UITapGestureRecognizer) { if tap.view?.tag == 0 { standardV.layer.borderColor = UIColor(red: 234.0/255.0, green: 221/255.0, blue: 176/255.0, alpha: 1).cgColor premiumV.layer.borderColor = UIColor.clear.cgColor subrequest["amountValue"] = "688.80" } else { premiumV.layer.borderColor = UIColor(red: 234.0/255.0, green: 221/255.0, blue: 176/255.0, alpha: 1).cgColor standardV.layer.borderColor = UIColor.clear.cgColor subrequest["amountValue"] = "1088.80" } UIView.animate(withDuration: 0.5) { tap.view?.transform = CGAffineTransform(scaleX: 0.5, y: 0.5) tap.view?.transform = CGAffineTransform.identity tap.view?.alpha = 0.5 tap.view?.alpha = 1 } planType = tap.view?.tag ?? -1 updateCheckoutDisplay(request: subrequest) } func dicWithPaymethod(plan: [String:Any]) -> [String: Any?] { return [ "amountValue": plan["amountValue"] , "currency": plan["currency"], "paymentMethodType": plan["paymentMethodType"], "periodCount": 1, "periodType": "YEAR" // or MONTH ] } `] }, `iOS-Swift-API-code1`), _jsx(AntomChunk, { language: `swift`, steps: [`get-the-antom-push-link`], chunks: [` @objc func subscribePayment() { if planType == -1 { AlterUtils.showAlertWithMessage("Select your Plan First") return } LoadingIndicator.sharedInstance.showLoading(in: self.view) HttpService.sharedInstance.request(method: HttpMethod.POST, urlPath: "/subscriptions/create", body: dicWithPaymethod(plan: subrequest), requestParam: nil) { response in DispatchQueue.main.async { LoadingIndicator.sharedInstance.dismissLoading() if let errorMessage = response.errorMessage { print("Antom --- Error: \\(errorMessage)") AlterUtils.showAlertWithMessage(errorMessage) } else if let data = response.responseBody?["data"] as? [String: Any] { if let schemeUrl = data["schemeUrl"] as? String { self.schemeUrlRedirect(schemeUrl: schemeUrl, appLinkUrl: data["applinkUrl"] as? String, normalUrl: data["normalUrl"] as? String) } else { AlterUtils.showAlertWithMessage("No data available") } } } } } `] }, `iOS-Swift-API-code2`), _jsx(AntomChunk, { language: `swift`, steps: [`handle-the-redirection`], chunks: [` func schemeUrlRedirect(schemeUrl: String, appLinkUrl: String?, normalUrl: String?) { guard let url = URL(string: schemeUrl) else { appLinkUrlRedirect(appLinkUrl: appLinkUrl, normalUrl: normalUrl) return } UIApplication.shared.open(url, options: [:], completionHandler: nil) } `] }, `iOS-Swift-API-code3`), _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [` func appLinkUrlRedirect(appLinkUrl: String?, normalUrl: String?) { guard let url = URL(string: appLinkUrl ?? "") else { normalUrlRedirect(normalUrl: normalUrl) return } UIApplication.shared.open(url, options: [:], completionHandler: nil) } func normalUrlRedirect(normalUrl: String?) { guard let url = URL(string: normalUrl ?? "") else { AlterUtils.showAlertWithMessage("Fail to redirect") return } UIApplication.shared.open(url, options: [:], completionHandler: nil) } } `] }, `iOS-Swift-API-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/AppDelegate.swift', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `swift`, filename: 'client/AppDelegate.swift', downloadOnly: false, steps: [`listen-for-callback-addresses`, `display-the-payment-result`], children: [_jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [`// // AppDelegate.swift // subscription_payment_swift // // Created by on 2024/10/14. // import UIKit @main class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow?`] }, `iOS-Swift-API-other1`), _jsx(AntomChunk, { language: `swift`, steps: [`listen-for-callback-addresses`], chunks: [` func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { // custom scheme logic print("----\\(url)") if url.scheme == "subscription" { handleSubRedirectUrl(url) } return true } `] }, `iOS-Swift-API-code1`), _jsx(AntomChunk, { language: `swift`, steps: [`display-the-payment-result`], chunks: [` func handleSubRedirectUrl(_ url: URL) { if let components = URLComponents(url: url, resolvingAgainstBaseURL: false) { var queryItemsDict = [String: String]() for item in components.queryItems ?? [] { queryItemsDict[item.name] = item.value } guard let subscriptionRequestId = queryItemsDict["subscriptionRequestId"], let resultStatus = queryItemsDict["resultStatus"] else { AlterUtils.showAlertWithMessage("subscriptionRequestId resultStatus and can not be nil") return } if resultStatus == "SUCCESS" { AlterUtils.showAlertWithMessage("Subscription Success \\n\\(subscriptionRequestId)") } else { AlterUtils.showAlertWithMessage("Subscription Failed \\n\\(subscriptionRequestId)") } } } `] }, `iOS-Swift-API-code2`), _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [` } `] }, `iOS-Swift-API-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/Common.swift', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsx(AntomFile, { language: `swift`, filename: 'client/Common.swift', downloadOnly: false, steps: [], children: _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [`// // Common.swift // subscription_payment_swift // // Created by ant on 2024/11/13. // import Foundation import UIKit class LoadingIndicator { static let sharedInstance = LoadingIndicator() private var activityIndicator: UIActivityIndicatorView! private var overlayView: UIView! func showLoading(in view: UIView) { if overlayView == nil { overlayView = UIView(frame: view.bounds) overlayView.backgroundColor = UIColor(white: 0, alpha: 0.3) activityIndicator = UIActivityIndicatorView(style: .white) activityIndicator.center = overlayView.center overlayView.addSubview(activityIndicator) } activityIndicator.startAnimating() view.addSubview(overlayView) overlayView.alpha = 0.0 UIView.animate(withDuration: 0.3) { self.overlayView.alpha = 1.0 } } func dismissLoading() { UIView.animate(withDuration: 0.3, animations: { self.overlayView.alpha = 0.0 }) { _ in self.activityIndicator.stopAnimating() self.overlayView.removeFromSuperview() self.overlayView = nil self.activityIndicator = nil } } } extension CALayer { @IBInspectable var borderUIColor: UIColor { get { return UIColor(cgColor: self.borderColor!) } set { self.borderColor = newValue.cgColor } } } class AlterUtils: NSObject { static func showAlertWithMessage(_ message: String) { let topViewController = self.topViewController() if let topVC = topViewController { let alertController = UIAlertController(title: "Tip", message: message, preferredStyle: .alert) let okAction = UIAlertAction(title: "Close", style: .default, handler: nil) alertController.addAction(okAction) topVC.present(alertController, animated: true, completion: nil) } } static func topViewController() -> UIViewController? { if let rootViewController = UIApplication.shared.keyWindow?.rootViewController { return topViewControllerFrom(rootViewController) } return nil } static func topViewControllerFrom(_ vc: UIViewController?) -> UIViewController? { if let presentedViewController = vc?.presentedViewController { return topViewControllerFrom(presentedViewController) } else if let navController = vc as? UINavigationController { return topViewControllerFrom(navController.visibleViewController) } else if let tabBarController = vc as? UITabBarController { return topViewControllerFrom(tabBarController.selectedViewController) } else { return vc } } } // HttpMethod Enum enum HttpMethod: String { case GET case POST } // HttpResponse Class class HttpResponse { var responseBody: [String: Any]? var errorMessage: String? static func success(with responseBody: [String: Any]) -> HttpResponse { let response = HttpResponse() response.responseBody = responseBody return response } static func failure(with errorMessage: String) -> HttpResponse { let response = HttpResponse() response.errorMessage = errorMessage return response } } // HttpService Singleton Class class HttpService { static let sharedInstance = HttpService() private let HOST_URL = "http://127.0.0.1:8080" private init() {} func request(method: HttpMethod, urlPath: String, body: [String: Any]?, requestParam: [String: Any]?, completion: @escaping (HttpResponse) -> Void) { let fullUrl = buildUrl(urlPath: urlPath, params: requestParam) guard let url = URL(string: fullUrl) else { completion(HttpResponse.failure(with: "Invalid URL")) return } var request = URLRequest(url: url) request.setValue("application/json", forHTTPHeaderField: "Content-Type") if method == .POST { guard let body = body else { completion(HttpResponse.failure(with: "Body is nil for POST request")) return } do { let jsonData = try JSONSerialization.data(withJSONObject: body, options: []) request.httpMethod = method.rawValue request.httpBody = jsonData } catch { completion(HttpResponse.failure(with: error.localizedDescription)) return } } else { request.httpMethod = method.rawValue } print("Requesting URL: \\(fullUrl)") print("Request Method: \\(method.rawValue)") print("Request Headers: \\(String(describing: request.allHTTPHeaderFields))") print("Request Body: \\(String(describing: body))") let task = URLSession.shared.dataTask(with: request) { data, response, error in if let error = error { completion(HttpResponse.failure(with: error.localizedDescription)) return } guard let data = data else { completion(HttpResponse.failure(with: "No data received")) return } do { if let jsonResponse = try JSONSerialization.jsonObject(with: data, options: []) as? [String: Any], let status = jsonResponse["status"] as? String, status == "success" { completion(HttpResponse.success(with: jsonResponse)) } else { completion(HttpResponse.failure(with: "Error or status not successful")) } } catch { completion(HttpResponse.failure(with: error.localizedDescription)) } } task.resume() } private func buildUrl(urlPath: String, params: [String: Any]?) -> String { var urlString = "\\(HOST_URL)\\(urlPath)" if let params = params, !params.isEmpty { urlString.append("?") let queryItems = params.map { key, value in "\\(urlEncode(key))=\\(urlEncode("\\(value)"))" } urlString.append(queryItems.joined(separator: "&")) } return urlString } private func urlEncode(_ string: String) -> String { return string.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? string } } struct ImageBase64Converter { static func imageToBase64(image: UIImage) -> String? { guard let imageData = image.pngData() else { return nil } return imageData.base64EncodedString(options: .lineLength64Characters) } static func base64ToImage(base64String: String) -> UIImage? { guard let imageData = Data(base64Encoded: base64String) else { return nil } return UIImage(data: imageData) } } class SwiftPaymentMethodView: Codable { var icon: String var title: String var paymentMethodCode: String var currency: String var amount: String // Initializer init(icon: String, title: String, paymentMethodCode: String, currency: String, amount: String) { self.icon = icon self.title = title self.paymentMethodCode = paymentMethodCode self.currency = currency self.amount = amount } func formatAmount() -> String { return "\\(currency) \\(amount)" } } class SwiftPaymentMethodViewCell: UITableViewCell { @IBOutlet weak var radioButton: UIButton! @IBOutlet weak var titleLabel: UILabel! // Renamed for clarity @IBOutlet weak var iconImageView: UIImageView! override func awakeFromNib() { super.awakeFromNib() self.selectionStyle = .none if #available(iOS 13.0, *) { radioButton.setImage(UIImage.init(systemName: "circle"), for: .normal) radioButton.setImage(UIImage(systemName: "checkmark.circle"), for: .selected) } else { //TODO: custom image } } func configure(with paymentMethod: SwiftPaymentMethodView, selected: Bool) { self.paymentMethod = paymentMethod // Set the radio button state radioButton.isSelected = selected self.iconImageView.image = ImageBase64Converter.base64ToImage(base64String: paymentMethod.icon) self.titleLabel.text = paymentMethod.title } private var paymentMethod: SwiftPaymentMethodView! } class InquiryPaymentResult { var data: [String: Any]? var paymentRequestId: String? var authState: String? var status: String? var message: String? init(data: [String: Any], paymentRequestId: String, authState: String, status: String, message: String) { self.data = data self.paymentRequestId = paymentRequestId self.authState = authState self.status = status self.message = message } static func parse(from json: [String: Any]) -> InquiryPaymentResult? { guard let data = json["data"] as? [String: Any], let paymentRequestId = json["paymentRequestId"] as? String, let authState = json["authState"] as? String, let status = json["status"] as? String, let message = json["message"] as? String else { return nil } return InquiryPaymentResult(data: data, paymentRequestId: paymentRequestId, authState: authState, status: status, message: message) } } `] }, `iOS-Swift-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/ViewController.swift', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsx(AntomFile, { language: `swift`, filename: 'client/ViewController.swift', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [`import UIKit class ViewController: UIViewController { @IBOutlet weak var standardTopV: UIView! @IBOutlet weak var premiunmTopV: UIView! @IBOutlet weak var btncheckout: UIButton! @IBOutlet weak var standardV: UIStackView! @IBOutlet weak var premiumV: UIStackView! var planType: Int = -1 lazy var subrequest: [String:Any] = { return ["periodCount":1,"periodType":"YEAR","currency":"HKD","amountValue":"688.80","paymentMethodType":"ALIPAY_HK"] }() override func viewDidLoad() { super.viewDidLoad() setUpView() } func setUpView() { self.planType = -1 addLayerForView(from:UIColor.init(red: 229/255.0, green: 230/255.0, blue: 227/255.0, alpha: 1), to: UIColor.init(red: 172/255.0, green: 172/255.0, blue: 172/255.0, alpha: 1), v:self.standardTopV) addLayerForView(from:UIColor.init(red: 237/255.0, green: 220/255.0, blue: 170/255.0, alpha: 1), to: UIColor.init(red: 203/255.0, green: 179/255.0, blue: 111/255.0, alpha: 1), v:self.premiunmTopV) standardV.clipsToBounds = true standardV.layer.borderWidth = 2 premiumV.clipsToBounds = true premiumV.layer.borderWidth = 2 premiumV.layer.borderColor = UIColor.clear.cgColor standardV.layer.borderColor = UIColor.clear.cgColor btncheckout.addTarget(self, action: #selector(subscribePayment), for: .touchUpInside) let tap1 = UITapGestureRecognizer(target: self, action: #selector(selectPlan)) let tap2 = UITapGestureRecognizer(target: self, action: #selector(selectPlan)) standardV.addGestureRecognizer(tap1) premiumV.addGestureRecognizer(tap2) } func addLayerForView(from:UIColor,to:UIColor,v: UIView) { let gradientLayer = CAGradientLayer() gradientLayer.colors = [from.cgColor, to.cgColor] gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0) gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0) gradientLayer.frame = v.bounds v.layer.insertSublayer(gradientLayer, at: 0) } func updateCheckoutDisplay(request: [String:Any]) { btncheckout.backgroundColor = planType == -1 ? UIColor.gray : UIColor.blue let title = planType == -1 ? "Pay" : "Pay \\(String(describing: request["currency"] as! String))-\\(String(describing: request["amountValue"] as! String))" btncheckout.setTitle(title, for: .normal) } @objc func selectPlan(_ tap: UITapGestureRecognizer) { if tap.view?.tag == 0 { standardV.layer.borderColor = UIColor(red: 234.0/255.0, green: 221/255.0, blue: 176/255.0, alpha: 1).cgColor premiumV.layer.borderColor = UIColor.clear.cgColor subrequest["amountValue"] = "688.80" } else { premiumV.layer.borderColor = UIColor(red: 234.0/255.0, green: 221/255.0, blue: 176/255.0, alpha: 1).cgColor standardV.layer.borderColor = UIColor.clear.cgColor subrequest["amountValue"] = "1088.80" } UIView.animate(withDuration: 0.5) { tap.view?.transform = CGAffineTransform(scaleX: 0.5, y: 0.5) tap.view?.transform = CGAffineTransform.identity tap.view?.alpha = 0.5 tap.view?.alpha = 1 } planType = tap.view?.tag ?? -1 updateCheckoutDisplay(request: subrequest) } func dicWithPaymethod(plan: [String:Any]) -> [String: Any?] { return [ "amountValue": plan["amountValue"] , "currency": plan["currency"], "paymentMethodType": plan["paymentMethodType"], "periodCount": 1, "periodType": "YEAR" // or MONTH ] } @objc func subscribePayment() { if planType == -1 { AlterUtils.showAlertWithMessage("Select your Plan First") return } LoadingIndicator.sharedInstance.showLoading(in: self.view) HttpService.sharedInstance.request(method: HttpMethod.POST, urlPath: "/subscriptions/create", body: dicWithPaymethod(plan: subrequest), requestParam: nil) { response in DispatchQueue.main.async { LoadingIndicator.sharedInstance.dismissLoading() if let errorMessage = response.errorMessage { print("Antom --- Error: \\(errorMessage)") AlterUtils.showAlertWithMessage(errorMessage) } else if let data = response.responseBody?["data"] as? [String: Any] { if let schemeUrl = data["schemeUrl"] as? String { self.schemeUrlRedirect(schemeUrl: schemeUrl, appLinkUrl: data["applinkUrl"] as? String, normalUrl: data["normalUrl"] as? String) } else { AlterUtils.showAlertWithMessage("No data available") } } } } } func schemeUrlRedirect(schemeUrl: String, appLinkUrl: String?, normalUrl: String?) { guard let url = URL(string: schemeUrl) else { appLinkUrlRedirect(appLinkUrl: appLinkUrl, normalUrl: normalUrl) return } UIApplication.shared.open(url, options: [:], completionHandler: nil) } func appLinkUrlRedirect(appLinkUrl: String?, normalUrl: String?) { guard let url = URL(string: appLinkUrl ?? "") else { normalUrlRedirect(normalUrl: normalUrl) return } UIApplication.shared.open(url, options: [:], completionHandler: nil) } func normalUrlRedirect(normalUrl: String?) { guard let url = URL(string: normalUrl ?? "") else { AlterUtils.showAlertWithMessage("Fail to redirect") return } UIApplication.shared.open(url, options: [:], completionHandler: nil) } } `] }, `iOS-Swift-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/subscription_payment_swift_Bridge.h', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsx(AntomFile, { language: `swift`, filename: 'client/subscription_payment_swift_Bridge.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [` `] }, `iOS-Swift-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/Common.swift', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsx(AntomFile, { language: `swift`, filename: 'client/Common.swift', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [`// // Common.swift // subscription_payment_swift // // Created by ant on 2024/11/13. // import Foundation import UIKit class LoadingIndicator { static let sharedInstance = LoadingIndicator() private var activityIndicator: UIActivityIndicatorView! private var overlayView: UIView! func showLoading(in view: UIView) { if overlayView == nil { overlayView = UIView(frame: view.bounds) overlayView.backgroundColor = UIColor(white: 0, alpha: 0.3) activityIndicator = UIActivityIndicatorView(style: .white) activityIndicator.center = overlayView.center overlayView.addSubview(activityIndicator) } activityIndicator.startAnimating() view.addSubview(overlayView) overlayView.alpha = 0.0 UIView.animate(withDuration: 0.3) { self.overlayView.alpha = 1.0 } } func dismissLoading() { UIView.animate(withDuration: 0.3, animations: { self.overlayView.alpha = 0.0 }) { _ in self.activityIndicator.stopAnimating() self.overlayView.removeFromSuperview() self.overlayView = nil self.activityIndicator = nil } } } extension CALayer { @IBInspectable var borderUIColor: UIColor { get { return UIColor(cgColor: self.borderColor!) } set { self.borderColor = newValue.cgColor } } } class AlterUtils: NSObject { static func showAlertWithMessage(_ message: String) { let topViewController = self.topViewController() if let topVC = topViewController { let alertController = UIAlertController(title: "Tip", message: message, preferredStyle: .alert) let okAction = UIAlertAction(title: "Close", style: .default, handler: nil) alertController.addAction(okAction) topVC.present(alertController, animated: true, completion: nil) } } static func topViewController() -> UIViewController? { if let rootViewController = UIApplication.shared.keyWindow?.rootViewController { return topViewControllerFrom(rootViewController) } return nil } static func topViewControllerFrom(_ vc: UIViewController?) -> UIViewController? { if let presentedViewController = vc?.presentedViewController { return topViewControllerFrom(presentedViewController) } else if let navController = vc as? UINavigationController { return topViewControllerFrom(navController.visibleViewController) } else if let tabBarController = vc as? UITabBarController { return topViewControllerFrom(tabBarController.selectedViewController) } else { return vc } } } // HttpMethod Enum enum HttpMethod: String { case GET case POST } // HttpResponse Class class HttpResponse { var responseBody: [String: Any]? var errorMessage: String? static func success(with responseBody: [String: Any]) -> HttpResponse { let response = HttpResponse() response.responseBody = responseBody return response } static func failure(with errorMessage: String) -> HttpResponse { let response = HttpResponse() response.errorMessage = errorMessage return response } } // HttpService Singleton Class class HttpService { static let sharedInstance = HttpService() private let HOST_URL = "http://127.0.0.1:8080" private init() {} func request(method: HttpMethod, urlPath: String, body: [String: Any]?, requestParam: [String: Any]?, completion: @escaping (HttpResponse) -> Void) { let fullUrl = buildUrl(urlPath: urlPath, params: requestParam) guard let url = URL(string: fullUrl) else { completion(HttpResponse.failure(with: "Invalid URL")) return } var request = URLRequest(url: url) request.setValue("application/json", forHTTPHeaderField: "Content-Type") if method == .POST { guard let body = body else { completion(HttpResponse.failure(with: "Body is nil for POST request")) return } do { let jsonData = try JSONSerialization.data(withJSONObject: body, options: []) request.httpMethod = method.rawValue request.httpBody = jsonData } catch { completion(HttpResponse.failure(with: error.localizedDescription)) return } } else { request.httpMethod = method.rawValue } print("Requesting URL: \\(fullUrl)") print("Request Method: \\(method.rawValue)") print("Request Headers: \\(String(describing: request.allHTTPHeaderFields))") print("Request Body: \\(String(describing: body))") let task = URLSession.shared.dataTask(with: request) { data, response, error in if let error = error { completion(HttpResponse.failure(with: error.localizedDescription)) return } guard let data = data else { completion(HttpResponse.failure(with: "No data received")) return } do { if let jsonResponse = try JSONSerialization.jsonObject(with: data, options: []) as? [String: Any], let status = jsonResponse["status"] as? String, status == "success" { completion(HttpResponse.success(with: jsonResponse)) } else { completion(HttpResponse.failure(with: "Error or status not successful")) } } catch { completion(HttpResponse.failure(with: error.localizedDescription)) } } task.resume() } private func buildUrl(urlPath: String, params: [String: Any]?) -> String { var urlString = "\\(HOST_URL)\\(urlPath)" if let params = params, !params.isEmpty { urlString.append("?") let queryItems = params.map { key, value in "\\(urlEncode(key))=\\(urlEncode("\\(value)"))" } urlString.append(queryItems.joined(separator: "&")) } return urlString } private func urlEncode(_ string: String) -> String { return string.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? string } } struct ImageBase64Converter { static func imageToBase64(image: UIImage) -> String? { guard let imageData = image.pngData() else { return nil } return imageData.base64EncodedString(options: .lineLength64Characters) } static func base64ToImage(base64String: String) -> UIImage? { guard let imageData = Data(base64Encoded: base64String) else { return nil } return UIImage(data: imageData) } } class SwiftPaymentMethodView: Codable { var icon: String var title: String var paymentMethodCode: String var currency: String var amount: String // Initializer init(icon: String, title: String, paymentMethodCode: String, currency: String, amount: String) { self.icon = icon self.title = title self.paymentMethodCode = paymentMethodCode self.currency = currency self.amount = amount } func formatAmount() -> String { return "\\(currency) \\(amount)" } } class SwiftPaymentMethodViewCell: UITableViewCell { @IBOutlet weak var radioButton: UIButton! @IBOutlet weak var titleLabel: UILabel! // Renamed for clarity @IBOutlet weak var iconImageView: UIImageView! override func awakeFromNib() { super.awakeFromNib() self.selectionStyle = .none if #available(iOS 13.0, *) { radioButton.setImage(UIImage.init(systemName: "circle"), for: .normal) radioButton.setImage(UIImage(systemName: "checkmark.circle"), for: .selected) } else { //TODO: custom image } } func configure(with paymentMethod: SwiftPaymentMethodView, selected: Bool) { self.paymentMethod = paymentMethod // Set the radio button state radioButton.isSelected = selected self.iconImageView.image = ImageBase64Converter.base64ToImage(base64String: paymentMethod.icon) self.titleLabel.text = paymentMethod.title } private var paymentMethod: SwiftPaymentMethodView! } class InquiryPaymentResult { var data: [String: Any]? var paymentRequestId: String? var authState: String? var status: String? var message: String? init(data: [String: Any], paymentRequestId: String, authState: String, status: String, message: String) { self.data = data self.paymentRequestId = paymentRequestId self.authState = authState self.status = status self.message = message } static func parse(from json: [String: Any]) -> InquiryPaymentResult? { guard let data = json["data"] as? [String: Any], let paymentRequestId = json["paymentRequestId"] as? String, let authState = json["authState"] as? String, let status = json["status"] as? String, let message = json["message"] as? String else { return nil } return InquiryPaymentResult(data: data, paymentRequestId: paymentRequestId, authState: authState, status: status, message: message) } } `] }, `iOS-Swift-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/AppDelegate.swift', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsx(AntomFile, { language: `swift`, filename: 'client/AppDelegate.swift', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [`// // AppDelegate.swift // subscription_payment_swift // // Created by on 2024/10/14. // import UIKit @main class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { // custom scheme logic print("----\\(url)") if url.scheme == "subscription" { handleSubRedirectUrl(url) } return true } func handleSubRedirectUrl(_ url: URL) { if let components = URLComponents(url: url, resolvingAgainstBaseURL: false) { var queryItemsDict = [String: String]() for item in components.queryItems ?? [] { queryItemsDict[item.name] = item.value } guard let subscriptionRequestId = queryItemsDict["subscriptionRequestId"], let resultStatus = queryItemsDict["resultStatus"] else { AlterUtils.showAlertWithMessage("subscriptionRequestId resultStatus and can not be nil") return } if resultStatus == "SUCCESS" { AlterUtils.showAlertWithMessage("Subscription Success \\n\\(subscriptionRequestId)") } else { AlterUtils.showAlertWithMessage("Subscription Failed \\n\\(subscriptionRequestId)") } } } } `] }, `iOS-Swift-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/Info.plist', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsx(AntomFile, { language: `swift`, filename: 'client/Info.plist', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [` NSAppTransportSecurity NSAllowsArbitraryLoads CFBundleURLTypes CFBundleURLSchemes subscription `] }, `iOS-Swift-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/subscription_payment_swift_Bridge.h', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsx(AntomFile, { language: `swift`, filename: 'client/subscription_payment_swift_Bridge.h', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [` `] }, `iOS-Swift-API-other1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/subscription/files/ios/swift/Info.plist', when: { platform: 'iOS', client: 'Swift', integration_type: 'API' }, children: _jsx(AntomFile, { language: `swift`, filename: 'client/Info.plist', downloadOnly: true, steps: [], children: _jsx(AntomChunk, { language: `swift`, steps: [``], chunks: [` NSAppTransportSecurity NSAllowsArbitraryLoads CFBundleURLTypes CFBundleURLSchemes subscription `] }, `iOS-Swift-API-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://global.alipay.com/docs/). 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://global.alipay.com/docs/). 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://global.alipay.com/docs/). 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 | 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.3 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 | 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.0.61 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 | 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.2", "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 | 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.10 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 | 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