Я недавно интегрировал подписки Braintree в проект Next.js как часть создания screengrab.it - и это было непросто, как я ожидал, поэтому подумал, что документирую этот процесс здесь. Я понимаю, что первый вопрос здесь - Почему вы не используете полосу?. Stripe не поддерживает учетные записи из юрисдикции, в которой я живу, и мы ждали ~ 6 лет.
Stripe, Paypal и Braintree предоставляют аналогичные функции и цены. Paypal печально известен наличием плохой документации и является одной из причин, по которой они купили Braintree в 2013 году. Хорошим преимуществом Braintree является то, что он позволяет пользователям расплачиваться с помощью учетных записей Paypal.
Создайте учетную запись песочницы и подписки
Перейдите на https://www.braintreepayments.com/je/sandbox и зарегистрируйтесь с помощью учетной записи песочницы.
Перейдите в Подписки, затем в Планы, где вы можете создавать новые планы. Я создал 3 плана с идентификаторами «basic_monthly», «Recommended_monthly» и «enterprise_monthly».
Добавить в проект next.js
Перейдите к своему проекту next.js и добавьте braintree-web-drop-in-react. braintree-web-drop-in-react - это оболочка реакции для Drop-in UI от Braintree.
yarn add braintree-web-drop-in-react # or npm install braintree-web-drop-in-react
Добавьте в свой проект следующий компонент.
import React, { Component } from 'react'
import DropIn from "braintree-web-drop-in-react";
export default class Subscriptions extends Component {
instance;
state = {
clientToken: null,
purchaseComplete: false
};
render() {
if (this.state.purchaseComplete) {
return (
<div>
<h1>Completed.</h1>
</div>
);
} else {
return (
<div>
<DropIn
options={{ authorization: TOKENIZATION_KEY}}
onInstance={(instance) => (this.instance = instance)}
/>
<button onClick="">Submit</button>
</div>
);
}
}
}
Ваш TOKENIZATION_KEY создается на портале Braintree, щелкнув значок настроек в правом верхнем углу и выбрав API. Прокрутите вниз и нажмите Создать новый ключ токенизации. С ключом, добавленным при запуске проекта, вы должны увидеть всплывающий пользовательский интерфейс:
Обновите свой компонент, чтобы зацепить кнопку покупки. Метод берет одноразовый номер из всплывающего пользовательского интерфейса Braintree и отправляет его в конечную точку на вашем сервере; в моем случае я использовал / api / payment / checkout.
import React, { Component } from 'react'
import DropIn from "braintree-web-drop-in-react";
export default class Subscriptions extends Component {
instance;
state = {
clientToken: null,
purchaseComplete: false
};
async buy() {
// Send the nonce to your server
const { nonce } = await this.instance.requestPaymentMethod();
const res = await fetch('/api/payment/checkout',
{
body: JSON.stringify({
paymentMethodNonce: nonce,
user_id: "1234"
}),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
}
)
const result = await res.json()
if (result.result == "success") {
this.setState({
purchaseComplete: true
});
}
}
render() {
if (this.state.purchaseComplete) {
return (
<div>
<h1>Completed.</h1>
</div>
);
} else {
return (
<div>
<DropIn
options={{ authorization: TOKENIZATION_KEY}}
onInstance={(instance) => (this.instance = instance)}
/>
<button onClick={this.buy.bind(this)}>Submit</button>
</div>
);
}
}
}
Создайте конечную точку API
Создайте конечную точку api, которую вы добавили в действие покупки на предыдущем шаге. Для меня это был / api / payment / checkout.
Добавьте следующий код:
import gateway from '../../../utils/gateway'
export default async function checkout (req, res) {
// Use the payment method nonce here
const nonceFromTheClient = req.body.paymentMethodNonce;
// Create a new transaction for $10
const newTransaction = gateway.transaction.sale({
amount: '10.00',
paymentMethodNonce: nonceFromTheClient,
options: {
// This option requests the funds from the transaction
// once it has been authorized successfully
submitForSettlement: true
}
}, (error, result) => {
if (result) {
res.status(201).json({'result': 'success'})
} else {
res.status(500).send(error);
}
});
}
Этот код позволит совершить единовременную покупку на сумму 10,00 долларов США. Добавьте Braintree в свой проект:
npm install braintree
и импортируйте шлюз из папки utils или libs:
import braintree from 'braintree'
const environment = process.env.BRAINTREE_ENVIRONMENT
const gateway = new braintree.BraintreeGateway({
environment: braintree.Environment[environment],
merchantId: process.env.BRAINTREE_MERCHANT_ID,
publicKey: process.env.BRAINTREE_PUBLIC_KEY,
privateKey: process.env.BRAINTREE_PRIVATE_KEY
})
export default gateway;
Что импортирует мои ключи из моего .env
# Braintree BRAINTREE_ENVIRONMENT=Sandbox BRAINTREE_MERCHANT_ID=XXXXXXXXX BRAINTREE_PUBLIC_KEY=XXXXXXXXX BRAINTREE_PRIVATE_KEY=XXXXXXXXX
Вы можете найти свои собственные настройки обратно в винчестере настроек портала Braintree и выбрать Просмотр в разделе Ключи API.
Протестируйте разовую покупку
Если вы запустите проект и добавите карту с номером 4242 4242 4242 4242 и любой будущей датой истечения срока действия. Нажав на «Отправить», вы должны увидеть «Завершено». сообщение и иметь возможность видеть транзакции, попавшие в Braintree на их портале.
Покупка подписки
Чтобы подписаться на один из наших планов, нам нужно сделать несколько шагов. Нам надо:
- Создайте запись о нашем клиенте в Braintree.
- Используйте идентификатор клиента и одноразовый номер платежа, чтобы получить токен способа оплаты
- Используйте токен способа оплаты, чтобы подписаться на план
Мы можем сделать это, обновив нашу конечную точку оформления заказа до следующего:
import gateway from '../../../utils/gateway'
export default async function checkout (req, res) {
// Use the payment method nonce here
const nonceFromTheClient = req.body.paymentMethodNonce;
gateway.customer.create({
id: req.body.user_id,
email: "[email protected]",
}, (err) => {
if (err) return res.status(500).send(error);
gateway.paymentMethod.create({
customerId: req.body.user_id,
paymentMethodNonce: nonceFromTheClient
}, (err, result) => {
if (err) return res.status(500).send(error);
gateway.subscription.create({
paymentMethodToken: result.paymentMethod.token,
planId: "basic_monthly"
}, (err, result) => {
if (err) return res.status(500).send(error);
res.status(201).json({'result': 'success', 'subscription': result.subscription})
});
});
});
}
Здесь у нас есть идентификатор пользователя, который передается от клиента. PlanId - это идентификатор, который мы ввели при создании планов, для меня «basic_monthly».
Опять же, когда мы запустим это, мы должны увидеть «Завершено». На портале Braintree в Vault вы сможете найти клиентов и увидеть 1 нового клиента.
Если вы перейдете в Подписки и выполните поиск, вы должны увидеть активную подписку.
Если вы нажмете Планы, вы увидите список активных и отмененных подписок.
