스타일
기본적으로 결제 UI 구성 요소에는 고유한 스타일이 없습니다. 사전 정의된 스타일을 사용하여 사용자 지정할 수 있습니다. 민감한 데이터 입력 필드를 표시하는 데 사용되는 보안 구성 요소는 iframe 내부에 표시되므로 CSS를 사용하여 스타일을 적용할 수 없습니다. 보안 구성 요소를 사용자 지정하려면 아래 지침 참조하세요.
사전 정의된 스타일
SDK에 포함된 스타일을 구성 요소에 적용하는 방법:
- 프로젝트 빌드에 스타일이 포함된
@xsolla/pay-station-sdk/dist/style.css파일을 추가합니다. - 결제 UI의 HTML 마크업에 스타일 링크를 추가합니다.
예:
Copy
- html
<html>
<head>
...
<link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
</head>
...
</html>
보안 구성 요소에 스타일 적용
보안 구성 요소는 민감한 사용자 데이터를 입력하는 데 사용됩니다. 보안을 위해 보안 구성 요소는 iframe 내부 페이지에 표시됩니다. 이러한 구성 요소에 스타일을 적용하려면 headlessCheckout.setSecureComponentStyles 메서드를 사용합니다.
예:
Copy
- typescript
await headlessCheckout.setSecureComponentStyles(`
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
input {
padding: 12px;
border: 1px solid grey;
border-radius: 8px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
outline: none;
}
`);
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
