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: "Create a smooth scan-to-link process by using Antom's payment capabilities. Antom offers client- and server-side sample code for SDK integration, to help you easily build a scan-to-link experience that supports various payment methods." }) }), _jsx(AntomDownloadBtn, {})] }), _jsx(AntomStepSection, { number: 1, title: 'Set up the server' }), _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: "Install the Antom Java library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom Java library, add the dependency to your" }), _jsx(Text, { isItatic: true, children: _jsxs(_components.p, { children: [_jsx(Spacer, { len: 1 }), "pom.xml", _jsx(Spacer, { len: 1 })] }) }), _jsx(_components.p, { children: "file. You can find the latest version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-java', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: ` com.alipay.global.sdk global-open-sdk-java {latest_version} `, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-java', target: "_blank", children: _jsxs(_components.p, { children: [' ', "GitHub", ' '] }) }), _jsx(_components.p, { children: "to install the Antom Java library." })] }) })] })] }), _jsxs(AntomStep, { id: 'install-antom-library', when: { server: 'Python' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "Install the Antom Python library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom Python library, add the dependency to your requirements.txt file. You can find the latest version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-python', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: `global-open-sdk-python=={latest_version}`, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-python', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "to install the Antom Python library." })] }) })] })] }), _jsxs(AntomStep, { id: 'install-antom-library', when: { server: 'PHP' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "Install the Antom PHP library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom PHP library, add the dependency to your composer.json file. You can find the latest version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-php', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: `{ "require": { "antom/global-open-sdk-php": "{latest_version}" } }`, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-php', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "to install the Antom PHP library." })] }) })] })] }), _jsxs(AntomStep, { id: 'install-antom-library', when: { server: 'Go' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "Install the Antom Go library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom Go library, add the dependency to your go.mod file. You can find the latest version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-go', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: `require ( github.com/alipay/global-open-sdk-go v{latest_version} )`, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-go', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "to install the Antom Go library." })] }) })] })] }), _jsxs(AntomStep, { id: 'install-antom-library', when: { server: '.NET' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `install-antom-library`, children: _jsx(_components.p, { children: "Install the Antom .NET library" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `maven`, title: `Maven`, children: [_jsxs(Paragraph, { children: [_jsx(_components.p, { children: "To import the Antom .NET library, add the dependency to your .csproj file. You can find the latest version on" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-dotnet', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub"] }) }), _jsx(_components.p, { children: "." })] }), _jsx(AntomCommand, { text: ` `, type: `copy` })] }), _jsx(Tab, { id: `github`, title: `GitHub`, children: _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "You can also download the source code directly from" }), _jsx(Link, { href: 'https://github.com/alipay/global-open-sdk-dotnet', target: "_blank", children: _jsxs(_components.p, { children: [' ', " GitHub ", ' '] }) }), _jsx(_components.p, { children: "to install the Antom .NET library." })] }) })] })] }), _jsxs(AntomStep, { id: `get-integration-resources`, label: `server`, children: [_jsx(Heading, { level: 3, anchored: true, id: `get-integration-resources`, children: _jsx(_components.p, { children: "Get integration resources" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Get integration resources from the" }), _jsx(Link, { href: ' https://dashboard.antom.com/global-payments/developers/quickStart', target: "_blank", children: _jsxs(_components.p, { children: [' ', "Developer", ' '] }) }), _jsx(_components.p, { children: "section in Antom Dashboard. Configure the obtained integration resources in your application and these resources are to be further used when sending requests to the Antom server." })] })] }), _jsxs(AntomStep, { id: 'initiate-an-authorization-request', label: `server`, when: { server: 'Java', integration_type: 'API' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `initiate-an-authorization-request`, children: _jsx(_components.p, { children: "Create a consult session" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint on your server to call the" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/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: "API. When sending the request, specify the authState, CustomerBelongsTo, authorization space, and other required information for this consult process." })] })] }), _jsxs(AntomStep, { id: 'specify-the-consultation-redirection-url', label: `server`, when: { server: 'Java' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `specify-the-consultation-redirection-url`, children: _jsx(_components.p, { children: "Specify the consult redirection URL" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Set the consult redirection URL, where the buyer is to be redirected after completing the authorization consult process. You can guide the buyer with further actions on applying for tokens." }) })] }), _jsxs(AntomStep, { id: 'save-payment-information', label: `server`, when: { server: 'Java' }, children: [_jsx(Heading, { level: 3, anchored: true, id: `save-payment-information`, children: _jsx(_components.p, { children: "Save payment information" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Save payment information from this API call to prepare for subsequent payments. In actual development, you can save the payment information to a database." }) })] }), _jsxs(AntomStep, { id: 'receive-auth-notification', label: `server`, when: { server: 'Java' }, children: [_jsx(Heading, { level: 4, anchored: true, id: `receive-auth-notification`, children: _jsx(_components.p, { children: "Receive authorization notification" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint to your server to receive authorization success" }), _jsx(Link, { href: "https://docs.antom.com/ac/scantopay/authorization#CvOoy", target: "_blank", children: _jsxs(_components.p, { children: [' ', "notifications", ' '] }) }), _jsx(_components.p, { children: "from Antom server. The main contents of the notification are authCode and authState that are used to apply for the token." })] })] }), _jsxs(AntomStep, { id: 'apply-for-the-token', label: `server`, when: { server: 'Java' }, children: [_jsx(Heading, { level: 4, anchored: true, id: `apply-for-the-token`, children: _jsx(_components.p, { children: "Apply for the token" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint to your server to call the" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/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: "API. Specify authCode and authState when sending the request to apply for the token. In actual development, you need to save the accessToken in the database for subsequent payments." })] })] }), _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: "Initiate a payment request" }) }), _jsxs(Paragraph, { children: [_jsx(_components.p, { children: "Add an endpoint on your server to call the" }), _jsx(Link, { href: "https://docs.antom.com/ac/ams/payment_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: "API. When sending the payment request, specify the accessToken, the payment method, payment amount, currency, payment request ID, order information, and other required information for this payment." })] })] }), _jsx(AntomStepSection, { number: 2, title: 'Build a scan-to-link page on the client' }), _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: "Build the scan-to-link page" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Display the authorized payment methods that you offer to buyers on the scan-to-lnk page." }) })] }), _jsxs(AntomCondition, { when: { platform: 'Web' }, children: [_jsx("br", {}), _jsx(Heading, { level: 4, anchored: true, id: ``, children: _jsx(_components.p, { children: "Payment" }) }), _jsxs(TabGroup, { selector: `tabs`, children: [_jsxs(Tab, { id: `frist`, title: `First-time payment`, 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: "Obtain the authorization QR code" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "The first-time payment required the authorization from the buyers. After the buyer selects the payment method for authorization, you send an authorization inquiry request containing the relevant payment method information and retrieve the authorization QR code link from the response." }) })] }), _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: "Dispay the QR code" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "Display the QR code on the front-end page." }) })] })] }), _jsxs(Tab, { id: `subsequent`, title: `Subsequent payments`, children: [_jsx(AntomStep, { id: '111', label: 'client', children: _jsx(Paragraph, { children: _jsx(_components.p, { children: "Subsequent payments do not require buyer authorization and the back-end payment will directly return the payment information to the front-end after processing the payment." }) }) }), _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: "Checking the order status" }) }), _jsx(Paragraph, { children: _jsx(_components.p, { children: "The front-end queries the order status through polling or a long connection. The order is initialized during the authorization inquiry and the status is updated after the buyer authorizes the payment." }) })] }), _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."); }

Quick start