Scan to Link 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'] }, { label: 'Clients:', key: 'client', value: [{ when: { integration_type: 'API', platform: 'Web' }, value: ['HTML', 'React', 'Vue'] }, { when: {}, value: ['HTML', 'React', 'Vue'] }] }, { label: 'Servers:', key: 'server', value: ['Java', 'Python', 'PHP', 'Go', '.NET'] }] }), downloadFileName: 'antom-scan-to-link-sample.zip', children: [_jsxs(AntomCondition, { when: { integration_type: 'API' }, children: [_jsx(Paragraph, { children: _jsx(_components.p, { children: "使用 Antom 的支付功能创建流畅的扫码签约流程。Antom 为仅接口集成提供客户端和服务器端的示例代码，帮助您轻松构建接受多种支付方式的扫码签约体验。" }) }), _jsx(AntomDownloadBtn, {})] }), _jsx(AntomStepSection, { number: 1, title: '设置服务器' }), _jsxs(AntomStep, { id: 'install-antom-librar', when: { server: 'Java' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "安装 Antom Java 库" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "要导入 Antom 的 Java 库，请将依赖项添加到" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "pom.xml", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "文件中。您可以在" }), _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: "您也可以直接通过" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-java', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub", ' '] }) }), _jsx(_components.p, { children: "下载源代码来安装 Antom Java 库。" })] }) })] })] }), _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: "安装 Antom Python 库" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "要导入 Antom 的 Python 库，请将依赖项添加到 requirements.txt 文件中。您可以在" }), _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: "您也可以直接通过" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-python', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "下载源代码来安装 Antom Python 库。" })] }) })] })] }), _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: "安装 Antom PHP 库" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "要导入 Antom 的 PHP 库，请将依赖项添加到 composer.json 文件中。您可以在" }), _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: "您也可以直接通过" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-php', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "下载源代码来安装 Antom PHP 库。" })] }) })] })] }), _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: "安装 Antom Go 库" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "要导入 Antom 的 Go 库，请将依赖项添加到 go.mod 文件中。您可以在" }), _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: "您也可以直接通过" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-go', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "下载源代码来安装 Antom Go 库。" })] }) })] })] }), _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: "安装 Antom .NET 库" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "要导入 Antom 的 .NET 库，请将依赖项添加到 .csproj 文件中。您可以在" }), _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: "您也可以直接通过" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-dotnet', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "下载源代码来安装 Antom .NET 库。" })] }) })] })] }), _jsxs(AntomStep, { id: `get-integration-resources`, label: `server`, children: [_jsx(Heading, { level: 3, anchored: true, id: `get-integration-resources`, children: _jsx(_components.p, { children: "获取集成资源" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "在 Antom Dashboard 的" }), _jsx(Link, { href: ' https://dashboard.antom.com/global-payments/developers/quickStart', target: "_blank", children: _jsxs(_components.p, { children: [' ', "开发者", ' '] }) }), _jsx(_components.p, { children: "模块获取集成资源。在您的应用中配置获取的集成资源，以便向 Antom 服务器发送请求时能使用这些资源。" })] })] }), _jsxs(AntomStep, { id: 'initiate-an-authorization-request', label: `server`, when: { integration_type: 'API' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `initiate-an-authorization-request`, children: _jsx(_components.p, { children: "发起授权咨询请求" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "在您的服务器上添加一个端点，以调用" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams_zh-cn/authconsult", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "consult", _jsx(Spacer, { len: 1 })] }) }) }), _jsx(_components.p, { children: "接口。在发送授权请求时，指定 authState、customerBelongsTo、授权空间和此咨询所需的其他信息。" })] })] }), _jsxs(AntomStep, { id: 'specify-the-consultation-redirection-url', label: `server`, children: [_jsx(Heading, { level: 3, anchored: true, id: `specify-the-consultation-redirection-url`, children: _jsx(_components.p, { children: "指定咨询重定向链接" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "设置咨询重定向链接，其指定用户获得授权后信息将被重定向到哪里。此信息将用于后续的申请令牌请求。" }) })] }), _jsxs(AntomStep, { id: 'save-payment-information', label: `server`, children: [_jsx(Heading, { level: 3, anchored: true, id: `save-payment-information`, children: _jsx(_components.p, { children: "保存支付信息" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "保存调用此接口的付款信息，为后续付款做准备。在实际开发中您可以将支付信息保存到数据库中。" }) })] }), _jsxs(AntomStep, { id: 'receive-auth-notification', label: `server`, children: [_jsx(Heading, { level: 4, anchored: true, id: `receive-auth-notification`, children: _jsx(_components.p, { children: "接收授权通知" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "在您的服务器上添加一个端点，以接收来自 Antom 服务端的授权成功" }), _jsx(Link, { href: "https://docs.antom.com/ac/scantopay_zh-cn/authorization#CvOoy", target: "_blank", children: _jsx(_components.p, { children: "通知" }) }), _jsx(_components.p, { children: "。通知的主要内容是 authCode 和 authState，用于申请令牌。" })] })] }), _jsxs(AntomStep, { id: 'apply-for-the-token', label: `server`, children: [_jsx(Heading, { level: 4, anchored: true, id: `apply-for-the-token`, children: _jsx(_components.p, { children: "申请令牌" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "在您的服务器上添加一个端点，以调用" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams_zh-cn/accesstokenapp", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "applyToken", _jsx(Spacer, { len: 1 })] }) }) }), _jsx(_components.p, { children: "接口。在发送申请支付令牌请求时，指定 authCode 和 authState 以获取令牌。在实际开发中您需要将获取到的 accessToken 保存到数据库中以用于后续支付。" })] })] }), _jsxs(AntomStep, { id: 'initiate-a-payment-request', label: `server`, children: [_jsx(Heading, { level: 3, anchored: true, id: `initiate-a-payment-request`, children: _jsx(_components.p, { children: "发起支付请求" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "在您的服务器上添加一个端点，以调用" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams_zh-cn/payment_agreement", target: "_blank", children: _jsx(Text, { isBold: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "pay（代扣）", _jsx(Spacer, { len: 1 })] }) }) }), _jsx(_components.p, { children: "接口。在发送支付请求时，指定accessToken、支付方法、支付金额、币种、支付请求 ID、订单信息和此支付所需的其他信息。" })] })] }), _jsx(AntomStepSection, { number: 2, title: '在客户端构建扫码签约页面' }), _jsxs(AntomStep, { id: 'build-the-scan-page', label: `client`, children: [_jsx(Heading, { level: 3, anchored: true, id: 'build-the-scan-page', children: _jsx(_components.p, { children: "构建扫码签约页面" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "在扫码签约页面显示您提供给买家的可授权支付方式。" }) })] }), _jsxs(AntomCondition, { when: { platform: 'Web' }, children: [_jsx("br", {}), _jsx(Heading, { level: 4, anchored: true, id: ``, children: _jsx(_components.p, { children: "支付" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `frist`, title: `首次支付`, children: [_jsxs(AntomStep, { id: 'get-auth-qr-link', label: 'client', children: [_jsx(Heading, { level: 3, anchored: true, id: 'get-auth-qr-link', children: _jsx(_components.p, { children: "获取授权二维码链接" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "首次支付需买家授权。在买家选择了相应要授权的支付方式后，您发送带有相应支付方式信息的授权咨询请求，并从授权咨询响应中获取授权二维码链接。" }) })] }), _jsxs(AntomStep, { id: 'display-the-qr-code', label: `client`, children: [_jsx(Heading, { level: 3, anchored: true, id: 'display-the-qr-code', children: _jsx(_components.p, { children: "展示二维码" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "将二维码展示到前端页面" }) })] })] }), _jsxs(Tab, { id: `subsequent`, title: `后续支付`, children: [_jsx(AntomStep, { id: '111', label: 'client', children: _jsx(Paragraph, { children: _jsx(_components.p, { children: "后续支付无需买家授权，后端支付后直接返回给前端支付信息。" }) }) }), _jsx("br", {}), _jsx("br", {})] })] })] }), _jsxs(AntomStep, { id: 'checking-order-status', label: `client`, children: [_jsx(Heading, { level: 3, anchored: true, id: `checking-order-status`, children: _jsx(_components.p, { children: "查询订单状态" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "前端通过轮询或长连接的方式查询订单状态。订单在授权咨询时被初始化，并在买家授权支付后更新状态。" }) })] }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/files/server/java/PaymentServer.java', when: { server: 'Java', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `java`, filename: 'src/main/java/com/antom/scantolink/api/PaymentServer.java', downloadOnly: false, steps: [`get-integration-resources`, `initiate-an-authorization-request`, `specify-the-consultation-redirection-url`, `save-payment-information`, `receive-auth-notification`, `apply-for-the-token`, `initiate-a-payment-request`], children: [_jsx(AntomChunk, { language: `java`, steps: [``], chunks: [`package com.antom.scantolink.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.auth.AlipayAuthApplyTokenRequest; import com.alipay.global.api.request.ams.auth.AlipayAuthConsultRequest; import com.alipay.global.api.request.ams.notify.AlipayAuthNotify; import com.alipay.global.api.request.ams.pay.AlipayPayRequest; import com.alipay.global.api.response.ams.auth.AlipayAuthApplyTokenResponse; import com.alipay.global.api.response.ams.auth.AlipayAuthConsultResponse; import com.alipay.global.api.response.ams.pay.AlipayPayResponse; import com.alipay.global.api.tools.WebhookTool; import lombok.Data; import org.joda.money.CurrencyUnit; import org.joda.money.Money; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.ResponseBody; import javax.servlet.http.HttpServletRequest; import java.math.BigDecimal; import java.util.HashMap; import java.util.Map; import java.util.UUID; /** * sample payment server using Antom API integration mode **/ @Controller @CrossOrigin @SpringBootApplication public class PaymentServer { `] }, `server-Java-API-other1`), _jsx(AntomChunk, { language: `java`, steps: [`get-integration-resources`], chunks: [` /** * replace with your client id
* find your client id here: quickStart */ public static final String CLIENT_ID = "your_client_id"; /** * replace with your antom public key (used to verify signature)
* find your antom public key here: quickStart */ public static final String ANTOM_PUBLIC_KEY = "antom_public_key"; /** * replace with your private key (used to sign)
* please ensure the secure storage of your private key to prevent leakage */ public static final String MERCHANT_PRIVATE_KEY = "your_private_key"; `] }, `server-Java-API-code1`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` private final static AlipayClient CLIENT = new DefaultAlipayClient( EndPointConstants.SG, MERCHANT_PRIVATE_KEY, ANTOM_PUBLIC_KEY, CLIENT_ID); // Save the mapping between authState and payment information private static final Map authStatePayment = new HashMap<>(); // Save the mapping between userId and user info private static final Map users = new HashMap<>(); static { users.put("antom-scantolink", new User("antom-scantolink")); } 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-an-authorization-request`], chunks: [` @PostMapping("/authorizations/consult") public ResponseEntity authorizationConsult(@RequestBody PaymentVO payment) { User loginUser = users.get(payment.userId); loginUser.orderList.put(payment.orderId, new MyOrder(payment.orderId, "INIT")); // user payment method has been authorized, direct payment if (loginUser.getPaymentMethodTypeAccessToken().containsKey(payment.paymentMethodType)) { return pay(payment); } // unauthorized AlipayAuthConsultRequest alipayAuthConsultRequest = new AlipayAuthConsultRequest(); // replace with your authState String authState = UUID.randomUUID().toString(); alipayAuthConsultRequest.setAuthState(authState); // set the target payment method for which you are requesting authorization alipayAuthConsultRequest.setCustomerBelongsTo(CustomerBelongsTo.valueOf(payment.paymentMethodType)); // set the authorization scope alipayAuthConsultRequest.setScopes(new ScopeType[]{ScopeType.AGREEMENT_PAY}); // set terminalType alipayAuthConsultRequest.setTerminalType(TerminalType.WEB); `] }, `server-Java-API-code2`), _jsx(AntomChunk, { language: `java`, steps: [`specify-the-consultation-redirection-url`], chunks: [` // replace with your authRedirectUrl alipayAuthConsultRequest.setAuthRedirectUrl("http://localhost:8080/index.html"); `] }, `server-Java-API-code3`), _jsx(AntomChunk, { language: `java`, steps: [`save-payment-information`], chunks: [` // save the payment information corresponding to the authState authStatePayment.put(authState, payment); `] }, `server-Java-API-code4`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` // do authorization consult AlipayAuthConsultResponse alipayAuthConsultResponse; try { long startTime = System.currentTimeMillis(); System.out.println("authorization consult request: " + JSON.toJSONString(alipayAuthConsultRequest)); alipayAuthConsultResponse = CLIENT.execute(alipayAuthConsultRequest); System.out.println("authorization consult response: " + JSON.toJSONString(alipayAuthConsultResponse)); System.out.println("authorization consult request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { // exception handling return ResponseEntity.ok().body(new ApiResponse("", authState, e)); } return ResponseEntity.ok().body(new ApiResponse("", authState, alipayAuthConsultResponse)); } `] }, `server-Java-API-other3`), _jsx(AntomChunk, { language: `java`, steps: [`receive-auth-notification`], chunks: [` /** * Obtain authCode from authorization notification * * @param request request * @param notifyBody notify body * @return ResponseEntity */ @PostMapping("/authorizations/receiveAuthNotify") @ResponseBody public Result receiveAuthNotify(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 AlipayAuthNotify authNotify = JSON.parseObject(notifyBody, AlipayAuthNotify.class); if (authNotify != null && "SUCCESS".equals(authNotify.getResult().getResultCode())) { // in practice, you should store a mapping between payment results and users ResponseEntity paymentResult = applyTokenAndPay(authNotify.getAuthCode(), authNotify.getAuthState()); 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: [`apply-for-the-token`], chunks: [` public ResponseEntity applyTokenAndPay(String authCode, String authState) { AlipayAuthApplyTokenRequest alipayPayRequest = new AlipayAuthApplyTokenRequest(); // get payment method PaymentVO payment = authStatePayment.get(authState); String paymentMethodType = payment.getPaymentMethodType(); // set grant type alipayPayRequest.setGrantType(GrantType.AUTHORIZATION_CODE); // set the target payment method for which you are requesting authorization alipayPayRequest.setCustomerBelongsTo(CustomerBelongsTo.valueOf(paymentMethodType)); // set auth code alipayPayRequest.setAuthCode(authCode); AlipayAuthApplyTokenResponse authApplyTokenResponse; try { long startTime = System.currentTimeMillis(); System.out.println("apply token request: " + JSON.toJSONString(alipayPayRequest)); authApplyTokenResponse = CLIENT.execute(alipayPayRequest); System.out.println("apply token request: " + JSON.toJSONString(authApplyTokenResponse)); System.out.println("apply token request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { String errorMsg = e.getMessage(); // handle error condition return ResponseEntity.ok().body(new ApiResponse("", authState, e)); } // save accessToken(in practice, accessToken should be stored in your databases) users.get(payment.getUserId()).getPaymentMethodTypeAccessToken().put(paymentMethodType, authApplyTokenResponse.getAccessToken()); // invoke the payment method return pay(payment); } `] }, `server-Java-API-code6`), _jsx(AntomChunk, { language: `java`, steps: [`initiate-a-payment-request`], chunks: [` public ResponseEntity pay(PaymentVO payment) { User loginUser = users.get(payment.getUserId()); AlipayPayRequest alipayPayRequest = new AlipayPayRequest(); alipayPayRequest.setProductCode(ProductCodeType.AGREEMENT_PAYMENT); // get accessToken from loginUser String accessToken = loginUser.paymentMethodTypeAccessToken.get(payment.paymentMethodType); // replace with your paymentRequestId String paymentRequestId = UUID.randomUUID().toString(); alipayPayRequest.setPaymentRequestId(paymentRequestId); // convert amount unit(in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object long amountMinorLong = Money.of(CurrencyUnit.of(payment.currency), new BigDecimal(payment.amountValue)).getAmountMinorLong(); // set amount Amount amount = Amount.builder().currency(payment.currency).value(String.valueOf(amountMinorLong)).build(); alipayPayRequest.setPaymentAmount(amount); // set paymentMethod PaymentMethod paymentMethod = PaymentMethod.builder().paymentMethodType(payment.paymentMethodType).paymentMethodId(accessToken).build(); alipayPayRequest.setPaymentMethod(paymentMethod); // set buyer info Buyer buyer = Buyer.builder().referenceBuyerId("yourBuyerId").build(); // replace with your orderId String orderId = payment.getOrderId(); // set order Info Order order = Order.builder().referenceOrderId(orderId). orderDescription("antom api testing order").orderAmount(amount).buyer(buyer).build(); alipayPayRequest.setOrder(order); // replace with your notify url alipayPayRequest.setPaymentNotifyUrl("http://www.yourNotifyUrl.com"); AlipayPayResponse alipayPayResponse; try { long startTime = System.currentTimeMillis(); System.out.println("payment request: " + JSON.toJSONString(alipayPayRequest)); alipayPayResponse = CLIENT.execute(alipayPayRequest); System.out.println("payment response: " + JSON.toJSONString(alipayPayResponse)); System.out.println("payment request cost time: " + (System.currentTimeMillis() - startTime) + "ms\\n"); } catch (AlipayApiException e) { return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, "", e)); } if ("SUCCESS".equals(alipayPayResponse.getResult().getResultCode())) { MyOrder myOrder = loginUser.orderList.get(payment.orderId); myOrder.paymentRequestId = alipayPayResponse.getPaymentRequestId(); myOrder.orderStatus = "SUCCESS"; } return ResponseEntity.ok().body(new ApiResponse(paymentRequestId, "", alipayPayResponse)); } `] }, `server-Java-API-code7`), _jsx(AntomChunk, { language: `java`, steps: [``], chunks: [` @PostMapping("/payment/inquiryOrder") public ResponseEntity inquiryOrder(@RequestBody Map map) { String orderId = map.get("orderId"); String userId = map.get("userId"); return ResponseEntity.ok().body(new ApiResponse("", "", users.get(userId).orderList.get(orderId))); } @Data private static class User { private String userId; private Map orderList; private Map paymentMethodTypeAccessToken; public User(String userId) { this.userId = userId; this.orderList = new HashMap<>(); this.paymentMethodTypeAccessToken = new HashMap<>(); } } @Data private static class MyOrder { private String orderId; private String paymentRequestId; private String orderStatus; public MyOrder(String orderId, String orderStatus) { this.orderId = orderId; this.orderStatus = orderStatus; } } @Data public static class PaymentVO { private String orderId; private String userId; private String amountValue; private String currency; private String paymentMethodType; } @Data private static class ApiResponse { private String status = "success"; private String paymentRequestId; private String authState; private String message; private Object data; public ApiResponse(String paymentRequestId, String authState, Object data) { this.paymentRequestId = paymentRequestId; this.authState = authState; this.data = data; } public ApiResponse(String paymentRequestId, String authState, Exception e) { this.paymentRequestId = paymentRequestId; this.authState = authState; this.status = "error"; this.message = e.getMessage(); } } } `] }, `server-Java-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/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-an-authorization-request`, `specify-the-consultation-redirection-url`, `save-payment-information`, `receive-auth-notification`, `apply-for-the-token`, `initiate-a-payment-request`], children: [_jsx(AntomChunk, { language: `python`, steps: [``], chunks: [`#! /usr/bin/env python3 """ server.py Antom Sample. Python 3.9 or newer required. """ import json import time import uuid from com.alipay.ams.api.default_alipay_client import DefaultAlipayClient from com.alipay.ams.api.exception.exception import AlipayApiException from com.alipay.ams.api.model.amount import Amount from com.alipay.ams.api.model.buyer import Buyer from com.alipay.ams.api.model.customer_belongs_to import CustomerBelongsTo from com.alipay.ams.api.model.grant_type import GrantType from com.alipay.ams.api.model.order import Order from com.alipay.ams.api.model.payment_method import PaymentMethod from com.alipay.ams.api.model.product_code_type import ProductCodeType from com.alipay.ams.api.model.scope_type import ScopeType from com.alipay.ams.api.model.terminal_type import TerminalType from com.alipay.ams.api.request.auth.alipay_auth_apply_token_request import AlipayAuthApplyTokenRequest from com.alipay.ams.api.request.auth.alipay_auth_consult_request import AlipayAuthConsultRequest from com.alipay.ams.api.request.notify.alipay_auth_notify import AlipayAuthNotify from com.alipay.ams.api.request.pay.alipay_pay_request import AlipayPayRequest from com.alipay.ams.api.response.auth.alipay_auth_apply_token_response import AlipayAuthApplyTokenResponse from com.alipay.ams.api.response.auth.alipay_auth_consult_response import AlipayAuthConsultResponse from com.alipay.ams.api.response.pay.alipay_pay_response import AlipayPayResponse from com.alipay.ams.api.tools.webhook_tool import check_signature from flask import 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: [` class User: def __init__(self, user_id): self.__user_id = user_id self.__order_list = {} self.__payment_method_type_access_token = {} def set_user_id(self, user_id): self.__user_id = user_id def get_user_id(self): return self.__user_id def add_order_list(self, order_id, order_status): self.__order_list[order_id] = order_status def get_order_list(self): return self.__order_list def add_payment_method_type_access_token(self, payment_method_type, access_token): self.__payment_method_type_access_token[payment_method_type] = access_token def get_payment_method_type_access_token(self, payment_method_type): if payment_method_type in self.__payment_method_type_access_token: return self.__payment_method_type_access_token[payment_method_type] else: return None # Save the mapping between authState and payment information auth_state_payment = {} # Save the mapping between userId and user info users = {'antom-scantolink': User("antom-scantolink")} app = Flask(__name__) CORS(app) `] }, `server-Python-API-other2`), _jsx(AntomChunk, { language: `python`, steps: [`initiate-an-authorization-request`], chunks: [`@app.route("/authorizations/consult", methods=['POST']) def authorization_consult(): payment_vo = request.get_json() terminal_type = payment_vo.get("terminalType", TerminalType.WEB.name) login_user = users.get(payment_vo['userId']) login_user.add_order_list(payment_vo['orderId'], MyOrder(payment_vo['orderId'], "INIT")) # user payment method has been authorized, direct payment if login_user.get_payment_method_type_access_token(payment_vo['paymentMethodType']) is not None: return execute_payment(payment_vo) # unauthorized alipay_auth_consult_request = AlipayAuthConsultRequest() # replace with your authState auth_state = str(uuid.uuid4()) alipay_auth_consult_request.auth_state = auth_state # set the target payment method for which you are requesting authorization alipay_auth_consult_request.customer_belongs_to = CustomerBelongsTo[payment_vo['paymentMethodType']] # set the authorization scope alipay_auth_consult_request.scopes = [ScopeType.AGREEMENT_PAY] # set terminalType alipay_auth_consult_request.terminal_type = TerminalType[terminal_type] `] }, `server-Python-API-code2`), _jsx(AntomChunk, { language: `python`, steps: [`specify-the-consultation-redirection-url`], chunks: [` # replace with your authRedirectUrl alipay_auth_consult_request.auth_redirect_url = "http://localhost:5173/index.html" `] }, `server-Python-API-code3`), _jsx(AntomChunk, { language: `python`, steps: [`save-payment-information`], chunks: [` # save the payment information corresponding to the authState auth_state_payment[auth_state] = payment_vo `] }, `server-Python-API-code4`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` try: start_time = time.time() print(f"authorization consult request: {alipay_auth_consult_request.to_ams_json()}") alipay_auth_consult_response_body = default_alipay_client.execute(alipay_auth_consult_request) alipay_auth_consult_response = AlipayAuthConsultResponse(alipay_auth_consult_response_body) print(f"authorization consult response: {alipay_auth_consult_response_body}") print(f"authorization consult request cost time: {time.time() - start_time}") except AlipayApiException as e: # exception handling return jsonify(ApiResponse().error("", auth_state, e)) return jsonify(ApiResponse().success("", auth_state, json.loads(alipay_auth_consult_response_body))) `] }, `server-Python-API-other3`), _jsx(AntomChunk, { language: `python`, steps: [`receive-auth-notification`], chunks: [`# Obtain authCode from authorization notification @app.route("/authorizations/receiveAuthNotify", methods=['POST']) def receive_auth_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_auth_notify = AlipayAuthNotify(notify_body) if alipay_auth_notify.result.result_code == "SUCCESS": # in practice, you should store a mapping between payment results and users payment_result = execute_apply_token_and_pay(alipay_auth_notify.auth_code, alipay_auth_notify.auth_state) 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: [` `] }, `server-Python-API-other4`), _jsx(AntomChunk, { language: `python`, steps: [`apply-for-the-token`], chunks: [`def execute_apply_token_and_pay(auth_code, auth_state): alipay_auth_apply_token_request = AlipayAuthApplyTokenRequest() # get payment method payment_vo = auth_state_payment.get(auth_state) payment_method_type = payment_vo['paymentMethodType'] # set grant type alipay_auth_apply_token_request.grant_type = GrantType.AUTHORIZATION_CODE # set the target payment method for which you are requesting authorization alipay_auth_apply_token_request.customer_belongs_to = CustomerBelongsTo[payment_method_type] # set auth code alipay_auth_apply_token_request.auth_code = auth_code try: start_time = time.time() print(f"apply token request: {alipay_auth_apply_token_request.to_ams_json()}") alipay_auth_apply_token_response_body = default_alipay_client.execute(alipay_auth_apply_token_request) alipay_auth_apply_token_response = AlipayAuthApplyTokenResponse(alipay_auth_apply_token_response_body) print(f"apply token response: {alipay_auth_apply_token_response_body}") print(f"apply token request cost time: {time.time() - start_time}") except AlipayApiException as e: # handle error condition return jsonify(ApiResponse().error("", auth_state, e)) # save accessToken(in practice, accessToken should be stored in your databases) users.get(payment_vo['userId']).add_payment_method_type_access_token(payment_method_type, alipay_auth_apply_token_response.access_token) # invoke the payment method return execute_payment(auth_state_payment.get(auth_state)) `] }, `server-Python-API-code6`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` `] }, `server-Python-API-other5`), _jsx(AntomChunk, { language: `python`, steps: [`initiate-a-payment-request`], chunks: [`def execute_payment(payment_vo): login_user = users[payment_vo['userId']] alipay_pay_request = AlipayPayRequest() alipay_pay_request.product_code = ProductCodeType.AGREEMENT_PAYMENT # get accessToken from authStateAccessToken access_token = login_user.get_payment_method_type_access_token(payment_vo['paymentMethodType']) # replace with your paymentRequestId payment_request_id = str(uuid.uuid4()) alipay_pay_request.payment_request_id = payment_request_id # convert amount unit(in practice, amount should be calculated on your serverside) # For details, please refer to: https://docs.antom.com/ac/ref/cc money_sub_units = Money(payment_vo['amountValue'], Currency[payment_vo['currency']]).sub_units # set amount amount = Amount(payment_vo['currency'], money_sub_units) alipay_pay_request.payment_amount = amount # set paymentMethod payment_method = PaymentMethod() payment_method.payment_method_type = payment_vo['paymentMethodType'] payment_method.payment_method_id = access_token alipay_pay_request.payment_method = payment_method # set buyer info buyer = Buyer() buyer.reference_buyer_id = "your_buyer_id" # replace with your orderId order_id = payment_vo['orderId'] # set order info order = Order() order.reference_order_id = order_id order.order_description = "antom api testing order" order.order_amount = amount order.buyer = buyer alipay_pay_request.order = order # replace with your notify url # or configure your notify url here: https://dashboard.antom.com/global-payments/developers/iNotify alipay_pay_request.payment_notify_url = "http://www.yourNotifyUrl.com" try: start_time = time.time() print(f"payment request: {alipay_pay_request.to_ams_json()}") alipay_pay_response_body = default_alipay_client.execute(alipay_pay_request) alipay_pay_response = AlipayPayResponse(alipay_pay_response_body) print(f"payment response: {alipay_pay_response_body}") print(f"payment request cost time: {time.time() - start_time}") except AlipayApiException as e: return jsonify(ApiResponse().error(payment_request_id, "", e)) if alipay_pay_response.result.result_code == "SUCCESS": my_order = login_user.get_order_list()[payment_vo['orderId']] my_order.payment_request_id = payment_request_id my_order.order_status = "SUCCESS" return jsonify( ApiResponse().success(payment_request_id, "", json.loads(alipay_pay_response_body))) `] }, `server-Python-API-code7`), _jsx(AntomChunk, { language: `python`, steps: [``], chunks: [` @app.route("/payment/inquiryOrder", methods=['POST']) def inquiry_order(): query_vo = request.get_json() order = users.get(query_vo['userId']).get_order_list()[query_vo['orderId']] return jsonify(ApiResponse().success("", "", order.to_json())) class MyOrder: def __init__(self, order_id, order_status): self.order_id = order_id self.payment_request_id = "" self.order_status = order_status def to_json(self): return { "orderId": self.order_id, "paymentRequestId": self.payment_request_id, "orderStatus": self.order_status } class ApiResponse: def __init__(self): self.__status = "success" self.__payment_request_id = "" self.__auth_state = "" self.__message = "" self.__data = None def success(self, payment_request_id, auth_state, data): self.__payment_request_id = payment_request_id self.__auth_state = auth_state self.__data = data return self.to_json() def error(self, payment_request_id, auth_state, e): self.__payment_request_id = payment_request_id self.__auth_state = auth_state self.__message = str(e) self.__status = "error" return self.to_json() def to_json(self): return { "status": self.__status, "paymentRequestId": self.__payment_request_id, "authState": self.__auth_state, "message": self.__message, "data": self.__data } if __name__ == '__main__': app.run(host='localhost', port=8080) `] }, `server-Python-API-other6`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/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-an-authorization-request`, `specify-the-consultation-redirection-url`, `save-payment-information`, `receive-auth-notification`, `apply-for-the-token`, `initiate-a-payment-request`], 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; // Save the mapping between authState and payment information private static \$authStateFile = 'auth_state_payment.json'; // Save the mapping between userId and user info private static \$usersFile = 'users.json'; 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: [``], chunks: [` // Initialize users data if (!file_exists(self::\$usersFile)) { \$users = array( 'antom-scantolink' => array( 'userId' => 'antom-scantolink', 'orderList' => array(), 'paymentMethodTypeAccessToken' => array() ) ); file_put_contents(self::\$usersFile, json_encode(\$users)); } } `] }, `server-PHP-API-other2`), _jsx(AntomChunk, { language: `php`, steps: [`initiate-an-authorization-request`], chunks: [` public function authorizationConsult(\$payment) { \$users = json_decode(file_get_contents(self::\$usersFile), true); \$loginUser = \$users[\$payment['userId']]; // update order status \$loginUser['orderList'][\$payment['orderId']] = array( 'orderId' => \$payment['orderId'], 'orderStatus' => 'INIT' ); // user payment method has been authorized, direct payment if (isset(\$loginUser['paymentMethodTypeAccessToken'][\$payment['paymentMethodType']])) { return \$this->pay(\$payment); } \$alipayAuthConsultRequest = new AlipayAuthConsultRequest(); // replace with your authState \$authState = uniqid('AUTH_'); \$alipayAuthConsultRequest->setAuthState(\$authState); // set the target payment method \$alipayAuthConsultRequest->setCustomerBelongsTo(\$payment['paymentMethodType']); // set the authorization scope \$alipayAuthConsultRequest->setScopes(array(ScopeType::AGREEMENT_PAY)); // set terminalType \$alipayAuthConsultRequest->setTerminalType(TerminalType::WEB); `] }, `server-PHP-API-code2`), _jsx(AntomChunk, { language: `php`, steps: [`specify-the-consultation-redirection-url`], chunks: [` // replace with your authRedirectUrl \$alipayAuthConsultRequest->setAuthRedirectUrl("http://localhost:5173/index.html"); `] }, `server-PHP-API-code3`), _jsx(AntomChunk, { language: `php`, steps: [`save-payment-information`], chunks: [` // save the payment information corresponding to the authState \$this->saveAuthStatePayment(\$authState, \$payment); `] }, `server-PHP-API-code4`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` try { \$startTime = microtime(true); error_log("authorization consult request: " . json_encode(\$alipayAuthConsultRequest)); \$alipayAuthConsultResponse = self::\$CLIENT->execute(\$alipayAuthConsultRequest); error_log("authorization consult response: " . json_encode(\$alipayAuthConsultResponse)); error_log("authorization consult request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); // update users file \$users[\$payment['userId']] = \$loginUser; file_put_contents(self::\$usersFile, json_encode(\$users)); return \$this->apiResponse("", \$authState, \$alipayAuthConsultResponse); } catch (Exception \$e) { // exception handling return \$this->apiResponse("", \$authState, \$e); } } `] }, `server-PHP-API-other3`), _jsx(AntomChunk, { language: `php`, steps: [`receive-auth-notification`], chunks: [` public function receiveAuthNotify(\$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 \$authNotify = json_decode(\$notifyBody, true); if (\$authNotify && \$authNotify['result']['resultCode'] === 'SUCCESS') { // in practice, you should store a mapping between payment results and users \$paymentResult = \$this->applyTokenAndPay(\$authNotify['authCode'], \$authNotify['authState']); 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: [`apply-for-the-token`], chunks: [` private function applyTokenAndPay(\$authCode, \$authState) { \$alipayAuthApplyTokenRequest = new AlipayAuthApplyTokenRequest(); // get payment method \$payment = \$this->getAuthStatePayment(\$authState); if (!\$payment) { throw new Exception("Invalid auth state"); } // set grant type \$alipayAuthApplyTokenRequest->setGrantType(GrantType::AUTHORIZATION_CODE); // set the target payment method for which you are requesting authorization \$alipayAuthApplyTokenRequest->setCustomerBelongsTo(\$payment['paymentMethodType']); // set auth code \$alipayAuthApplyTokenRequest->setAuthCode(\$authCode); try { \$startTime = microtime(true); error_log("apply token request: " . json_encode(\$alipayAuthApplyTokenRequest)); \$authApplyTokenResponse = self::\$CLIENT->execute(\$alipayAuthApplyTokenRequest); error_log("apply token response: " . json_encode(\$authApplyTokenResponse)); error_log("apply token request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); // save accessToken \$users = json_decode(file_get_contents(self::\$usersFile), true); \$users[\$payment['userId']]['paymentMethodTypeAccessToken'][\$payment['paymentMethodType']] = \$authApplyTokenResponse->accessToken; file_put_contents(self::\$usersFile, json_encode(\$users)); // invoke the payment method return \$this->pay(\$payment); } catch (Exception \$e) { // handle error condition return \$this->apiResponse("", \$authState, \$e); } } `] }, `server-PHP-API-code6`), _jsx(AntomChunk, { language: `php`, steps: [`initiate-a-payment-request`], chunks: [` public function pay(\$payment) { \$users = json_decode(file_get_contents(self::\$usersFile), true); \$loginUser = \$users[\$payment['userId']]; \$alipayPayRequest = new AlipayPayRequest(); \$alipayPayRequest->setProductCode(ProductCodeType::AGREEMENT_PAYMENT); // get accessToken \$accessToken = \$loginUser['paymentMethodTypeAccessToken'][\$payment['paymentMethodType']]; // replace with your paymentRequestId \$paymentRequestId = uniqid('PR_'); \$alipayPayRequest->setPaymentRequestId(\$paymentRequestId); // convert amount unit(in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object \$moneyParser = new DecimalMoneyParser(new ISOCurrencies()); \$money = \$moneyParser->parse((string)\$payment['amountValue'], new Currency(\$payment['currency'])); // set amount \$amount = new Amount(); \$amount->setCurrency(\$payment['currency']); \$amount->setValue(\$money->getAmount()); \$alipayPayRequest->setPaymentAmount(\$amount); // set paymentMethod \$paymentMethod = new PaymentMethod(); \$paymentMethod->setPaymentMethodType(\$payment['paymentMethodType']); \$paymentMethod->setPaymentMethodId(\$accessToken); \$alipayPayRequest->setPaymentMethod(\$paymentMethod); // set buyer info \$buyer = new Buyer(); \$buyer->setReferenceBuyerId("yourBuyerId"); // set order Info \$order = new Order(); \$order->setReferenceOrderId(\$payment['orderId']); \$order->setOrderDescription("antom api testing order"); \$order->setOrderAmount(\$amount); \$order->setBuyer(\$buyer); \$alipayPayRequest->setOrder(\$order); // replace with your notify url \$alipayPayRequest->setPaymentNotifyUrl("http://www.yourNotifyUrl.com"); try { \$startTime = microtime(true); error_log("payment request: " . json_encode(\$alipayPayRequest)); \$alipayPayResponse = self::\$CLIENT->execute(\$alipayPayRequest); error_log("payment response: " . json_encode(\$alipayPayResponse)); error_log("payment request cost time: " . (microtime(true) - \$startTime) * 1000 . "ms\\n"); if (\$alipayPayResponse->result->resultCode === 'SUCCESS') { \$loginUser['orderList'][\$payment['orderId']]['paymentRequestId'] = \$alipayPayResponse->paymentRequestId; \$loginUser['orderList'][\$payment['orderId']]['orderStatus'] = 'SUCCESS'; \$users[\$payment['userId']] = \$loginUser; file_put_contents(self::\$usersFile, json_encode(\$users)); } return \$this->apiResponse(\$paymentRequestId, "", \$alipayPayResponse); } catch (Exception \$e) { return \$this->apiResponse(\$paymentRequestId, "", \$e); } } `] }, `server-PHP-API-code7`), _jsx(AntomChunk, { language: `php`, steps: [``], chunks: [` public function inquiryOrder(\$data) { \$users = json_decode(file_get_contents(self::\$usersFile), true); \$orderInfo = \$users[\$data['userId']]['orderList'][\$data['orderId']]; return \$this->apiResponse("", "", \$orderInfo); } private function saveAuthStatePayment(\$authState, \$payment) { \$data = array(); if (file_exists(self::\$authStateFile)) { \$data = json_decode(file_get_contents(self::\$authStateFile), true); } \$data[\$authState] = \$payment; file_put_contents(self::\$authStateFile, json_encode(\$data)); } private function getAuthStatePayment(\$authState) { if (file_exists(self::\$authStateFile)) { \$data = json_decode(file_get_contents(self::\$authStateFile), true); return isset(\$data[\$authState]) ? \$data[\$authState] : null; } return null; } private function apiResponse(\$paymentRequestId, \$authState, \$data) { if (\$data instanceof Exception) { return array( 'status' => 'error', 'paymentRequestId' => \$paymentRequestId, 'authState' => \$authState, 'message' => \$data->getMessage() ); } return array( 'status' => 'success', 'paymentRequestId' => \$paymentRequestId, 'authState' => \$authState, '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('/authorizations/consult', function () use (\$app, \$paymentServer) { \$payment = \$app->request->getBody(); \$payment = json_decode(\$payment, true); \$response = \$paymentServer->authorizationConsult(\$payment); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/authorizations/receiveAuthNotify', function () use (\$app, \$paymentServer) { \$notifyBody = \$app->request->getBody(); \$response = \$paymentServer->receiveAuthNotify(\$app->request, \$notifyBody); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->post('/payment/inquiryOrder', function () use (\$app, \$paymentServer) { \$data = \$app->request->getBody(); \$data = json_decode(\$data, true); \$response = \$paymentServer->inquiryOrder(\$data); \$app->response->headers->set('Content-Type', 'application/json'); echo json_encode(\$response); }); \$app->run(); `] }, `server-PHP-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/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-an-authorization-request`, `specify-the-consultation-redirection-url`, `save-payment-information`, `receive-auth-notification`, `apply-for-the-token`, `initiate-a-payment-request`], children: [_jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`package main import ( "bytes" "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/auth" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/notify" "github.com/alipay/global-open-sdk-go/com/alipay/api/request/pay" "github.com/alipay/global-open-sdk-go/com/alipay/api/response" authResponse "github.com/alipay/global-open-sdk-go/com/alipay/api/response/auth" "github.com/alipay/global-open-sdk-go/com/alipay/api/response/pay" "github.com/alipay/global-open-sdk-go/com/alipay/api/tools" "io" "log" "net/http" "strconv" "sync" "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" ) func init() { client = defaultAlipayClient.NewDefaultAlipayClient( "https://open-sea-global.alipay.com", ClientID, MerchantPrivateKey, AntomPublicKey) // Initialize default user users.Store("antom-scantolink", &User{ UserID: "antom-scantolink", OrderList: make(map[string]*MyOrder), PaymentMethodTypeAccessToken: make(map[string]string), }) } `] }, `server-Go-API-code1`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`// Initialize global client var client *defaultAlipayClient.DefaultAlipayClient // Save the mapping between authState and payment information var authStatePayment sync.Map // Save the mapping between userId and user info var users sync.Map func main() { // Register routes http.HandleFunc("/authorizations/consult", enableCORS(handleAuthConsult)) http.HandleFunc("/authorizations/receiveAuthNotify", enableCORS(handleReceiveAuthNotify)) http.HandleFunc("/payment/inquiryOrder", enableCORS(handleInquiryOrder)) 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-an-authorization-request`], chunks: [`func handleAuthConsult(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var payment PaymentVO json.NewDecoder(r.Body).Decode(&payment) userValue, _ := users.Load(payment.UserID) loginUser := userValue.(*User) // Initialize order loginUser.OrderList[payment.OrderID] = &MyOrder{ OrderID: payment.OrderID, OrderStatus: "INIT", } // user payment method has been authorized, direct payment if _, exists := loginUser.PaymentMethodTypeAccessToken[payment.PaymentMethodType]; exists { // create new request body with payment information paymentJson, _ := json.Marshal(payment) r.Body = io.NopCloser(bytes.NewBuffer(paymentJson)) handlePay(w, r) return } // unauthorized request, authConsultRequest := auth.NewAlipayAuthConsultRequest() // replace with your authState authState := uuid.New().String() authConsultRequest.AuthState = authState // set the target payment method for which you are requesting authorization authConsultRequest.CustomerBelongsTo = model.CustomerBelongsTo(payment.PaymentMethodType) // set the authorization scope authConsultRequest.Scopes = []model.ScopeType{model.ScopeTypeAgreementPay} // set terminalType authConsultRequest.TerminalType = model.WEB `] }, `server-Go-API-code2`), _jsx(AntomChunk, { language: `go`, steps: [`specify-the-consultation-redirection-url`], chunks: [` // replace with your authRedirectUrl authConsultRequest.AuthRedirectUrl = "http://localhost:5173/index.html" `] }, `server-Go-API-code3`), _jsx(AntomChunk, { language: `go`, steps: [`save-payment-information`], chunks: [` // save the payment information corresponding to the authState authStatePayment.Store(authState, payment) `] }, `server-Go-API-code4`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [` startTime := time.Now() authConsultRequestJson, _ := json.Marshal(authConsultRequest) log.Printf("authorization consult request: %s", authConsultRequestJson) response, err := client.Execute(request) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", AuthState: authState, Message: err.Error(), }) return } log.Printf("authorization consult response: %+v", response) log.Printf("authorization consult request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", AuthState: authState, Data: response, }) } `] }, `server-Go-API-other3`), _jsx(AntomChunk, { language: `go`, steps: [`receive-auth-notification`], chunks: [`/* Obtain authCode from authorization notification */ func handleReceiveAuthNotify(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 authNotify notify.AlipayAuthNotify if err := json.Unmarshal(rawBody, &authNotify); err != nil { sendJSONResponse(w, http.StatusOK, response.Result{ ResultCode: "FAIL", ResultMessage: "fail.", ResultStatus: "F", }) return } if authNotify.Result.ResultCode == "SUCCESS" { // in practice, you should store a mapping between payment results and users applyTokenAndPay(w, authNotify.AuthCode, authNotify.AuthState) 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: [`apply-for-the-token`], chunks: [`func applyTokenAndPay(w http.ResponseWriter, authCode string, authState string) { request, authApplyTokenRequest := auth.NewAlipayAuthApplyTokenRequest() // get payment method paymentValue, _ := authStatePayment.Load(authState) payment := paymentValue.(PaymentVO) // set grant type authApplyTokenRequest.GrantType = model.GrantTypeAUTHORIZATION_CODE // set the target payment method for which you are requesting authorization authApplyTokenRequest.CustomerBelongsTo = model.CustomerBelongsTo(payment.PaymentMethodType) // set auth code authApplyTokenRequest.AuthCode = authCode startTime := time.Now() authApplyTokenRequestJson, _ := json.Marshal(authApplyTokenRequest) log.Printf("apply token request: %s", authApplyTokenRequestJson) response, err := client.Execute(request) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", AuthState: authState, Message: err.Error(), }) return } log.Printf("apply token response: %+v", response) log.Printf("apply token request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) applyTokenResponse := response.(*authResponse.AlipayAuthApplyTokenResponse) userValue, _ := users.Load(payment.UserID) loginUser := userValue.(*User) loginUser.PaymentMethodTypeAccessToken[payment.PaymentMethodType] = applyTokenResponse.AccessToken // invoke the payment method paymentJson, _ := json.Marshal(payment) handlePay(w, &http.Request{ Body: io.NopCloser(bytes.NewBuffer(paymentJson)), }) } `] }, `server-Go-API-code6`), _jsx(AntomChunk, { language: `go`, steps: [`initiate-a-payment-request`], chunks: [`func handlePay(w http.ResponseWriter, r *http.Request) { var payment PaymentVO json.NewDecoder(r.Body).Decode(&payment) userValue, _ := users.Load(payment.UserID) loginUser := userValue.(*User) request, payRequest := pay.NewAlipayPayRequest() payRequest.ProductCode = model.AGREEMENT_PAYMENT // get accessToken from loginUser accessToken := loginUser.PaymentMethodTypeAccessToken[payment.PaymentMethodType] // replace with your paymentRequestId paymentRequestId := uuid.New().String() payRequest.PaymentRequestId = paymentRequestId // convert amount unit(in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object parseFloat, _ := strconv.ParseFloat(payment.AmountValue, 64) amountValue := money.NewFromFloat(parseFloat, payment.Currency).Amount() // set amount amount := &model.Amount{ Value: strconv.FormatInt(amountValue, 10), Currency: payment.Currency, } payRequest.PaymentAmount = amount // set paymentMethod payRequest.PaymentMethod = &model.PaymentMethod{ PaymentMethodType: payment.PaymentMethodType, PaymentMethodId: accessToken, } // set buyer info buyer := &model.Buyer{ReferenceBuyerId: "yourBuyerId"} // set order Info order := &model.Order{ ReferenceOrderId: payment.OrderID, // replace with your orderId OrderDescription: "antom api testing order", OrderAmount: amount, Buyer: buyer, } payRequest.Order = order // replace with your notify url payRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com" startTime := time.Now() payRequestJson, _ := json.Marshal(payRequest) log.Printf("payment request: %s", payRequestJson) response, err := client.Execute(request) if err != nil { sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "error", PaymentRequestID: paymentRequestId, Message: err.Error(), }) return } log.Printf("payment response: %+v", response) log.Printf("payment request cost time: %v ms\\n", time.Since(startTime).Milliseconds()) alipayPayResponse := response.(*responsePay.AlipayPayResponse) if alipayPayResponse.Result.ResultCode == "SUCCESS" { myOrder := loginUser.OrderList[payment.OrderID] myOrder.PaymentRequestID = paymentRequestId myOrder.OrderStatus = "SUCCESS" } sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", PaymentRequestID: paymentRequestId, Data: response, }) } `] }, `server-Go-API-code7`), _jsx(AntomChunk, { language: `go`, steps: [``], chunks: [`func handleInquiryOrder(w http.ResponseWriter, r *http.Request) { if r.Method != http.MethodPost { http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) return } var requestMap map[string]string json.NewDecoder(r.Body).Decode(&requestMap) orderId := requestMap["orderId"] userId := requestMap["userId"] userValue, _ := users.Load(userId) loginUser := userValue.(*User) sendJSONResponse(w, http.StatusOK, ApiResponse{ Status: "success", Data: loginUser.OrderList[orderId], }) } 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) } type User struct {`, ' UserID string `json:"userId"`', ' OrderList map[string]*MyOrder `json:"orderList"`', ' PaymentMethodTypeAccessToken map[string]string `json:"paymentMethodTypeAccessToken"`', `} type MyOrder struct {`, ' OrderID string `json:"orderId"`', ' PaymentRequestID string `json:"paymentRequestId"`', ' OrderStatus string `json:"orderStatus"`', `} type PaymentVO struct {`, ' OrderID string `json:"orderId"`', ' UserID string `json:"userId"`', ' AmountValue string `json:"amountValue"`', ' Currency string `json:"currency"`', ' PaymentMethodType string `json:"paymentMethodType"`', `} type ApiResponse struct {`, ' Status string `json:"status"`', ' PaymentRequestID string `json:"paymentRequestId"`', ' AuthState string `json:"authState"`', ' Message string `json:"message,omitempty"`', ' Data interface{} `json:"data,omitempty"`', `} `] }, `server-Go-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/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-an-authorization-request`, `specify-the-consultation-redirection-url`, `save-payment-information`, `receive-auth-notification`, `apply-for-the-token`, `initiate-a-payment-request`], children: [_jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [`using System.Diagnostics; using Microsoft.AspNetCore; using Microsoft.AspNetCore.Mvc; using com.alipay.ams.api.request; using com.alipay.ams.api; using com.alipay.ams.api.entities; using com.alipay.ams.api.request.auth; using com.alipay.ams.api.request.notify; using com.alipay.ams.api.response.auth; using com.alipay.ams.util; using Newtonsoft.Json; using NMoneys; namespace antom_online_payment_sample_dotnet.scantolink.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: [` // Save the mapping between authState and payment information public static readonly Dictionary authStatePayment = new Dictionary(); // Save the mapping between userId and user info public static readonly Dictionary users = new Dictionary(); static Server() { users.Add("antom-scantolink", new User("antom-scantolink")); } 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(options => { // Configure enum serialization to use string names instead of numeric values options.SerializerSettings.Converters.Add(new Newtonsoft.Json.Converters.StringEnumConverter()); options.SerializerSettings.NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore; }); // 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] [Produces("application/json")] [ApiConventionType(typeof(DefaultApiConventions))] public class PaymentController : ControllerBase {`] }, `server-.NET-API-other2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`initiate-an-authorization-request`], chunks: [` [HttpPost("authorizations/consult")] public IActionResult AuthorizationConsult([FromBody] PaymentVO payment) { var loginUser = Server.users[payment.UserId]; loginUser.OrderList[payment.OrderId] = new MyOrder(payment.OrderId, "INIT"); // user payment method has been authorized, direct payment if (loginUser.PaymentMethodTypeAccessToken.ContainsKey(payment.PaymentMethodType)) { return Pay(payment); } // unauthorized var alipayAuthConsultRequest = new AlipayAuthConsultRequest(); // replace with your authState var authState = Guid.NewGuid().ToString(); alipayAuthConsultRequest.AuthState = authState; // set the target payment method for which you are requesting authorization Enum.TryParse(payment.PaymentMethodType, out CustomerBelongsTo customerBelongsTo); alipayAuthConsultRequest.CustomerBelongsTo = customerBelongsTo; // set the authorization scope alipayAuthConsultRequest.Scopes = new[] { ScopeType.AGREEMENT_PAY }; // set terminalType alipayAuthConsultRequest.TerminalType = TerminalType.WEB; `] }, `server-.NET-API-code2`), _jsx(AntomChunk, { language: `dotnet`, steps: [`specify-the-consultation-redirection-url`], chunks: [` // replace with your authRedirectUrl alipayAuthConsultRequest.AuthRedirectUrl = "http://localhost:8080/index.html"; `] }, `server-.NET-API-code3`), _jsx(AntomChunk, { language: `dotnet`, steps: [`save-payment-information`], chunks: [` // save the payment information corresponding to the authState Server.authStatePayment[authState] = payment; `] }, `server-.NET-API-code4`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("authorization consult request: " + JsonConvert.SerializeObject(alipayAuthConsultRequest, Formatting.Indented)); var alipayAuthConsultResponse = Server.defaultAlipayClient.Execute(alipayAuthConsultRequest); Console.WriteLine("authorization consult response: " + JsonConvert.SerializeObject(alipayAuthConsultResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("authorization consult request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); return Ok(new ApiResponse("", authState, alipayAuthConsultResponse)); } catch (Exception e) { return Ok(new ApiResponse("", authState, e)); } } `] }, `server-.NET-API-other3`), _jsx(AntomChunk, { language: `dotnet`, steps: [`receive-auth-notification`], chunks: [` ///

/// Obtain authCode from authorization notification ///

/// /// [HttpPost("authorizations/receiveAuthNotify")] public async Task ReceiveAuthNotify() { // 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 authNotify = JsonConvert.DeserializeObject(notifyBody); if (authNotify != null && "SUCCESS".Equals(authNotify.Result.ResultCode)) { // in practice, you should store a mapping between payment results and users var paymentResult = ApplyTokenAndPay(authNotify.AuthCode, authNotify.AuthState); return Ok(new Result { ResultCode = "SUCCESS", ResultMessage = "success.", ResultStatus = "S" }); } } catch (Exception) { return Ok(new Result { ResultCode = "FAIL", ResultMessage = "fail.", ResultStatus = "F" }); } return Ok(new Result { ResultCode = "SYSTEM_ERROR", ResultMessage = "system error.", ResultStatus = "F" }); } `] }, `server-.NET-API-code5`), _jsx(AntomChunk, { language: `dotnet`, steps: [`apply-for-the-token`], chunks: [` private IActionResult ApplyTokenAndPay(string authCode, string authState) { var alipayPayRequest = new AlipayAuthApplyTokenRequest(); // get payment method var payment = Server.authStatePayment[authState]; var paymentMethodType = payment.PaymentMethodType; // set grant type alipayPayRequest.GrantType = GrantType.AUTHORIZATION_CODE; // set the target payment method for which you are requesting authorization Enum.TryParse(paymentMethodType,out CustomerBelongsTo customerBelongsTo); alipayPayRequest.CustomerBelongsTo = customerBelongsTo; // set auth code alipayPayRequest.AuthCode = authCode; try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("apply token request: " + JsonConvert.SerializeObject(alipayPayRequest, Formatting.Indented)); var authApplyTokenResponse = Server.defaultAlipayClient.Execute(alipayPayRequest); Console.WriteLine("apply token response: " + JsonConvert.SerializeObject(authApplyTokenResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("apply token request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); // save accessToken(in practice, accessToken should be stored in your databases) Server.users[payment.UserId].PaymentMethodTypeAccessToken[paymentMethodType] = authApplyTokenResponse.AccessToken; // invoke the payment method return Pay(payment); } catch (Exception e) { return Ok(new ApiResponse("", authState, e)); } } `] }, `server-.NET-API-code6`), _jsx(AntomChunk, { language: `dotnet`, steps: [`initiate-a-payment-request`], chunks: [` private IActionResult Pay(PaymentVO payment) { var loginUser = Server.users[payment.UserId]; var alipayPayRequest = new PaymentCreateRequest(); alipayPayRequest.ProductCode = ProductCodeType.AGREEMENT_PAYMENT; // get accessToken from loginUser var accessToken = loginUser.PaymentMethodTypeAccessToken[payment.PaymentMethodType]; // replace with your paymentRequestId var paymentRequestId = Guid.NewGuid().ToString(); alipayPayRequest.PaymentRequestId = paymentRequestId; // convert amount unit(in practice, amount should be calculated on your serverside) // For details, please refer to: Usage rules of the Amount object var minorIntegralAmount = new Money(decimal.Parse(payment.AmountValue), Currency.Get(payment.Currency)) .MinorIntegralAmount; // set amount var amount = new Amount { Currency = payment.Currency, Value = minorIntegralAmount.ToString() }; alipayPayRequest.PaymentAmount = amount; // set paymentMethod var paymentMethod = new PaymentMethod(payment.PaymentMethodType) { PaymentMethodId = accessToken }; alipayPayRequest.PaymentMethod = paymentMethod; // set buyer info var buyer = new Buyer { ReferenceBuyerId = "yourBuyerId" }; // replace with your orderId var orderId = payment.OrderId; // set order Info alipayPayRequest.Order = new Order { ReferenceOrderId = orderId, OrderDescription = "antom api testing order", OrderAmount = amount, Buyer = buyer }; // replace with your notify url alipayPayRequest.PaymentNotifyUrl = "http://www.yourNotifyUrl.com"; try { var stopwatch = new Stopwatch(); stopwatch.Start(); Console.WriteLine("payment request: " + JsonConvert.SerializeObject(alipayPayRequest, Formatting.Indented)); var alipayPayResponse = Server.defaultAlipayClient.Execute(alipayPayRequest); Console.WriteLine("payment response: " + JsonConvert.SerializeObject(alipayPayResponse, Formatting.Indented)); stopwatch.Stop(); Console.WriteLine("payment request cost time: " + stopwatch.ElapsedMilliseconds + "ms\\n"); if ("SUCCESS".Equals(alipayPayResponse.Result.ResultCode)) { var myOrder = loginUser.OrderList[payment.OrderId]; myOrder.PaymentRequestId = alipayPayResponse.PaymentRequestId; myOrder.OrderStatus = "SUCCESS"; } return Ok(new ApiResponse(paymentRequestId, "", alipayPayResponse)); } catch (Exception e) { return Ok(new ApiResponse(paymentRequestId, "", e)); } } `] }, `server-.NET-API-code7`), _jsx(AntomChunk, { language: `dotnet`, steps: [``], chunks: [` [HttpPost("payment/inquiryOrder")] public IActionResult InquiryOrder([FromBody] Dictionary map) { map.TryGetValue("orderId", out var orderId); map.TryGetValue("userId", out var userId); return Ok(new ApiResponse("", "", Server.users[userId].OrderList[orderId])); } } public class User { public string UserId { get; set; } public Dictionary OrderList { get; set; } public Dictionary PaymentMethodTypeAccessToken { get; set; } public User(string userId) { UserId = userId; OrderList = new Dictionary(); PaymentMethodTypeAccessToken = new Dictionary(); } } public class MyOrder { public string OrderId { get; set; } public string PaymentRequestId { get; set; } public string OrderStatus { get; set; } public MyOrder(string orderId, string orderStatus) { OrderId = orderId; OrderStatus = orderStatus; } } public class PaymentVO { public string OrderId { get; set; } public string UserId { get; set; } public string AmountValue { get; set; } public string Currency { get; set; } public string PaymentMethodType { get; set; } } public class ApiResponse { public string Status { get; set; } = "success"; public string PaymentRequestId { get; set; } public string AuthState { get; set; } public string Message { get; set; } public object Data { get; set; } public ApiResponse(string paymentRequestId, string authState, object data) { PaymentRequestId = paymentRequestId; AuthState = authState; Data = data; } public ApiResponse(string paymentRequestId, string authState, Exception e) { PaymentRequestId = paymentRequestId; AuthState = authState; Status = "error"; Message = e.Message; } } } `] }, `server-.NET-API-other4`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/files/web/html/index.html', when: { client: 'HTML', server: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `html`, filename: 'src/main/resources/static/index.html', downloadOnly: false, steps: [`build-the-scan-page`], children: _jsx(AntomChunk, { language: `html`, steps: [`build-the-scan-page`], chunks: [` Scan to Link Demo

Scan to Link Demo

Choose your payment method

AlipayHK

GCash

Touch'n Go eWallet

`] }, `Web-HTML-API-code1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/files/web/html/index.js', when: { client: 'HTML', server: 'Java', integration_type: 'API' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'src/main/resources/static/index.js', downloadOnly: false, steps: [`get-auth-qr-link`, `display-the-qr-code`, `checking-order-status`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`document.addEventListener('DOMContentLoaded', () => { let selectedPaymentOptionId = 'ALIPAY_HK'; const amount = { currency: 'HKD', value: '648.88' }; let orderId = ''; const isPollingRef = { current: null }; const paymentOptions = [ { label: 'AlipayHK', value: 'ALIPAY_HK', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*4LUyTaOjC3kAAAAAAAAAAAAAAQAAAQ', amountValue: '648.88', currency: 'HKD', }, { label: 'GCash', value: 'GCASH', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*zR33QJjHwVYAAAAAAAAAAAAAAQAAAQ', amountValue: '648.88', currency: 'PHP', }, {`, " label: `Touch'n Go eWallet`,", ` value: 'TNG', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*e7EeR4gr0K8AAAAAAAAAAAAAAQAAAQ', amountValue: '648.88', currency: 'MYR', }, ]; const handlePaymentOptionChange = event => { document.getElementById('code').innerHTML = ''; document.getElementById('payment-result').innerHTML = ''; isPollingRef.current = null; const value = event.target.value; const selectedOption = paymentOptions.find( option => option.value === value ); if (selectedOption) { const { amountValue, currency, value } = selectedOption; amount.value = amountValue; amount.currency = currency; selectedPaymentOptionId = value; document.querySelector( '.submit'`, ' ).innerText = `Pay \${currency} \${amountValue}`;', ` } }; // Generate a random order ID, for example: ORD-XXXXXXXX const generateRandomOrderId = () => { const randomNumber = Math.floor(Math.random() * 1000000);`, " const orderId = `ORD-\${randomNumber.toString().padStart(6, '0')}`;", ` return orderId; }; const updateUrlSize = (url, newSize) => { if (!url) return; const urlObj = new URL(url); urlObj.searchParams.set('size', newSize); return urlObj.toString(); }; 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 5:Display the payment results at the bottom of the page. const renderPaymentResult = (paymentResult, orderId) => { const paymentResultBox = document.getElementById('payment-result'); if ( !paymentResult || !Object.keys(paymentResult).length || !Object.values(paymentResult).some(value => value) ) { paymentResultBox.innerHTML = ''; return; } const { title, message, icon, bgColor, borderColor } = paymentResult; `, ' paymentResultBox.innerHTML = `', `

\${title}

order id: \${orderId}

\${message}

`, ' `;', ` }; // Step 4: Select the rendered data according to the result of the payment. const handlePaymentStatus = (status, orderId) => { setTimeout(() => { window.location.href = './index.html'; }, 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: [`checking-order-status`], chunks: [` // Step 3: Call inquiryPayment to get the payment status. const inquiryPayment = async orderId => { const baseUrl = 'http://localhost:8080/payment/inquiryOrder'; const body = JSON.stringify({ orderId, userId: 'antom-scantolink' }); const response = await fetch(baseUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body, }); if (!response.ok) throw new Error('Network response was not ok'); const res = await response.json(); return res.status === 'success' ? res.data.orderStatus : 'ERROR'; }; // Step 2: Create Polling mechanism to retrieve the payment result. const pollPaymentResult = async orderId => { isPollingRef.current = orderId; if (!orderId) return; const POLLING_INTERVAL = 5000; const MAX_RETRIES = 60; for (let retries = 0; retries < MAX_RETRIES; retries++) { if (isPollingRef.current !== orderId) return; try { const status = await inquiryPayment(orderId); if (status === 'SUCCESS' || retries === MAX_RETRIES) { handlePaymentStatus(status, orderId); isPollingRef.current = null; return; } } catch (error) { handlePaymentStatus('ERROR', orderId); isPollingRef.current = null; return; } if (retries < MAX_RETRIES - 1) { await new Promise(resolve => setTimeout(resolve, POLLING_INTERVAL)); } else { handlePaymentStatus('ERROR', orderId); isPollingRef.current = null; return; } } }; `] }, `Web-HTML-API-code3`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-auth-qr-link`], chunks: [` // Step 1: Get consult data from the endpoint. const handleSubmit = async () => { if (isPollingRef.current) { isPollingRef.current = null; } document.getElementById('payment-result').innerHTML = ''; orderId = generateRandomOrderId(); document.getElementById('submit').disabled = true; try { const url = 'http://localhost:8080/authorizations/consult'; const body = JSON.stringify({ currency: amount.currency, amountValue: amount.value, paymentMethodType: selectedPaymentOptionId, orderId, userId: 'antom-scantolink', }); const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body, }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } const res = await response.json(); `] }, `Web-HTML-API-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-qr-code`], chunks: [` if (res.status === 'success' && res.data.result.resultStatus === 'S') { const imageCode = res?.data?.authCodeForm?.codeDetails.find( val => val.displayType === 'IMAGE' )?.codeValue; const newImageUrl = updateUrlSize(imageCode, 'M'); const codeElement = document.getElementById('code'); if (newImageUrl) {`, ' codeElement.innerHTML = ``;', ` } else {`, ' codeElement.innerHTML = `

The current payment method is already set up.

`;', ` }`] }, `Web-HTML-API-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` pollPaymentResult(orderId); } } catch (error) { renderAlert({ title: 'Error', subTitle: error.message || 'Failed to fetch payment session data', iconType: 'error', }); } finally { document.getElementById('submit').disabled = false; } }; const radioButtons = document.querySelectorAll('input[name="radio"]'); radioButtons.forEach(button => { button.addEventListener('change', handlePaymentOptionChange); }); document.getElementById('submit').addEventListener('click', handleSubmit); }); `] }, `Web-HTML-API-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/files/web/html/index.css', when: { client: 'HTML', server: 'Java', integration_type: 'API' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'src/main/resources/static/index.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; align-items: center; justify-content: center; } iframe { width: 530px; height: 530px; border: none; } .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; 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/scantolink/files/web/html/index.html', when: { client: 'HTML', integration_type: 'API' }, unless: { server: 'Java' }, children: _jsx(AntomFile, { language: `html`, filename: 'client/index.html', downloadOnly: false, steps: [`build-the-scan-page`], children: _jsx(AntomChunk, { language: `html`, steps: [`build-the-scan-page`], chunks: [` Scan to Link Demo

Scan to Link Demo

Choose your payment method

AlipayHK

GCash

Touch'n Go eWallet

`] }, `Web-HTML-API-code1`) }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/files/web/html/index.js', when: { client: 'HTML', integration_type: 'API' }, unless: { server: 'Java' }, children: _jsxs(AntomFile, { language: `javascript`, filename: 'client/index.js', downloadOnly: false, steps: [`get-auth-qr-link`, `display-the-qr-code`, `checking-order-status`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`document.addEventListener('DOMContentLoaded', () => { let selectedPaymentOptionId = 'ALIPAY_HK'; const amount = { currency: 'HKD', value: '648.88' }; let orderId = ''; const isPollingRef = { current: null }; const paymentOptions = [ { label: 'AlipayHK', value: 'ALIPAY_HK', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*4LUyTaOjC3kAAAAAAAAAAAAAAQAAAQ', amountValue: '648.88', currency: 'HKD', }, { label: 'GCash', value: 'GCASH', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*zR33QJjHwVYAAAAAAAAAAAAAAQAAAQ', amountValue: '648.88', currency: 'PHP', }, {`, " label: `Touch'n Go eWallet`,", ` value: 'TNG', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*e7EeR4gr0K8AAAAAAAAAAAAAAQAAAQ', amountValue: '648.88', currency: 'MYR', }, ]; const handlePaymentOptionChange = event => { document.getElementById('code').innerHTML = ''; document.getElementById('payment-result').innerHTML = ''; isPollingRef.current = null; const value = event.target.value; const selectedOption = paymentOptions.find( option => option.value === value ); if (selectedOption) { const { amountValue, currency, value } = selectedOption; amount.value = amountValue; amount.currency = currency; selectedPaymentOptionId = value; document.querySelector( '.submit'`, ' ).innerText = `Pay \${currency} \${amountValue}`;', ` } }; // Generate a random order ID, for example: ORD-XXXXXXXX const generateRandomOrderId = () => { const randomNumber = Math.floor(Math.random() * 1000000);`, " const orderId = `ORD-\${randomNumber.toString().padStart(6, '0')}`;", ` return orderId; }; const updateUrlSize = (url, newSize) => { if (!url) return; const urlObj = new URL(url); urlObj.searchParams.set('size', newSize); return urlObj.toString(); }; 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}

order id: \${orderId}

\${message}

The current payment method is already set up.

`;', ` }`] }, `Web-HTML-API-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` pollPaymentResult(orderId); } } catch (error) { renderAlert({ title: 'Error', subTitle: error.message || 'Failed to fetch payment session data', iconType: 'error', }); } finally { document.getElementById('submit').disabled = false; } }; const radioButtons = document.querySelectorAll('input[name="radio"]'); radioButtons.forEach(button => { button.addEventListener('change', handlePaymentOptionChange); }); document.getElementById('submit').addEventListener('click', handleSubmit); }); `] }, `Web-HTML-API-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/files/web/html/index.css', when: { client: 'HTML', integration_type: 'API' }, unless: { server: 'Java' }, children: _jsx(AntomFile, { language: `javascript`, filename: 'client/index.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; align-items: center; justify-content: center; } iframe { width: 530px; height: 530px; border: none; } .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; 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/scantolink/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-scan-page`, `get-auth-qr-link`, `display-the-qr-code`, `checking-order-status`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`import './App.css'; import { useRef, useState } from 'react'; function App() { const [selectedPaymentOptionId, setSelectedPaymentOptionId] = useState('ALIPAY_HK'); const [amount, setAmount] = useState({ currency: 'HKD', value: '648.88' }); const [code, setCode] = useState(''); const [orderId, setOrderId] = useState(''); const [isBtnLoading, setBtnLoading] = useState(false); const [paymentResult, setPaymentResult] = useState({ title: '', message: '', icon: '', bgColor: '', borderColor: '', }); const [alert, setAlert] = useState({ title: '', subTitle: '', iconType: '', }); const isPollingRef = useRef(null); const paymentOptions = [ { label: 'AlipayHK', value: 'ALIPAY_HK', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*4LUyTaOjC3kAAAAAAAAAAAAAAQAAAQ', amountValue: '648.88', currency: 'HKD', }, { label: 'GCash', value: 'GCASH', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*zR33QJjHwVYAAAAAAAAAAAAAAQAAAQ', amountValue: '648.88', currency: 'PHP', }, {`, " label: `Touch'n Go eWallet`,", ` value: 'TNG', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*e7EeR4gr0K8AAAAAAAAAAAAAAQAAAQ', amountValue: '648.88', currency: 'MYR', }, ]; const handlePaymentOptionChange = (value) => { setCode(null); setPaymentResult({}); isPollingRef.current = null; const selectedOption = paymentOptions.find( (option) => option.value === value ); if (selectedOption) { const { amountValue, currency } = selectedOption; setAmount({ currency, value: amountValue }); setSelectedPaymentOptionId(value); } }; // Generate a random order ID, for example: ORD-XXXXXXXX const generateRandomOrderId = () => { const randomNumber = Math.floor(Math.random() * 1000000);`, " const orderId = `ORD-\${randomNumber.toString().padStart(6, '0')}`;", ` return orderId; }; // Modify a parameter in the link const updateUrlSize = (url, newSize) => { if (!url) return; const urlObj = new URL(url); urlObj.searchParams.set('size', newSize); return urlObj.toString(); }; // 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 5:Display the payment results at the bottom of the page. const renderPaymentResult = () => { if ( !paymentResult || Object.keys(paymentResult).length === 0 || Object.values(paymentResult).every( (value) => value === null || value === '' ) ) { return; } const { title, message, icon, bgColor, borderColor } = paymentResult; return (

{title}

order id: {orderId}

{message}

); }; // Step 4: Select the rendered data according to the result of the payment. const handlePaymentStatus = (status) => { setTimeout(() => { window.location.href = './index.html'; }, 8000); switch (status) { case 'SUCCESS': setPaymentResult({ title: 'Payment Successful', message: 'Thank you for your payment! We will ship out your order as soon as possible.', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*ZLggSbkLKoMAAAAAAAAAAAAAAQAAAQ', bgColor: '#e5f7f1', borderColor: '#b7e9d9', }); break; case 'FAIL': setPaymentResult({ title: 'Payment Failed', message: 'Please return to the merchant order page and resubmit your payment.', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', bgColor: 'rgba(255, 91, 77, 0.10)', borderColor: 'rgba(255, 91, 77, 0.20)', }); break; case 'ERROR': setPaymentResult({ title: 'Error', message: 'An error occurred while checking the payment status. Please try again or contact support.', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*QzBHQ40jKZAAAAAAAAAAAAAAAQAAAQ', bgColor: 'rgba(255, 91, 77, 0.10)', borderColor: 'rgba(255, 91, 77, 0.20)', }); break; default: setPaymentResult({ title: 'Payment Processing', message: 'Please return to the merchant order page and resubmit your payment.', icon: 'https://mdn.alipayobjects.com/portal_pdqp4x/afts/file/A*7ShHRKjYcjoAAAAAAAAAAAAAAQAAAQ', bgColor: 'rgba(255, 159, 26, 0.10)', borderColor: 'rgba(255, 159, 26, 0.20) ', }); } }; `] }, `Web-React-API-other1`), _jsx(AntomChunk, { language: `javascript`, steps: [`checking-order-status`], chunks: [` // Step 3: Call inquiryPayment to get the payment status. const inquiryPayment = async (orderId) => { // Define the URL for your backend endpoint const baseUrl = 'http://localhost:8080/payment/inquiryOrder'; const body = JSON.stringify({ orderId, userId: 'antom-scantolink', }); const config = { method: 'POST', headers: { 'Content-Type': 'application/json', }, body, }; const response = await fetch(baseUrl, config); if (!response.ok) throw new Error('Network response was not ok'); const res = await response.json(); return res.status === 'success' ? res.data.orderStatus : 'ERROR'; }; // Step 2: Create Polling mechanism to retrieve the payment result. const pollPaymentResult = async (orderId) => { isPollingRef.current = orderId; if (!orderId) return; const POLLING_INTERVAL = 5000; const MAX_RETRIES = 60; for (let retries = 0; retries < MAX_RETRIES; retries++) { if (isPollingRef.current !== orderId) return; let status; try { const statusResult = await inquiryPayment(orderId); status = statusResult ?? 'ERROR'; } catch (error) { console.log('error', error); status = 'ERROR'; } if (status === 'SUCCESS' || retries === MAX_RETRIES) { handlePaymentStatus(status); isPollingRef.current = null; return; } if (retries < MAX_RETRIES - 1) { await new Promise((resolve) => setTimeout(resolve, POLLING_INTERVAL) ); } else { handlePaymentStatus('ERROR'); isPollingRef.current = null; return; } } }; `] }, `Web-React-API-code4`), _jsx(AntomChunk, { language: `javascript`, steps: [`get-auth-qr-link`], chunks: [` // Step 1: Get consult data from the endpoint. const handleSubmit = async () => { // Each time you commit, make sure the last poll stops if (isPollingRef.current) { console.log('Stopping previous polling'); isPollingRef.current = null; } setPaymentResult({}); const orderId = generateRandomOrderId(); setOrderId(orderId); setBtnLoading(true); if (!selectedPaymentOptionId) { setAlert({ title: 'Warning', subTitle: 'Please select a payment method!', iconType: 'warning', }); setBtnLoading(false); return null; } try { // Define the URL for your backend endpoint const url = 'http://localhost:8080/authorizations/consult'; const body = JSON.stringify({ currency: amount.currency, amountValue: amount.value, paymentMethodType: selectedPaymentOptionId, orderId, userId: 'antom-scantolink', }); const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body, }); if (!response.ok) { throw new Error('HTTP error! Status: ' + response.status); } const res = await response.json(); `] }, `Web-React-API-code2`), _jsx(AntomChunk, { language: `javascript`, steps: [`display-the-qr-code`], chunks: [` if ( res.status === 'success' && res.data.result.resultStatus === 'S' ) { const imageCode = res?.data?.authCodeForm?.codeDetails.find( (val) => val.displayType === 'IMAGE' )?.codeValue; const newImageUrl = updateUrlSize(imageCode, 'M'); setCode(newImageUrl); pollPaymentResult(orderId); }`] }, `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-other2`), _jsx(AntomChunk, { language: `javascript`, steps: [`build-the-scan-page`], chunks: [` return ( <>

Scan to Link Demo

{code === null ? (

) : code !== undefined ? ( ) : (

The current payment method is already set up.

)}

Choose your payment method

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

{label} ); } )}

{renderPaymentResult()}

{renderAlert()}

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

); } `] }, `Web-React-API-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [`export default App; `] }, `Web-React-API-other3`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/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; align-items: center; justify-content: center; } iframe { width: 530px; height: 530px; border: none; } .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; 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/scantolink/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/scantolink/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/scantolink/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/scantolink/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/scantolink/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/scantolink/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-scan-page`, `get-auth-qr-link`, `display-the-qr-code`, `checking-order-status`], children: [_jsx(AntomChunk, { language: `javascript`, steps: [`build-the-scan-page`], chunks: [` `] }, `Web-Vue-API-code1`), _jsx(AntomChunk, { language: `javascript`, steps: [``], chunks: [` `] }, `Web-Vue-API-other2`)] }) }), _jsx(AntomPartial, { file: 'integration-builder/scantolink/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/scantolink/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/scantolink/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/scantolink/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/scantolink/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/scantolink/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/scantolink/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/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/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."); }

快速开始