Divi의 가격표에 Simple Stripe 결제 버튼을 추가하는 방법

Stripe는 특히 기술에 정통한 개발자인 경우 온라인 비즈니스를 위한 매우 유연한 지불 처리 솔루션입니다. 그러나 개발자가 아니고 여전히 Stripe를 사용하여 온라인으로 몇 가지 제품을 판매하려는 경우 간단한 방법이 있습니다. 사실, 몇 가지 코드(또는 간단한 플러그인)만 있으면 웹사이트에 Stripe 결제 버튼을 순식간에 추가할 수 있습니다.

이 튜토리얼에서는 WordPress 플러그인용 Stripe Payments를 사용하여 Divi 웹사이트에 Stripe 결제 버튼을 추가하는 방법을 보여 드리겠습니다. Divi 레이아웃과 일치하도록 버튼 스타일을 지정하는 방법도 보여 드리겠습니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 생성할 Stripe 결제 버튼을 살짝 살펴보겠습니다.

시작하기

이 사용 사례 자습서의 경우 다음이 필요합니다.

• Divi 테마(설치 및 활성)
• 스트라이프 계정
• WP Simply Pay의 WordPress 플러그인용 Stripe Payments(설치 및 활성)
• 우리는 또한 Divi Builder 내에서 무료로 제공되는 디지털 제품 가격 페이지 레이아웃을 사용할 것입니다.

플러그인 정보

WP Simply Pay의 Stripe Payments for WordPress는 간단한 단축 코드 삽입을 사용하여 Stripe로 신용 카드 결제 수집을 시작할 수 있는 플러그인입니다. 플러그인을 사용하지 않고도 실제로 결제 양식과 결제 버튼을 수동으로 만들 수 있지만 이 플러그인이 작업을 쉽게 만들고 몇 가지 편리한 기능(결제 확인 및 결제 실패 페이지와 같은)을 제공하기 때문에 장기적으로 더 도움이 된다고 생각했습니다. . 이 튜토리얼에서는 무료 Lite 버전의 플러그인을 사용할 것입니다. 플러그인의 프로 버전을 사용하면 사용자 정의 필드, 사용자 정의 금액 및 구독 기능과 같은 지원과 함께 양식 스타일을 더 잘 제어할 수 있습니다.

플러그인으로 스트라이프 양식 설정

플러그인을 설치하고 활성화했으면 Simple Pay Lite > 설정으로 이동 합니다 . 그런 다음 Stripe Keys 탭에서 Stripe 계정 API 키를 입력해야 합니다. 이 튜토리얼에서는 테스트 키만 사용할 것이지만 실제 현금 수집을 시작하려면 Stripe 계정을 확인하고 활성화하고 라이브 API 키를 생성해야 합니다.

Stripe 계정에 로그인하고 개발자 > API 키를 클릭하여 API 키를 찾을 수 있습니다.

게시 가능 키와 비밀 키를 모두 플러그인 설정에 복사해야 합니다.

이제 일반 탭으로 이동합니다. 거기에서 결제 성공 페이지와 결제 실패 페이지를 지정할 수 있습니다. 플러그인이 이미 해당 페이지를 생성했음을 알 수 있습니다. 그러나 페이지 콘텐츠는 단축 코드로 생성되므로 실제로 해당 단축 코드를 모든 Divi 레이아웃의 모든 Divi 모듈에 추가하여 해당 페이지의 사용자 정의 버전을 생성할 수 있습니다. 지금은 기본 페이지를 제자리에 유지하고 설정을 계속하십시오.

결제 버튼 스타일을 "없음(테마에서 상속)"으로 설정합니다. 이 모든 작업은 기본 파란색 줄무늬 버튼의 스타일을 지정하는 데 사용되는 CSS를 제거하는 것입니다. 이렇게 하면 Divi에서 버튼의 스타일을 지정하기 위해 사용자 지정 CSS를 추가할 때 작업이 조금 더 깔끔해집니다.

그런 다음 변경 사항을 저장합니다.

결제 확인 탭에서 사용 가능한 템플릿 태그를 사용하여 결제 확인 페이지의 단축 코드로 표시되는 메시지와 정보를 사용자 지정할 수 있습니다. 그러나 이 자습서에서는 기본 메시지를 그대로 두겠습니다.

스트라이프 결제 양식 만들기

지불 양식은 실제로 사용자가 페이지를 떠나지 않고도 구매를 완료할 수 있는 팝업 지불 양식을 생성하는 Stripe 지불 버튼입니다. 따라서 판매하는 각 제품이나 서비스에 대해 새 지불 양식을 만들어야 합니다. 이 사용 사례에서는 3개의 모의 제품에 대해 3개의 결제 양식을 만들 것입니다.

새 결제 양식을 만들려면 WordPress 대시보드로 이동하여 Simple Pay Lite > 새로 추가로 이동합니다.

지불 양식에 제목을 지정합니다(이 제목은 프런트 엔드에 표시되지 않음).

그런 다음 지불 옵션 탭에서 일회성 금액을 입력합니다.

그런 다음, 온페이지 양식 표시 탭을 클릭하고 기본 지불 버튼 텍스트를 "지금 구매"(또는 원하는 대로)로 변경합니다. 결제 버튼 처리 텍스트도 선택할 수 있습니다.

Checkout Overlay Display 탭에서 다음을 업데이트합니다.

회사 이름
항목 설명
로고/이미지 URL
기억하기 활성화: 예

이 옵션은 이 특정 제품에 대한 결제 양식 팝업에 표시되는 항목을 결정합니다.

완료되면 지불 양식을 확인하고 게시/업데이트하십시오.

Divi 페이지 레이아웃에 붙여넣기 위해 최종적으로 Edit Payment Form 페이지의 오른쪽 상단에 있는 Payment Form Shortcode를 복사해야 합니다.

그러나 지금은 동일한 프로세스를 계속하여 각각 고유한 항목 설명, 로고/이미지 및 금액이 있는 두 개의 추가 지불 양식을 만들 수 있습니다.

모든 지불 양식이 생성되면 Simple Pay Lite > 지불 양식으로 이동하여 지불 양식을 방문할 수 있습니다. 거기에서 단축 코드에 쉽게 액세스할 수 있습니다.

Divi 페이지 레이아웃에 스트라이프 결제 버튼 추가하기

스트라이프 지불 양식 단축 코드가 준비되었으므로 이제 Divi 페이지 레이아웃을 시작하고 실행해야 합니다. 이렇게 하려면 새 페이지를 만들고 페이지에 제목을 지정한 다음 클릭하여 Divi Builder를 사용하십시오.

그런 다음 "미리 만들어진 레이아웃 선택" 옵션을 선택합니다.

디지털 제품 레이아웃 팩을 열고 클릭하여 디지털 제품 가격 페이지를 사용하십시오.

레이아웃이 페이지에 로드되면 페이지를 게시한 다음 클릭하여 프런트 엔드에서 빌드합니다.

별도의 탭에서 결제 양식 페이지로 돌아가서 가격표에 추가하려는 단축 코드를 가져옵니다.

그런 다음 가격 책정 페이지 레이아웃으로 돌아가 레이아웃에 있는 가격 책정 테이블 중 하나에 대한 가격 책정 테이블 설정을 엽니다.

버튼 텍스트를 꺼내고(단축 코드가 버튼 역할을 하므로 필요하지 않음) 콘텐츠 상자의 콘텐츠 아래에 단축 코드를 붙여넣습니다.

버튼 아래에 "테스트 모드"라는 텍스트가 강조 표시된 스타일이 지정되지 않은 버튼이 표시됩니다. 기본 파란색 버튼 대신 버튼에 테마 스타일을 사용하는 옵션을 선택했기 때문에 버튼이 스타일이 지정되지 않았습니다. 테스트 모드 텍스트는 라이브 스트라이프 지불 양식을 사용하고 있지 않음을 상기시키기 위한 것입니다. 테스트 모드 텍스트는 라이브 API 키가 사용되면 분명히 사라집니다.

다음으로 나머지 두 개의 가격표에 있는 다른 두 개의 지불 양식 단축 코드를 복사하여 붙여넣는 동일한 프로세스를 계속하십시오.

버튼 중 하나를 테스트하여 결제 양식 오버레이가 제대로 작동하는지 확인합니다. 다음과 같이 보여야 합니다...

불행히도 이 버전의 플러그인에서는 표시되는 기본 스타일 이상으로 결제 양식 오버레이를 사용자 정의할 수 없습니다. 그러나 기능은 거기에 있으며 많은 경우에 추가 스타일링이 필요하지 않습니다. 그러나 해당 버튼의 스타일을 지정할 수 있습니다!

레이아웃과 일치하도록 스트라이프 결제 버튼 스타일 지정

Stripe 지불 버튼의 스타일을 지정하기 위해 페이지 설정에 몇 가지 사용자 정의 CSS를 추가할 것입니다. 먼저 버튼의 스타일을 지정하는 데 사용할 선택기를 파악해야 합니다. 브라우저 개발자 도구를 사용하여 찾을 수 있습니다. 스트라이프 버튼을 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택합니다. html 코드에서 버튼에 "simpay-payment-btn"이라는 CSS 클래스가 있음을 알 수 있습니다.

이것은 버튼의 스타일을 대상으로 하는 데 필요한 선택기입니다.

Stripe 결제 버튼의 스타일을 미리 만들어진 레이아웃에 사용된 버튼과 일치시키려면 페이지에 이미 스타일이 지정된 Divi 버튼 중 하나를 검사하여 필요한 CSS 코드를 얻을 수 있습니다.

이제 페이지 설정을 열고 고급 탭에서 다음 사용자 정의 CSS를 추가하십시오.

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

그게 다야! 최종 결과를 확인해보자.

결제 확인 및 결제 실패 페이지 사용자 지정

플러그인이 단축 코드를 사용하여 결제 확인 및 결제 실패 페이지 콘텐츠를 생성하기 때문에 해당 단축 코드를 Divi 레이아웃에 추가한 다음 Divi의 내장 설정을 사용하여 원하는 대로 텍스트 스타일을 지정할 수 있음을 잊지 마십시오.

이것은 사용자 정의 CSS에 의존하지 않고도 이러한 페이지의 스타일을 웹사이트와 일치시키는 데 유용합니다.

마지막 생각들

Stripe은 온라인 결제를 수집하기 위한 매우 편리한 솔루션이 될 수 있습니다. 그리고 Simple Payments for WordPress 플러그인을 사용하면 몇 분 안에 Divi 사이트에서 기본 Stripe Checkout 기능을 실행하고 실행할 수 있습니다. 또한 Divi의 미리 만들어진 레이아웃을 활용하면 이미 생성된 CSS 코드를 복사하여 붙여넣기만 하면 레이아웃에 맞게 Stripe 결제 버튼을 추가하고 스타일을 지정할 수 있습니다. 그 결과 방문자가 페이지를 떠날 필요 없이 방문자로부터 지불을 수집할 수 있는 완전한 기능의 안전한 지불 처리 도구가 탄생했습니다.

WordPress 웹사이트에서 Stripe 결제를 수락하는 더 많은 방법을 자유롭게 탐색하십시오.

이 튜토리얼이 도움이 되었기를 바라며 댓글로 여러분의 의견을 기다리겠습니다.

건배!